Слишком много обратных вызовов в Tweenmax js

Question

Есть ли лучший способ написать этот тип кода в Tweenmax?

TweenMax.to("#second-scene .layer-one", 0.5, {delay:0.2, top:0, onComplete: function() { 

        TweenMax.to("#second-scene .layer-two", 0.5, {top:0, onComplete: function() { 

         TweenMax.to("#second-scene .layer-three", 0.5, {left:0, onComplete: function() { 

          TweenMax.to("#second-scene .layer-four", 0.5, {left:0, onComplete: function() { 

           TweenMax.to("#second-scene .layer-five", 0.5, {left:0, onComplete: function() { 

            TweenMax.to("#second-scene .layer-six", 0.5, {top:0}); 

           }}); 
          }}); 
         }}); 
        }}); 
       }}); 

И я хотел бы знать, повлияет ли запись таким образом на производительность.

Заранее спасибо

Answer 1

Вы должны использовать TimelineLite/Max:

var tl = new TimelineLite(); 

tl.to("#second-scene .layer-one", 0.5, {delay:0.2, top:0}); 
tl.to("#second-scene .layer-two", 0.5, {top:0}); 
//and so on 

Timeline не выполняет анимации в последовательности, поэтому нет необходимости обратных вызовов

Answer 2

Вы могли бы использовать метод Staggered анимации для подобных объектов Tweening. Позволяет определить массив объектов, время между каждым шатаются, обратные вызовы и т.д.

var objects = [obj1, obj2, obj3]; 
TweenMax.staggerFromTo(objects, 3, {top:100}, {top:0}, 0); 

TweenMax.staggerFromTo()

Производительность мудрый, я не думаю, что это было бы по-другому. Просто делает для более читаемого и редактируемого кода.