onedesign Posted September 29, 2023 Share Posted September 29, 2023 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 Link to comment Share on other sites More sharing options...
Rodrigo Posted September 29, 2023 Share Posted September 29, 2023 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! 1 Link to comment Share on other sites More sharing options...
Rodrigo Posted September 29, 2023 Share Posted September 29, 2023 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! Link to comment Share on other sites More sharing options...
Solution onedesign Posted September 30, 2023 Author Solution Share Posted September 30, 2023 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! 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now