Scrolltrigger state stay the same after page refresh

[McSteer]

Hello!
I've ran into some problems with a scrolltrigger animation.

If I scroll below the div containing the animation, and refresh the page it starts from the second slide, after i scroll up it keeps resetting itself to the first slide.

Possible solution I thought about, is scrolling the page to the top after a refresh, but the bug still persists after that, so i thought about refreshing the whole animation to it's base state.

Other solution i though about is always loading the page from the server, by having each refresh also delete cache, but i don't think this would be a great idea. 

Any help or pointers are appreciated!

I also linked a codepen with the code I use (I know it's kind of a basic way to do this, but the dynamic way that i got from greensock, wouldn't play nice with other content on the site) The error doesn't recreate in codepen though. So i made an html file in which the bug is recreatable.

demo.html

See the Pen podRVrO by GreenSock (@GreenSock) on CodePen

[McSteer]

Since then i realised, i can easily make the other code work (

See the Pen bGYqNmv by thesbeve (@thesbeve) on CodePen

), but the question would still be, if there's a way to refresh animation positions on page refresh, since i've been trying to make that work, thank you!

[GreenSock]

It's not a GSAP/ScrollTrigger issue - it's just a logic thing in the way you've set things up. You could simply add this to your ScrollTrigger(s):

onRefresh: self => self.progress && self.animation.progress(1),

Basically, if the scroll position is anywhere past the ScrollTrigger's start, force the animation to its end.

 

Does that help? 

[McSteer]

Yes, now i see what was the issue, I just haven't even considered that there's a way, to keep track of the progress. Thank you!

[Kostiantyn]

I found this solution. It's work for me https://gsap.com/docs/v3/Plugins/ScrollTrigger/static.clearScrollMemory()