Jump to content
Search Community

ScrollTrigger + Snap + SmoothScroll

iDVB test
Moderator Tag

Recommended Posts

Looking for a way to replicate exactly the same velocity + snapping that is on this blobmixer site.

I've waded through a number of forum examples for snapping but most of them "feel" like there is quite a bit of delay and then a whole new momentum to move to the next snap. Where as this blobmixer site seems to feel more natural. Maybe its taking into account more the original velocity and trying its best to decelerate to the next snap. It will even pull it back if the user slightly overscrolls the nearest snap point. 


The attached codepen is just a sample of the type of velocity scrolling we're doing, now we're just looking to implement buttery-smooth snapping like in that blobmixer site.

See the Pen eYpGLYL by GreenSock (@GreenSock) on CodePen

Link to comment
Share on other sites



The ScrollTrigger Docs have a long section about the snap configuration options. Scroll to Usage & special properties, the properties are ordered alphabetically, so just scroll down to the S:


Here are a couple of examples of Horizontal Snapping:

See the Pen YzygYvM by GreenSock (@GreenSock) on CodePen


See the Pen GRjwPgx by GreenSock (@GreenSock) on CodePen


Hopefully this is enough to get you started.

Happy Tweening!

Link to comment
Share on other sites

Thanks. We’ve definitely got a number of examples already. We’ve read the docs fully and understand the options. I think all of the examples, and our understanding of the options all seem to not quite match the inertia of that blobmixer. If you try it out, you likely will see what I’m talking about. Just interested if there is someone that would be able to guess at the settings needed to get that same inertia that is:

A) very subtle 

b) very natural inertia when it’s moving forward or back to the next snap point.


All examples are VERY obvious inertia tapers off… comes to complete stop then all of a sudden, starts moving again to move it forward or backward to snap point. The blobmixer site does not have this.





Link to comment
Share on other sites

Hi, I think i looking of solution of this problem some time now. I was Just thinking to post it. 


There is good and simple pattern to have ScrollTrigger with continuous snapping. If you mix it with your code it should work

But I don't think is way to mix it with SmoothScroll to use LAG EFFECT. ?‍♂️

What I looking to use it with text :)


Pattern for ScrollTrigger with continuous snapping:


See the Pen abRrQgq?editors=1010 by bartek-stawiarski (@bartek-stawiarski) on CodePen





Link to comment
Share on other sites

Hi @iDVB


I don't have the time to try to figure it out, but I think it would be worth looking at the Inertia Plugin 


Investigate both demos with snapping enabled (not live snap)


You'll see the elements you throw or flick will very naturally end at the proper snap location.


A core feature of the Inertia plugin is to apply a velocity to something and over time it will naturally slow down.


Inertia Plugin has features to track the currently velocity of things and allow you to create a new tween with that velocity passed in as the starting velocity. Also, if you fail to throw something hard enough it will naturally glide back to it's starting state.


I think the key to what you want to do is to track the velocity of your scrolling and apply that to the progress() of an animation.

The Observer plugin has functionality to track wheelspeed velocity. I'm guessing you could use that in conjunction with the Inertia Plugin





I think the tools are available here to accomplish your goals, but it will take some tinkering and perhaps a very different approach.






  • Like 2
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...