Feature Suggestions

[krazyjakee]

Handy reddit link for the lowdown on this plugin: https://github.com/jQueryKeyframes/jQuery.Keyframes

I want jQK to easily make websites more magical and less static.
In case you didn't know, there are plugins available which add extra functionality: https://github.com/jQueryKeyframes but I'd like to go further.

One idea I had recently is an experimental user experience feature that made a button glow brighter the closer you moved your mouse to it - the ultimate call to action.

Anyway, my creative juices are pretty dull at the moment. Any ideas welcome.

[Snow-Okami]

Is it possible currently do:

$.keyframe.define([{
      name: 'fill',
       percentage  : {
        'width' : '0'
      }

where percentage would be a dynamic variable made into a string?

var percentage = update + '%';

I have tried to do so without success. If not it would be a nice feature request.

[krazyjakee]

It's more of a javascript thing, try

$.keyframe.define([{
      name: 'fill',
       '' + percentage  : {
        'width' : '0'
      }

stupid I know, but I believe that is a solution.

[Snow-Okami]

Hmmm, I tried that but it yields a 'Uncaught SyntaxError: Unexpected identifier' error.

Have been scouring the web for solutions to the issue, seem to have found some articles similar to doing what you suggested here but they seem to be using string replacing. Will try to scour a bit more and see if I can come up with a solution.

Sorry for the beginner question, I'm new to javascript (normally doing C# and C++ and was thrown into a situation where I need to integrate some javascripting for the UI.

[krazyjakee]

Sadly, this was the only solution I could find: http://jsfiddle.net/sb4wvprw/

[Snow-Okami]

Tried the fiddle, but It did not work for me. None of the solutions did except the overly long and complicated finding the element in the style sheets and trying to fix it that way. So in the end to solve this situation I ended up just doing this (using HTML5 progress element)

animateVitalsBar = function (update, bar) {
    var animationSpeed = 10; // in ms
    var vBar = document.getElementById(bar);
    var vBarGress = setInterval(function() {
        if(vBar.value == update)
            clearInterval(vBarGress);
        else if(vBar.value < update)
            vBar.value++;
        else if(vBar.value > update)
            vBar.value--;
    },animationSpeed);
};

Couldn't deal with getting it to work with the percentages and the strings :( and to me this is much simpler and cleaner. Oh well. Thanks for such a great plugin though @krazyjakee 👯

[grigorievk]

Hey there! Is it possible to run two functions animation? One after the other? So, how to do it in CSS (
animation: myFirstAnimation 2s 1s 1, mySecondAnimation 5s infinite;)

[krazyjakee]

@grigorievk totally! I will open this up as a separate issue.