Hey there everyone! Hope you're doing great today : )
== THANKS GSAP!! ==
This is my first time posting here on the Forum. I'm a pretty new GSAP user and I wanna start by saying I absolutely love this tool!
Thank you so much to all the creators and the team that maintains and continues building this, it's just a truly awesome resource!
== DESCRIBING THE ISSUE ==
Now on to the issue I'm facing..
I have this nav animation that reduces/expands the nav depending on your scroll position. The idea is that the nav is always in its expanded state when the scroll position is at the very top, and always in its reduced state whenever you're anywhere else (i.e.: at any point further down the page).
Because my reduce animation is different than my expand (i.e.: one is not an exact "reverse" of the other), I can't just have one animation and reverse it based on the scroll position, hence why I have two timelines.
Everything works 90% of the time, but if you scroll to the top and back down (or the other way around) really fast, you get a weird "in between" state that is incorrect, and I really can't figure out why or how to correct it.
Here are a few quick screen grabs showing the issue and how to reproduce it
(currently happening if you scroll slowly, wait for the animation to play, then scroll the other way and wait for the other animation to play):
(currently happening if you scroll both directions [down up down, up down up, etc] pretty quickly, or if you load the page in a scroll position other than the very top - i.e.: you scroll down and then reload, etc):
After a ton of testing with different combinations of toggleActions, trying to have different scrollTriggers (one for each timeline), trying it with just one, etc, I was finally able to get it somewhat working with an "onEnterBack" callback, but still can't figure out why I'm getting this weird "in between" state shown in the video above.
What you see in the video and in codepen is the simplest version of the current site I could manage to recreate, removing all unnecessary code etc, hopefully it's easy enough to understand. I also went ahead and made the scrollTrigger trigger element visible (it's the small blue square in the upper left corner) in hopes of making it easier to see what's happening.
Any comments, suggestions, ideas, etc are truly appreciated!
If you made it this far, thank you very much for taking the time and I hope you can shed some light on this hehe
Fernando : )