Iterating over elements and wait for each animation to finish

[pnpetroff]

So, I'm iterating over elements from last to first and I'm struggling to find better way to do so. I want every iteration to wait for the animation to finish and then continue. Is there a function that I'm missing? If there is, it'll be cool because thus the whole thing can be accomplished via for loop.

This is the code:

var i = lastElement;
    flipElements(i);
        function flipElements(i){
            if (i >= 0) {
                $('[#element-id-=' + i + ']').velocity({
                     //some animation here
                },{
                complete: function() {
                        i--;
                        flipElements(i)
                    }
                })
            } //end if
        } // end function

Another example. Is it possible in the code below the each function to to iterate over all elements but wait for each animation to finish before moving onto the next one?

        $('.elements').each(function(){

            $(this).velocity({
                opacity: 1
            },{
                duration: 800
            })

        });

[jackrugile]

There is a roundabout solution if you register a custom UI effect. If you set the stagger equal to the duration, it will have the same effect as queuing up the elements on complete. I did something like this:

http://codepen.io/jackrugile/pen/e512f7ee95e814c452941d8a16068f5b

$.Velocity.RegisterUI( 'tester', {
    calls: [ 
      [ { opacity: [ 1, 0 ], scale: [ 1, 0 ] } ]
    ]
});

$( 'div' ).velocity( 'tester', { duration: 100, stagger: 100 } );

[julianshapiro]

@pe6o: I understand the Q now. That'd have to be done manually (Velocity has no helper function for doing so), but it's not very hard to piece that together in JavaScript.

However, @jackrugile's solution is a fantastic and expressive workaround. Furthermore, thanks to this morning's update to Velocity and the UI pack, you can now pass a value function (http://julian.com/research/velocity/#valueFunctions) into the stagger option. This will allow you to define your own falloffs, e.g.:

stagger: function(elementIndex, element) {
    return 1000 * (0.85 - Math.exp(-elementIndex/10));
}

(cc @codedependant.)

Thanks for the help, @jackrugile!

[pnpetroff]

Oh, this is beautiful! @jackrugile's solution combined with the backwards option is just what I needed for the first example!

And now with risk to sound stupid, why these call are not working (using jackrugile's codepen without the scale css line)

calls: [ 
    [ { rotateY: [ 45, 0 ] }, 0.50 ]
    [ { opacity: [ 1, 0 ] }, 0.50 ]
  ]

And one last thing (I promise!):

Is there a callback similar to the new visibility: hidden option for something like this:

$.Velocity.RegisterUI( 'functionName', {
    calls: [
        //some transitions here
    ],
    reset: { visibility: 'hidden' }
});

Or there is a way using durationPercentage in the call to make the visibility change in the last moment?

[julianshapiro]

In your first example, it looks like you're rotating before the element is actually visible.

In your second, just pass visibility: "hidden" into the actual UI pack call itself and it'll get applied.

[pnpetroff]

Awesome, such a great plugin! I've been using Transit until now, but this just blows my mind.

Great work, once again =]

[julianshapiro]

ty ty :)