TimelineLite.staggerTo - iterate through each item's prop

[gani]

Hi,

My question may sounds a little bit stupid - Is there a way to iterate throgh each item's prop with staggerTo without using too many loops?

 

What i want to implement is somethink like this:

$boxes.each(function(i, box){
    var $box = jQuery(box);
    var animation = new TimelineLite({ paused: true });
    animation.staggerTo($box, 1, {left: $box.position().left, top: $box.position().top });
    this.animation = animation;
});

// OR even better:
var animation = new TimelineLite({ paused: true });
animation.staggerTo($boxes, 1, {left: $box.position().left, top: $box.position().top });

Any help would be greatly appreciated

[OSUblake]

Hi Gani,

 

Staggered tweens are supposed to have the same destination values, but you are trying to create unique ones. If you need unique values, you can stagger the delay for each tween or its timeline position.

 

$(".box").each(function(i, box){
  var $box = $(box);
  TweenLite.to($box, 1, {left: $box.position().left, top: $box.position().top, delay: i * 0.2 });
});

See the Pen myLdVB by osublake (@osublake) on CodePen

[gani]

Great idea, thanks