Jump to content
Search Community

Horizontal scroll smoothly snapping effect

leks test
Moderator Tag

Recommended Posts

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

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

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. 

  • Like 1
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...