ScrollTrigger - not reversing tween on reload

[josh-warner]

Hi team,

 

I have an animation which tweens in from the top of the screen on scroll using ScrollTrigger. The issue I have found is if I scroll part way down the page, and refresh the screen, the page loads after the trigger and so the animation is already in its completed state (which it should be) but when I scroll back up to the top of the page past the trigger it doesn't reverse the animation and the element is stuck in its completed state rather than be reverted to where it started from.

 

Couldn't replicate the issue on codepen since you can't refresh the page part way down but this is how I have setup the animation: 

See the Pen JjGOJZo by josh-kiwi (@josh-kiwi) on CodePen

 

If you were to reload the page half way down, the pink box would be visible, but after scrolling to the top it would not hide itself.

 

Thanks!

See the Pen by (@) on CodePen

[GreenSock]

Hm, I just tried it locally and followed your directions and it worked perfectly. I can't seem to replicate the issue. Any tips? What version of ScrollTrigger are you using? Please make sure you're using at least 3.3.4. You can preview the upcoming 3.4.0 release here too: https://assets.codepen.io/16327/ScrollTrigger.min.js

[josh-warner]

Hey Jack, thanks for the quick reply. Okay that helped me look elsewhere, I have just worked out it was an issue within React not ScrollTrigger. 

 

I was using React hooks and needed to update the hook to not run on every render rather only on mount.

 

Thanks again