Keep the last position when i trigger the end

[paulpesel]

Hello, how to keep the last position of the .angle-scroll when I trigger the end? I tried the onLeave function, but that didn't work properly on mobile devices.

See the Pen KKbpXQZ by Paul-Pesel (@Paul-Pesel) on CodePen

[Rodrigo]

Hi,

 

I read your post a few times and checked the codepen example but is not really clear to me what you're trying to do here and what the issue is. Can you be super specific about what you're trying to do and what's the issue you're having?

 

Finally I see you are using the native matchMedia method, maybe using GSAP MatchMedia would be a better alternative:

https://greensock.com/docs/v3/GSAP/gsap.matchMedia()

 

Happy Tweening!

[paulpesel]

Hi, I will try to be more specific 😄. When I scroll and get to the end marker the .angle-scroll switches from fixed position back to relative. This is done by toggling the active class. I need to keep the .angle-scroll on the bottom even when the position is relative.. now it is jumping back up.

 

Maybe there is a more elegant way to do it and get the same expected result.

 

 

[Rodrigo]

Hi,

 

The issue here is that you're expecting that toggle class to work in a different way. Basically what ScrollTrigger does is to add that particular class to the target you're passing when the scroll passes the start trigger and removes it when the scroll passes the end point. From the ScrollTrigger docs:

onToggle    Function - A callback for when the ScrollTrigger toggles from inactive to active or the other way around. This is typically when the scroll position moves past the "start" or "end" in either direction, but if it shoots past BOTH on the same tick, like if the user scrolls extremely fast, onToggle won't fire because the state hasn't changed. You can often use this one callback in the place of onEnter, onLeave, onEnterBack, and onLeaveBack by just checking the isActive property for toggling things. It receives one parameter - the ScrollTrigger instance itself which has properties/methods like progress, direction, isActive, and getVelocity().

 

That's basically when ScrollTrigger will fire, soto speak, toggleClass, that is add/remove the particular class to the indicated target.

 

What you need to do is find a more consistent end point to prevent this, nothing more. Unfortunately we don't have the time resources to comb trough complex examples/codebases (your demo has more than 200 lines of HTML and almost 400 lines of CSS) and find issues for our users. If you want you can hire us on a consulting basis or post in the Jobs & Freelance forums in order to get help there.

 

Good luck with your project!

Happy Tweening!