Creating smooth Pair with CSS Scroll Snapping - ScrollTrigger

[Teebo]

 

Hi all, I am asking for guidance, I am new to using the ScrollTrigger plugin.

I am following the tutorial here: https://greensock.com/docs/v3/Plugins/ScrollTrigger/

 

I would like to create the Pair with CSS Scroll Snapping - ScrollTrigger animation like how it is on the video introduction.

What I would like to achieve is making the snapping smooth.

Any suggestions or examples will be much appreciated

 

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

[akapowl]

Hey @Teebo

 

33 minutes ago, Teebo said:

I would like to create the Pair with CSS Scroll Snapping - ScrollTrigger animation like how it is on the video introduction.

 

I did not have the time to watch through that whole video - does it contain an example with CSS scroll snapping and ScrollTrigger?

 

I can see that it definitely contains a section on how to use ScrollTrigger's snapping - which is what you might want to use here, as I don't think that CSS scroll-snapping allows you for customizing on how 'smooth' to snap - as in when to start the snapping and for how long to animate it.

 

https://stackoverflow.com/questions/56362168/how-long-is-the-delay-for-css-scroll-snap

 

 

 

With ScrollTrigger's snapping however, you can definitely adjust how smooth it should be.

 

Here's one possibility of how you could do it with that demo posted.

Look for 'snap' under 'Usage & special properties' in the ScrollTrigger docs for more information.

 

See the Pen 5bbc8a970b867ded2a331a6ecf088821 by akapowl (@akapowl) on CodePen

 

[Teebo]

Hey @akapowl

 

Thanks a lot for the suggested.

BTW the demo of this on the video plays at 00:58.

Let me do some reading and try it out. Thanks, I really appreciate the assistance.