Hello everyone,
I'm currently encountering an issue in my project where I use GSAP to animate two sections. One of these sections is pinned, and the other one is observed by ScrollTrigger to initiate the animation.
In the structure of my JS code (shared on CodePen), you'll notice that the pinned element utilizes matchMedia. The second element, meanwhile, is a new instance of ScrollTrigger. The code has been simplified to its bare minimum for clarity's sake. I've retained only the structure of the code as in the project and removed the actual animations.
The problem I'm facing is that when we reduce the window size, the triggers of the second animation appear to be moving to different places as if they're calculating the pinned element's space incorrectly. The issue is even more pronounced in my private project, where duplicate triggers appear after resizing, also in various places.
Do you have any advice or potential solutions? I would appreciate any assistance.
I'm also attaching a video link in case you don't encounter this issue: https://www.loom.com/share/211ed4038853479b87c287ff6b6d06d3
Best regards.