ScrollTrigger + Snap + SmoothScroll

[iDVB 11 Likes (Newbie)]

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

[Rodrigo 5,899 Likes (Superhero)]

Hi,

 

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:
https://greensock.com/docs/v3/Plugins/ScrollTrigger

 

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!

[iDVB 11 Likes (Newbie)]

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.

 

 

 

 

[Page Tailoring 7 Likes (Newbie)]

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

 

 

 

 

[Page Tailoring 7 Likes (Newbie)]

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

[Carl 11,326 Likes (Superhero)]

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

 

https://greensock.com/docs/v3/Plugins/Observer/velocityY

 

 

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

 

 

 

 

 

[Carl 11,326 Likes (Superhero)]

Oh, and one very important thing to note about the Blobmixer site: they aren't scrolling the page. There is no scrollbar. They are using the mousewheel to control the progress of an animation.