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

Scroll-triggered animations are coming to Chrome early next year... (and we've been really excited about this one for a bit!) 🥳 Unlike scroll-driven animations (already in Chrome & Safari), this API introduces "timeline-trigger" and "animation-trigger" to start an animation within a specific range, rather than relying on the scroller completion *as* the animation timeline. I got nerd-sniped and wanted to try it out so I built this shape morphing demo to show how you can apply multiple animations to the same element over with different triggers. PRETTY COOL IMO! Bramus has a post with more info ⬇️show more

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

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

wavy carousel with CSS scroll driven animations not exactly... like OP but fun to try replicateshow 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

Browsers should do CSS layout off the main thread!... 🤓 Top left: Ladybird (work in progress) Others: Chrome, Safari, Firefoxshow 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

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

kinda wild how far you can get with CSS... alone a scroll animation tied to the content scroll powers the percentage update + icon animation interpolate-size provides a way to transition the popover between button size and content size using starting-style 🤙show more

Vibe-Coded some animations for upcoming videos. Directly in Claude... that created the animation in JavaScript on an HTML website. They look pretty decent IMHO and might finally replace my PowerPoint animations in the videos😅show more

After my previous articles, I wondered: how many other... items from various CSS wishlists could I solve with scroll-driven animations? Styling rows and columns, staggered animations, wrap detection, and more — in my new article — “Position-Driven Styles”.show more

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

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

Chrome 146 is stable 🚀 We’re shipping features that... move more logic out of your JavaScript and into the browser → ✨ Scroll-triggered animations (declarative CSS!) 🛡️ The Sanitizer API for XSS-free apps 🧩 Scoped custom element registriesshow more

That SVG filter is the whole reason this CSS... scroll animation is even possible 🙏 (now with improved timing ✨)show more

React Native on desktop, powered by Rust + GPUI... 🦀⚡️ Reanimated + Worklets are alive: springs, orbiting particles, and scroll-driven motion—all running on the UI thread, even while JavaScript is busy. A sneak peek at react-native-gpui 👀show more

JavaScript killed another JavaScript library. 😁 `Intl.Segmenter` has been... in Baseline since April 2024 (Chrome 87, Firefox 125, Safari 14.1) and will be widely available on 16 Oct. Before this, "👍🏽".length was 4, and counting what users actually see meant shipping grapheme-splitter. Now ⤵️ the browser does it.show more

¡Increíble poder hacer esto con sólo CSS! Fija el... header y anímalo al hacer scroll. 0 JavaScript y sólo 15 líneas de CSS:show more

if you build animated interfaces for the web, this... is essential reading a clear, practical look at the main thread and the real cost of animation in javascript and css the difference isn't just measurable, it's something you feel ↓ 🔗show more

¡Animaciones al hacer scroll con puro CSS! 0 JavaScript.... Sin dependencias ni hacks. Ya disponible en todos los navegadores modernos. Se llama animation-range y funciona así:show more