ScrollTrigger Animations Jump When Scrolling Back Up After Page Loads Below Pin

[onedesign]

I have some ScrollTriggers added to a few elements in a pinned ScrollTrigger, and when the page is loaded from the top, the behavior is exactly how I want it, even when scrolling back up through the pinned section—the animations just play in reverse of how they played when scrolling forward, but if you load the page below the pinned section, in the normal context of the site, if a person was given an anchor link below the pinned section, or refreshed the page after scrolling past the pinned section, and *then* you scroll back up through the pinned section, the animations still trigger at the right place, but they sort of skip the tween and just jump to the start/end value. In the codepen demo, you can set the `loadAtBottom` var at the top of the js panel to `true` to try to simulate this. I know that's not a perfect simulation, but the result is the same as I'm experiencing on the actual site. 

 

I'm afraid that the issue isn't an issue at all—that this is how it should be happening, but I'm misunderstanding something fundamental about how scrolltriggers work, but any insight or guidance would be greatly appreciated!

See the Pen 630fe7fcd00fc2a64527a6ce5c369050 by itsmattsoria-odc (@itsmattsoria-odc) on CodePen

[Rodrigo]

Hi,

 

I think you are over-engineering this waaay too much IMHO, which ultimately is causing the issue you're currently having.

 

Here is a simpler approach using a single timeline:

See the Pen oNJMgYp by GreenSock (@GreenSock) on CodePen

 

The CSS is not the same, but the idea is to give you an alternative that doesn't cause the same behaviour your example does.

 

Hopefully this helps.

Happy Tweening!

[Rodrigo]

I forgot, this is the debug URL so you can check the result without any iframes and see how it works after a reload:

https://cdpn.io/pen/debug/oNJMgYp

 

Happy Tweening!

[onedesign]

Wow, yeah, I apparently was way over-engineering this. This looks way cleaner and more efficient. I'll give this a try. Thank you for your help!