Scolltrigger animation break after page refresh

[letwoon]

Hi there! 😊

I’ve created a ScrollTrigger animation where the text follows the scroll as you move down the page, and images on the right side stay "sticky," fading in and changing as you scroll. It works perfectly when starting from the top of the page and scrolling down.

However, I’ve noticed an issue: if I refresh the page while partway down (just above the ScrollTrigger section), sometimes the animation breaks. The images end up in weird positions instead of behaving as expected.

 

Does anyone know what might be causing this and how I can improve it? Thanks a lot! 🙏

See the Pen MYgaKWX by letwoon (@letwoon) on CodePen.

[GreenSock]

Hi @letwoon. I can't seem to replicate the problem. Just a few things to keep in mind: 

1. I noticed you're using Tailwind. Be careful. Some 3rd party libraries like that will apply CSS transitions or scroll-behavior on things that cause problems. You should never apply CSS transitions to anything that's being animated by GSAP because every time GSAP updates the value, CSS transitions says "NOPE! I won't allow that yet...I'm gonna drag out that change over time..." 
2. If you lazy-load images, that could cause problems because when the images finally load, they shift the layout around. In that case, you should be sure to fire a ScrollTrigger.refresh() to force ScrollTrigger to re-analyze all the positions of things. 

If you still need help, please be very specific about how we can replicate the problem. Thanks.

[letwoon]

Thanks for answering my question!
I don't know why the problem can't be recreate in codepen,
but in the browser, if I refresh the page while scrolled halfway down, the browser will restores the scroll position after the refresh. After that it seems like ScrollTrigger's initial calculations don’t fully account for the restored position.

now the problem seems to be resolved by adding:
window.addEventListener("load", () => { ScrollTrigger.refresh(); });

 

[Rodrigo]

Hi,

 

Codepen doesn't have the option of refreshing the iframe where the code is previewed, instead it initialized everything again, that's why. You cam always try the debug view in order to test how things would look/work on a real browser window, since the debug view doesn't have any of the iframes Codepen uses to make everything work.

 

Maybe you can try ScrollTrigger's clearScrollMemory method:

https://gsap.com/docs/v3/Plugins/ScrollTrigger/static.clearScrollMemory()

 

Also is worth noticing that when you use anything that adds scroll-behavior: smooth to the HTML tag it will result in this behaviour when refreshing the page.  The reason is that adding scroll-behavior: smooth to the HTML tag by default which interferes with the way ScrollTrigger works. That will definitely create a problem when you resize the browser window/tab, since ScrollTrigger scrolls everything to the top in order to run it's calculations again, this is completely necessary and not a problem actually, because we need everything to be at it's natural position in order to calculate the start and end points accurately. The problem with scroll-behavior: smooth is that it creates some sort of transition for the scrolling, so when ScrollTrigger sets the scroll position to 0 it takes sometime to get there and when ScrollTrigger does all the calculations again the current position of the scroll is not 0, so all the calculations are off.

[MichaelRosato]

On 12/9/2024 at 10:10 PM, Rodrigo said:

Hi,

 

Codepen doesn't have the option of refreshing the iframe where the code is previewed, instead it initialized everything again, that's why. You cam always try the debug view in order to test how things would look/work on a real browser window, since the debug view doesn't have any of the iframes Codepen uses to make everything work.

 

Maybe you can try ScrollTrigger's clearScrollMemory method:

https://gsap.com/docs/v3/Plugins/ScrollTrigger/static.clearScrollMemory()

 

Also is worth noticing that when you use anything that adds scroll-behavior: smooth to the HTML tag it will result in this behaviour when refreshing the page.  The reason is that adding scroll-behavior: smooth to the HTML tag by default which interferes with the way ScrollTrigger works. That will definitely create a problem when you resize the browser window/tab, since ScrollTrigger scrolls everything to the top in order to run it's calculations again, this is completely necessary and not a problem actually, because we need everything to be at it's natural position in order to calculate the start and end points accurately. The problem with scroll-behavior: smooth is that it creates some sort of transition for the scrolling, so when ScrollTrigger sets the scroll position to 0 it takes sometime to get there and when ScrollTrigger does all the calculations again the current position of the scroll is not 0, so all the calculations are off.

Thanks for the advice, I want to clears recorded scroll positions in ScrollTrigger. But I wasn't sure which one is the best one to do it.