Issues with reinitializing scrolltrigger

[cbravo]

I am having a problem with re-initializing animations.  In the codepen you can see that I have a red box that follows some curvy path down toward a target headline.  Once the red box hits the target headline  it animates upwards along with the headline to appear sticky. During this sticky phase if you remove the animations and then re-add the animations the redbox is no longer in the right spot until you scroll once. Is there something I am doing wrong? Why is the red box not appearing alongside the headline after re-initializing?  If any more details or clarifications are needed I am happy to provide! 
 

See the Pen BajeGqg by bravoclicks (@bravoclicks) on CodePen

[GreenSock]

The short answer: add this to the end of your setupAnimation() function: 

gsap.delayedCall(0.01, ScrollTrigger.refresh);

 

The longer explanation:

This is a tricky edge case that's caused by the fact that when you attach a ScrollTrigger to a timeline, it cannot set its start/end points (refresh()) when you create it because it's EMPTY at that time, thus if it tried to set its progress() it couldn't be accurate because the duration is 0. In other words, the timeline is EMPTY initially, and it only gets its duration after you're done populating it. Therefore, ScrollTrigger waits for 1 tick to elapse before doing the refresh() on that one. 

 

In your case, you've got ANOTHER tween that's ALSO affecting the "y" of that element further down. It's just a regular tween, so it can calculate its start/end immediately and render at the proper position. It does so. But one tick later, that timeline does its refresh() and renders where it's supposed to render (in this case in its final position)...which puts the "y" of that where it'd be at the end of the timeline. See the issue? The other tween has already done its render by that time. 

 

So the purpose of the 0.01-second delayed call to ScrollTrigger.refresh() just ensures that it's done after the timeline does its refresh()/render and it forces things to render correctly. 

 

I hope that helps clear things up. Sorry about any confusion there.

[cbravo]

Thank you so much @GreenSock for the detailed reply!  This has me thinking...Is there a way that I could change how I setup the animations to side step this issue? Maybe if I create the scroll trigger separately and attach it to the timeline that already has animations?   

Also to give you more context this whole issue is a problem for me because during window resize I am destroying and resetting up the animations to make sure they are responsive. 

Thanks again 
C

[GreenSock]

5 hours ago, cbravo said:

This has me thinking...Is there a way that I could change how I setup the animations to side step this issue? Maybe if I create the scroll trigger separately and attach it to the timeline that already has animations?   

Did the solution I provide not side-step the issue adequately? 

 

It wouldn't really help to create the ScrollTrigger separately, no. In the next release of ScrollTrigger, I have some code that'll work around this issue and let you just call ScrollTrigger.refresh() after you're done populating your timeline. 

 

5 hours ago, cbravo said:

during window resize I am destroying and resetting up the animations to make sure they are responsive. 

Do you need to do it on every resize event? Or do you just have certain break points where it really matters? If that's the case, I'd definitely recommend looking at ScrollTrigger.matchMedia().