Анимация Stagger в случайном порядке с TweenMax

Question

Я пытаюсь создать анимацию staggerTo() с TweenMax, которая затрагивает элементы в случайном порядке, то есть я не хочу, чтобы фактическая анимация была случайной, но ее порядок.

Для этого я беру все элементы, которые я хочу, чтобы оживить и перемешайте с помощью этой функции:

$.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(); 

Я тогда ланча staggerTo анимации:

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

Но, конечно, я тогда понял, что я если бы все было неправильно, поскольку TweenMax не оживлял фактические элементы DOM, а скорее его виртуальные клоны.

К сожалению, я не знаю, как исходить отсюда.

Может ли кто-нибудь помочь мне? Благодаря!

Answer 1

Я, вероятно, не понимаю ваш сценарий, но кажется, что в основе его, я думаю, ваша проблема связана скорее с рандомизацией массива элементов jQuery. Вы взглянули на this?

1. Преобразуйте свои элементы в массив следующим образом: var elements=$('.animate').toArray();.
2. Перемешать этот массив, используя this Техника: elements.sort(function(){return 0.5-Math.random()});. Благодаря CSS-Tricks.com.
3. Затем подайте этот новый массив на адрес staggerTo: TweenMax.staggerTo(elements, 0.1, {y: 100, ease: Quad.easeInOut}, 0.1); что вы уже имеете.
4. Quick jsFiddle here.

Обратите внимание, что существует много solutions, когда дело доходит до перетасовки массивов.