she codes

Basically, I needed the onLeave action and onEnterBack action to happen at different trigger positions. Two ScrollTriggers will definitely do that. I was just wondering if ScrollTrigger end value could be modified on the go (on events) and which approach was better. Thank you both.

Yes, thank you - I have now created a simple demo in Codepen and added it to the main question post (it's not my original timeline, but it illustrates the point). When entering the viewport the content fades/slides in, and when leaving - it fades/slides out. This needs to happen in both directions. I have turned markers on, to illustrate how the menu is obscuring the end point on scrolling back. And one needs to scroll really fast in order to see the animation. I understand different end point for each direction is not possible... Is there a way then to maybe update the end value onLeave, so there is a already a new value when I start scrolling down? Any thoughts greatly appreciated.

Hi there, I have a ScrollTrigger timeline with several steps, which is working as expected. I also have a fixed navigation menu that translates out of view when you scroll down, so the current end value of the timeline works great for the onLeave event. But when I scroll back up, the menu translates back into view and covers the beginning of the onEnterBack event. Is there a way to have different end value for this ScrollTrigger timeline depending on the direction of the scroll? I would really appreciate any help or thoughts here.

Hi Zach, Thanks for the reply. I stripped out everything and was finally able to pinpoint the issue to a gsap default setting of `overwrite: true`. The docs say: If true, all tweens of the same targets will be killed immediately regardless of what properties they affect. If "auto", when the tween renders for the first time it hunt down any conflicts in active animations (animating the same properties of the same targets) and kill only those parts of the other tweens. Non-conflicting parts remain intact. If false, no overwriting strategies will be employed. Default: false. Not really sure I understand how this applies to my case, but anyway, I'm glad I finally figured this out. Thank you for the suggestion.

Hi there. I created a timeline and I am facing a weird issue - the timeline directly skips to last step. Whichever step I move to last position, it will only animate/perform that last step. My Codepen reference works perfectly and does not show the issue I am facing. However, I wasted so many hours on this, so I decided to share and ask for help/ideas. Does anyone have any idea what would make a timeline jump directly to last step? Or is there something wrong with the way I built the timeline? You need to click on the dot to see the animation.