Different ScrollTrigger end value depending on scroll direction

[she codes]

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.

 

See the Pen JjKeqRE by she_codes_ (@she_codes_) on CodePen

[ZachSaucier]

Hey she codes. No, there's not a way to change the end value depending on the direction. But most likely there is a better way to set things up to get what you need. Can you please create a minimal demo of the situation so we can see what's happening and what you need help with?

 

[she codes]

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.

 

[mikel]

Hey @she codes,

 

It is not clear to me what exactly you want to achieve, what your problem is.

Please try to formulate your request again.

 

Maybe this example will help you a little

 

See the Pen cd75b815a0298372fe786f66e6b1e7db?editors=0010 by mikeK (@mikeK) on CodePen

 

Happy scrolling ...

Mikel

[ZachSaucier]

I also don't really understand your goal. Maybe you're wanting to use two ScrollTriggers? https://greensock.com/st-mistakes/#reset-with-offset

[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.

[ZachSaucier]

4 hours ago, she codes said:

I was just wondering if ScrollTrigger end value could be modified on the go (on events) and which approach was better.

You could use a functional value and tell ScrollTrigger to refresh, so yes the end value can be modified. But from what it sounds like two ScrollTriggers would be easier.