Teebo Posted June 28, 2021 Share Posted June 28, 2021 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 More sharing options...
Solution akapowl Posted June 28, 2021 Solution Share Posted June 28, 2021 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 2 Link to comment Share on other sites More sharing options...
Teebo Posted June 28, 2021 Author Share Posted June 28, 2021 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. 2 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now