Jump to content


staggerTo Reconstruct

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

The animation in the Codepen ends using a staggerTo animation. Some info regarding the codepen:

  • It uses the data object to store each tween's settings.
  • There are 2 ways of running the animation: Directly and from the stored data (see above)
  • The initial animation (what I'm calling the direct animation) runs when the page loads and if you click the REPLAY button. Each time it rebuilds using some random settings so runs a little different each time.
  • When you click the PLAY FROM DATA button, I run a function that I'm using in my local app called getGsapData to snag all the data from the timeline and then pass that data to an animateFromData function to exactly replicate what was created randomly. (I have to be able to store the data in a file locally so can't just store the timeline itself. )


THE ISSUE is that when the direct animation runs, the ending staggerTo animation seems to animate each of the items out all at once. But, when you run the animation from the storedData, it seems to animate off the way it's meant to work - staggered.


I've been trying to figure out what's different between the 2 for two solid days. Can any of you guys (most of whom are much smarter than me) possibly figure out what the deal is? I can change the staggerTo params in the initial animation and it doesn't seem to change the way the animation runs on REPLAY. 


The animation data gets sent to a textarea and prints as a pretty json string for perusal. 


So sorry for the complexity of the codepen but for what I'm attempting to do, I didn't see much I could do to both replicate the issue and simplify the example.  I actually did remove quite a bit of stuff. 

See the Pen ZavKZe by swampthang (@swampthang) on CodePen

Link to comment
Share on other sites

Lots of stuff going on there. Maybe the problem is here. Try setting the stagger to a higher value than 0.01.


function setOut() {
  // staggerTo will return a timeline - need to later reconstruct the stagger - see animateFromDb()
  tl.staggerTo(quoteSplit.words, 0.4, {autoAlpha:0, scale:0, ease:"magneticOut",
    data:{tweenType: 'staggerTo', staggerTime: 0.2, staggerPosition: `+=${messageDisplayTime}`, staggerDuration: 0.3, params:{autoAlpha:0, scale:0, ease:"magneticOut"}}},
    0.01, `+=${messageDisplayTime}`);


  • Like 4
  • Haha 1
Link to comment
Share on other sites

Oh my gosh, Blake. I can't believe I missed the fact that one setting was 0.1 and the other was 0.01 - doh! That was definitely it. Good grief. Thanks for seeing that. 

  • Like 1
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.