Scrolling before animations are done interferes with scrolltrigger
I realize that the image starts very big - I apologize but please ignore this, it is not a bug on my actual site.
I have a timeline that animates the elements initially coming into frame. If the user navigates to the page and does not scroll, everything works perfectly. The issue comes if a user scrolls before the animation is done.
To replicate this issue:
- refresh page
- scroll down before timeline is done playing
- scroll back up
You will no
That's because you've got a CSS transition applied to those elements which is a VERY bad idea You should never apply CSS transitions to elements that you're animating with GSAP because when GSAP applies a change, the CSS transition will interrupt that and say "NOPE! I won't allow that to happen yet...I'm gonna drag that change out over the course of my duration..."
So just remove the CSS transitions and you should be fine.
