leks Posted April 16, 2021 Share Posted April 16, 2021 Hey all! We have used gsap in a couple of projects. It's a great library. Thank you for all of your hard work. We are trying to figure out a solution for the smoothly snapping effect. Please take a look at the attached example. Currently, on scroll, it slows down and after a while jumps to the next slide. Is there a possibility to have it more smoothly without slowing down? See the Pen wvgXRJw by leksner (@leksner) on CodePen Link to comment Share on other sites More sharing options...
Rodrigo Posted April 16, 2021 Share Posted April 16, 2021 Hi and welcome to the GreenSock forums. Unfortunately I don't have enough time to create a fully working sample, but you can use ScrollTrigger's getVelocity() method: https://greensock.com/docs/v3/Plugins/ScrollTrigger/getVelocity() With that you can calculate the scroll velocity in pixels/seconds (lets call this A), then get the amount of pixels left to snap the element to the left of the screen (lets call this B) and then divide B/A and you'll get the amount of seconds needed to keep the current speed and use an ease out function to slow that speed towards the end of the animation. There is also a chance that this could be achieved in a simpler way, since I haven't delved too much into snap in ScrollTrigger and this solution is just me overcomplicating things Happy Tweening!!! Link to comment Share on other sites More sharing options...
GreenSock Posted April 16, 2021 Share Posted April 16, 2021 If I understand your question correctly, I don't think it's feasible because of the nature of how scrolling works. It's easy for GSAP to match the velocity at any given time, but the problem is knowing WHEN to have the tween take over and continue things. It shouldn't happen while the user is actively scrolling, but how can it know when scrolling is "done"? Keep in mind that there are many ways people can scroll - drag the scrollbar, spin the mousewheel, drag on a touchpad, do it via JavaScript, etc., etc.! And on Macs, there's momentum scrolling that automatically happens too (even after the user stops scrolling). We can't just wait for the browser to dispatch a "userisdonescrolling" event or something So ScrollTrigger has to basically watch the scroll value and see when it stops for a certain amount of time and then make the assumption that the user is done...THEN it kicks in the snapping. See the issue? I might be missing something, but I can't really think of any way to unobtrusively have ScrollTrigger jump in and take over the scrolling with inertia seamlessly. If anyone has ideas, I'm all ears. 1 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