CSS Scroll Snapping and ScrollTrigger

[Carl]

I know there are a few threads floating around about CSS scroll-snapping.

I just learned about it and I was very pleased with how well it plays with GSAP's ScrollTrigger.

 

I am going to do a tutorial on it but wanted to just share these demos as I think the folks around here will find them quite helpful.

 

Basic CSS Scroll-Snapping (no ScrollTrigger)

 

In the demo below when you stop scrolling the list item nearest to center will snap to the red-dashed line going through the middle of the page.  All the css magic is on the html and li rules in the css.

 

 

See the Pen QwLyejd?editors=0100 by snorkltv (@snorkltv) on CodePen.

 

 

CSS Scroll-Snapping while Pinning with GSAP

 

Here we pin the h1 "hello" element to the center of the page while the list scrolls by. Since the h1 is perfectly centered all the list items will appear to snap to it when you stop scrolling. The h1 un-pins when the center of the last list item reaches the center of the page.

 

See the Pen azodKoo by snorkltv (@snorkltv) on CodePen.

 

 

CSS Scroll-Snapping with ScrollTrigger and Staggered Timeline Animation

 

Let's kick it up a notch and scale up each list item when it reaches the center of the page!

Notice how we are just scrubbing through one timeline and scroll-snapping ensures we always stop on a "full-scale" list item perfectly centered next to the h1.

 

See the Pen azodrxB?editors=1010 by snorkltv (@snorkltv) on CodePen.

 

For the best experience open each demo in a new window.

 

Enjoy!

 

 

See the Pen by (@) on CodePen.

[GreenSock]

This is great, @Carl! Thanks for sharing. 

 

Love the demos, especially the names including some forums heroes from way back! 💚

[akapowl]

Oh wow, would you look at that. The names of all the well-respected helpful people on the forum, united in one demo.
I'll make sure to not mention your name either anymore, when it comes to recommending courses, Carl.😉
Good job though, really!
 

[Carl]

@akapowl doh! I knew I was forgetting someone important.  so sorry. I made you first now. 

[Cassie]

Nice demo! (especially with the @akapowl addition 😉)

 

Thanks for putting that together Carl!

[Shrug ¯\_(ツ)_/¯]

Wonderful share @Carl, as always.

 

Given that I’ve been mostly absent for quite sometime I take no offense whatsoever knowing I've never truly been in the realm of the GSAP pantheon of these timeless value honored individuals listed. Keep up the awesome effort of sharing and teaching GSAP @Carl! You're always providing such great creative resources for people seeking to learn GSAP !

 

As a celebration of this, New Users can get 0.00% OFF All of Carl’s Awesome GSAP Courses at CreativeCodingClub by using my Special Promo Code: ¯\_(ツ)_/¯ . This offer never expires, Join Today! 😉

[Carl]

@Shrug ¯\_(ツ)_/¯ you're a legend! Just another silly oversight in my haste. Thx for understanding!

 

Note to self: make a list of fruits or animals in the future.

[Rodrigo]

7 hours ago, Carl said:

Note to self: make a list of fruits or animals in the future.

Other options:

• Things you can find in your kitchen
• HTML safe colors
• Summer Olympics 100 MT gold medalists
• Any professional athlete of any discipline you can think of
• Ice cream flavors
• Car brands
• iOS bugs and how normalizeScroll solves them
• Street names

Boy... you had a lot of alternatives that would've saved you all this trouble 😂

 

PS: I forgot, wait until Jamie and Chrysto find out that you left them out as well 🤣