fbe28

Hey there Rodrigo! Amazing, I really appreciate that, super stoked to see how we could achieve this! And, yes, the other solution and explanation definitely helped me a lot in the meantime! Especially with understanding why the issue was happening and what would be a more fool proof way of doing it. Thank you very much! Fernando : )

Hey there, Rodrigo! How are you? No worries, thank you so much once again for the response : ) It's been quite busy over here as well, sorry for the delay. On my current client project, I ended up implementing your suggested solution and it now seems to be working reliably so thank you for that! I do still wonder, though, if there would be a way to control the way back from an animation like this independently (like another timeline, although now I know doing it with a timeline per se won't work properly). In my opinion, this is the type of subtlety that can make something feel that much nicer and it's really something I would like to be able to achieve. Especially with other "toggle" type use cases like an open/close animation for a menu, etc, where you may want elements to have a different choreography depending on what state you are animating to. Sorry to insist on this, but do you have any other ideas of how I could achieve that individual control without using the normal reverse method? Thanks again so so much! Fernando

Hey there, Rodrigo! How are you today? Thank you so much for the thorough response, I really appreciate it! : ) Everything you said makes sense, and I was in fact suspicious of this being an issue with the timelines "fighting" for control over the same elements/properties. The only issue is that, as I had explained in my main thread, I need to have a slightly different timeline for the way back (i.e.: it's not the exact reverse of the other one) as per my design spec, so simply reversing it wouldn't work. Is there maybe another way I could achieve that? Thank you so much once again! Fernando

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 CORRECT BEHAVIOR (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): PROBLEMATIC BEHAVIOR (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 Thanks!! ?? Fernando : )