30 #CSS scroll driven animation examples which is your favorite? - z-stack and slither are mine nerdy.dev/scroll-drive...

I'll continue to add more examples! but these 30 are pretty fun already and wanted to share it out

These are awesome. I like z-stack and wheel.

great examples ???? I like z-stack too… reminds me of the Star Wars opening crawl ????

Thanks for sharing. These animations are incredible! I especially like synchronized-swimmers and z-stack.

Swoop up and scale up

????

Exactly! The wheel is my favourite!

These are so good! Would scroll snap prevent some of the tweener states?

depends on how you coded it, i mean you could make the tweener states the snap point so when you pause the rodeo is mid mctwist. but i guess yeah, snap points usually are used to prevent resting points from being misaligned with the page grid.

📌

These are very cool! Oddly enough, even with the Scroll-driven Animations feature flag turned on in Safari on iOS, they aren’t working on my iPhone. Super slick on my desktop, though.

Holy shit. Since when is css aware of scrolling?! Do you mean I can finally add a drop shadow if there is content to be scrolled?

Yep! Scroll affordances like shadows can be done with either scroll driven animations or scroll-state() container queries!

????

????

these are all fun - and an excellent collection :raised-hands: ... I do wonder about this approach in general, seems to me that is does reduce the 'fully-visible' area of effected items, no? not that this is insurmountable, if considered, but it does make me a little itchy ????