wavy carousel with CSS scroll driven animations not exactly... like OP but fun to try replicateshow more

Scroll-Triggered Animations … with nothing but CSS … oh... yeah 🤩 (Blogpost coming soon)show more

I put together some Tailwind CSS utilities for masking/fading... edges of scroll containers using scroll-driven animations. Link below ↓show more

💡 CSS Tip! Create a Sticky Header that "sticks"!... A fancy effect powered by Scroll-Driven Animations and shape().show more

Scroll driven animation with CSS animation-timeline: view(); animation-range: entry, exit;

you can create a CSS only carousel with CSS... `𝚜𝚌𝚛𝚘𝚕𝚕-𝚜𝚗𝚊𝚙` .𝚜𝚌𝚛𝚘𝚕𝚕𝚎𝚛 { 𝚘𝚟𝚎𝚛𝚏𝚕𝚘𝚠-𝚡: 𝚊𝚞𝚝𝚘; 𝚜𝚌𝚛𝚘𝚕𝚕-𝚜𝚗𝚊𝚙-𝚝𝚢𝚙𝚎: 𝚡 𝚖𝚊𝚗𝚍𝚊𝚝𝚘𝚛𝚢; 𝚜𝚌𝚛𝚘𝚕𝚕-𝚙𝚊𝚍𝚍𝚒𝚗𝚐-𝚒𝚗𝚕𝚒𝚗𝚎: 𝟷.𝟻𝚛𝚎𝚖; /* 𝚖𝚊𝚝𝚌𝚑𝚎𝚜 𝚢𝚘𝚞𝚛 𝚜𝚌𝚛𝚘𝚕𝚕-𝚙𝚕/𝚙𝚛 */ } .𝚌𝚊𝚛𝚍 { 𝚜𝚌𝚛𝚘𝚕𝚕-𝚜𝚗𝚊𝚙-𝚊𝚕𝚒𝚐𝚗: 𝚌𝚎𝚗𝚝𝚎𝚛; 𝚏𝚕𝚎𝚡-𝚜𝚑𝚛𝚒𝚗𝚔: 𝟶; } When you scroll, it snaps exactly in the center of the card Super fun to use, easy to implement, no javascript requiredshow more

Tailwind CSS Tip ✨ You can create a pure... css carousel in Tailwind CSS using scroll snap. Live demo ↓ (21/30) follow for 9 more tips 🔔show more

100% css 0% javascript Pretty cool that you can... run animations like this now off the main thread, was always a worry implementing a scroll animation knowing some users might see "jank" Safari and Firefox are sleeping far too long, scroll driven animations are awesomeshow more

Future CSS Tip! 🔮 Create that cool gallery effect... with the scroll-driven animations API 😎 ul, img { animation-timeline: scroll(root); 👈 animation: spin; } ul { --r: 270deg; } img { --r: -270deg; } keyframes spin { to { rotate: var(--r); }} CodePen.IO link below! 👇show more

📝 Solved by CSS Scroll-Driven Animations: hide a header... when scrolling down, show it again when scrolling up By adding a long transition-delay to a CSS property under certain conditions (with a Style Query), you can persist its value Demo by Fabrizio Calderanshow more

a pixelating logo carousel made with css

More CSS off the main thread! I just implemented... parallel scroll-driven animations, so they can update even while the main thread is busy! 🤓 Left: Ladybird Right: Chrome (but every other browser looks the same)show more

💡 CSS Tip! Get the scroll progress of the... page as a CSS variable using a few lines of code ✅ Powered by Scroll driven animations ✅ Defined at the root level ✅ Typed using @​property ✅ You can easily use it within any formula CodePen.IO demo in the reply 👇show more

circular carousel v6————added proper css mapping based on angle... (here blur + opacity) + experiments with css 3d transformsshow more

What if I will tell you how we could... solve fit-to-width text with pure CSS without any hardcoded parameters? Curiously, scroll-driven animations will allow us to do just that! I wrote a new article where I continue exploring the experimental implementations of the latest specs.show more

You can enable scroll snapping with CSS scroll-snap-type and... scroll-snap-align 🚀show more

Who said range sliders need to be straight and... boring?! Hey CSS, distort the line! 〰️ Another funny demo powered by border-shape, scroll-driven animations, and more The HTML code? Only an input element (no extra code is needed)show more

Built a React Aria Calendar with swipe gestures to... navigate between months! Uses CSS scroll snap for native 120fps animations, with a neat trick to enable infinite scrolling in both directions. 👇show more

Every site has a story to scroll 📖 With... the new Scroll-Triggered Animations, you can transform your site into an immersive narrative that keeps your users engaged. Create beautiful time-based animations with zero JS, all natively in CSS. Break free from static UI and create your story in minutes. #GoogleIOshow more

emoji picker sphere 🌐 two-axis css scroll-driven animation spins... a 3D globe where "most used" sit along the equator ↓show more

Are those … CSS Scroll-Driven Animations on in Safari?... Yes they are! What made this possible is a polyfill our team has been working on: Load up the polyfill JS file and … that’s it - there is no other step.show more