paulpesel Posted August 23, 2023 Share Posted August 23, 2023 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 Link to comment Share on other sites More sharing options...
Rodrigo Posted August 23, 2023 Share Posted August 23, 2023 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! Link to comment Share on other sites More sharing options...
paulpesel Posted August 23, 2023 Author Share Posted August 23, 2023 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. Link to comment Share on other sites More sharing options...
Rodrigo Posted August 23, 2023 Share Posted August 23, 2023 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! Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now