Jump to content


TimelineLite staggerFromTo

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts



With TimelineLite.staggerFromTo is it possible in the context of 'fromVars' and 'toVars' to reference an array of values according to which index is being animated.


for example say I have three navigation buttons: 

<div class="navButton"></div>
<div class="navButton"></div>
<div class="navButton"></div> 

...and a JS object that contains x,y positions of where the three buttons should be animated to:

var navPositions = [ { x:100, y:100 }, { x:200, y:30 }, { x:55, y:97}   ] //arbitrary numbers

...then reference an array or positions as opposed to static values 

var tl = new TimelineLite();
tl.fromTo( $('.navButton'), 1, {x:0,y:0}, { navPositions[aTLprovidedIndex?] }, 0.2); 

I would love to know if this is possible and to be shown an example if so...


Many thanks in advance





Link to comment
Share on other sites

There is no built in feature for this, but I can't see any real need for it. The code for it is too simple:

var tl = new TimelineLite(),
    navPositions = [ { x:100, y:100 }, { x:200, y:30 }, { x:55, y:97} ],
    items = $('.navButton');

// perhaps a check that navpositions and items are equal length here...

for (var i = navPositions.length; i > 0; i--) {
  tl.fromTo( items[i], 1, { x:0, y:0 }, navPositions[i], 0.2);
staggerFromTo is only applicable if all tweens have the same from and to vars, and you just need to stagger the start times.
  • Like 4
Link to comment
Share on other sites

When tweening an Array of elements using fromTo() the fromVars and toVars must be the same.

If you need each element to tween from or to their own unique values you will have to create new tweens for each element. In your case you can just loop through the jQuery collection and create and insert new tweens for each element.

  • Like 1
Link to comment
Share on other sites

Ah, Jamie beat me again;)


Here's how you could do it with a jQuery each()


var tl = new TimelineLite();
var navPositions = [ { x:100, y:100 }, { x:200, y:30 }, { x:55, y:97}, {x:20, y:150}]

$(".box").each(function (index, element){
//set position to index * 0.5 to get a stagger
  tl.fromTo(element, 1, {x:0, y:0}, navPositions[index], index * 0.5)


  • Like 3
Link to comment
Share on other sites

...thank you all for your help. The solution is much clearer :-)

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.