Jump to content


TimelineLite.staggerTo - iterate through each item's prop

Recommended Posts


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 :)

Link to comment
Share on other sites

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

  • Like 3
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.