Stagger animation in a random order with TweenMax

Question

I'm trying to create a staggerTo() animation with TweenMax that affects elements in a random order, meaning I don't want the actual animation to be random but its order.

For that I take all the elements I want to animate and shuffle using this function:

$.fn.shuffle = function() {

    var allElems = this.get(),
        getRandom = function(max) {
            return Math.floor(Math.random() * max);
        },
        shuffled = $.map(allElems, function(){
            var random = getRandom(allElems.length),
                randEl = $(allElems[random]).clone(true)[0];
                allElems.splice(random, 1);
                return randEl;
        });

    return $(shuffled);

};

var elements = $('.animate').shuffle();

I then lunch the staggerTo animation:

TweenMax.staggerTo(elements, 0.1, {y: 100, ease: Quad.easeInOut}, 0.1);

But of course, I then realized I had it all wrong, as TweenMax wasn't animating the actual DOM elements but rather its virtual clones.

Unfortunately, I don't know how to proceed from here.

Could anyone help me out? Thanks!

Answer 1

I am probably failing to understand your scenario but it seems that at the core of it, I think your problem is more about randomizing an array of jQuery elements. Have you taken a look at this ?

1. Convert your elements to array like so: var elements=$('.animate').toArray(); .
2. Shuffle this array using this technique: elements.sort(function(){return 0.5-Math.random()}); . Thanks to CSS-Tricks.com.
3. Then feed this new array to the staggerTo call: TweenMax.staggerTo(elements, 0.1, {y: 100, ease: Quad.easeInOut}, 0.1); ie what you already have.
4. Quick jsFiddle here .

Please note that there are many solutions when it comes to shuffling arrays.