Jump to content
GreenSock

Teebo

Creating smooth Pair with CSS Scroll Snapping - ScrollTrigger

Go to solution Solved by akapowl,

Recommended Posts

 

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

Link to comment
Share on other sites

  • Solution

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

 

  • Like 2
Link to comment
Share on other sites

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.

  • 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.
×