Leaderboard

https://gsap.com/docs/v3/Plugins/ScrollTrigger/ It's because one of those is a tween on a ScrollTrigger with scrub: 1 - so it will take 1 second to catch up to the scroll position - and the other one is natively scrolling. So there will always be a discrepancy between the two - which will only become more apparent the faster you scroll. If you want both to behave the 'exact same', set scrub: true instead of scrub: 1 to your airpods ScrollTrigger. You'll lose the smoothness of the scrub then, of course. Or instead tween the 'over-scrolling' of the video via a ScrollTrigger that also has a numeric scrub of 1 set. But then, one way or another, you'll get a discrepancy again between that video container and the subsequent containers which would scroll natively. At this point you might end up in a 'tween everything' approach like Mitchel (@mvaneijgen) suggested in his earlier answer with the thread he linked to. An alternative to that approach could be to use overall smooth-scrolling instead, e.g. via ScrollSmoother alongside scrub: true on the airpods ScrollTrigger. Technically it's also a 'tween everything' approach - just on another level. And you'll lose some native browser features like e.g. jump-to search via F3. Is it worth the extra mile? Depends on how much you're a sucker for detail and how much the - most of the time visually small - asynchrony bothers you. Is any one better than the other? Depends on you again. Each of them has its downsides, if you ask me. Personally I'd go with the overall smooth-srolling - but that is merely a suggestion, not a recommendation by any means. It will definitely add another level of complexity with some regards. The latter - here it was just to keep track of what marker is related to which ScrollTrigger. But it can also be a helpful tool if at any point in time you might need to target any specific ScrollTrigger on your page for whatever reason logic-releated.

Personally I always like to start with a timeline. Right now you have a single gsap.fromTo() tween, but I've found that staring with a timeline allows you to be much more creative and do more than just a singel animation. This also allows you to easily toggle ScrollTrigger on and off. It is a balance of course you want it to happen on scroll, but if there is a bug in your animation no amount of ScrollTrigger code is going to fix that animation, so I'm constantly switching to turning ScrollTrigger on and of. I also heavily rely on codepen to try out new ideas, I usually then just keep forking my pen to try out different ideas, either because I think it could be better or my original idea was not working. Usually at version 10 I got something I'm happy with. Creating forks of your pen will allow you to fall back at earlier ideas if something new is not working. And when you get stuck you can easily share your work. Also check out this awesome getting started guide https://gsap.com/resources/get-started/ The GSAP YouTube channel is also a great resource certainly the video blow https://www.youtube.com/c/GreenSockLearning/videos or our own @Carl is such a help sharing general concepts https://www.youtube.com/user/snorklTV/videos. Hope it helps and happy tweening!

run into similar issue using the app directory in NextJS 13. I'm using ScrollTrigger and ScrollSmoother plugin and managed to fix it by moving the gsap.registerPlugin(ScrollTrigger, ScrollSmoother) inside of useEffect/ useIsomorphicLayoutEffect hook. hope this helps

Welcome to the forums @hello-there I'm not familiar with routing and lifecycles in Angular, but when you leave a page, you should kill all your ScrollTriggers. ScrollTrigger.getAll().forEach(t => t.kill())