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!

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!

• javascript
• jquery
• animation
• gsap

Share Improve this question Follow asked Apr 10, 2015 at 15:13 Stephanie D.Stephanie D. 11922 silver badges1010 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

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..
3. Then feed this new array to the staggerTo call: TweenMax.staggerTo(elements, 0.1, {y: 100, ease: Quad.easeInOut}, 0.1); i.e. what you already have.
4. Quick jsFiddle here.

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