Hi!
I've created some animations using ScrollTrigger and ScrollTrigger.matchMedia, everything working as expected, but recently I noticed some issues.
Sometimes after page refresh, all ScrollTrigger animations have wrong start position and overlap each other. I tried to find out the reason, and it is only one way to reproduce it - after page refresh, you should right away start scrolling to the end of page, and then you could see it.
I also have a section that uses dynamic data, after fetching everything I refresh - ScrollTrigger.refresh().
I created codepen to reproduce it. Issues:
1) scroll down with normal speed and see that animation working fine. Click the refresh button -> ScrollTrigger start position changes to the wrong one.
2) refresh codepen -> in the very first moment after refresh, scroll to the end of page, then you could see the wrong ScrollTrigger start position. Click refresh button -> no difference.
scrollTrigger: wrong start position
in GSAP
Posted
Hi!
I've created some animations using ScrollTrigger and ScrollTrigger.matchMedia, everything working as expected, but recently I noticed some issues.
Sometimes after page refresh, all ScrollTrigger animations have wrong start position and overlap each other. I tried to find out the reason, and it is only one way to reproduce it - after page refresh, you should right away start scrolling to the end of page, and then you could see it.
I also have a section that uses dynamic data, after fetching everything I refresh - ScrollTrigger.refresh().
I created codepen to reproduce it. Issues:
1) scroll down with normal speed and see that animation working fine. Click the refresh button -> ScrollTrigger start position changes to the wrong one.
2) refresh codepen -> in the very first moment after refresh, scroll to the end of page, then you could see the wrong ScrollTrigger start position. Click refresh button -> no difference.
Thanks in advance!
See the Pen LYeQYXj by oljapolja (@oljapolja) on CodePen