Experimental #CSS carousel ✅ subgrid ✅ scroll driven animations (SDA) ✅ oklch() ✅ property ✅ Layer *Lots of code comments* to help break down the effects 🤓 ✅ SDA changes hue/theme ✅ SDA toggles next/prev ✅ SDA syncs dots

art by @pablostanley and their new rad Transhumans pack

look at all the JS running things! 😏 jk, there are 2 lines of JS required in this carousel: the next and previous buttons `window.scrollBy(-100, 0)` and `window.scrollBy(100, 0)` otherwise CSS is keeping everything synced and animated 🤓

@property @layer Actually this is so exciting to imagine all the possibilities now with all things new in 2023

@property @layer Seriously impressive! The subgrid and scroll driven animations... And oklch() sounds are a neat addition too.

@layer Nice! Gotta play with scroll-driven animation some day

@bramus @property @layer You frequently talk about the future of CSS and provide CodePen links. However, when I click on those links, they never seem to work. Could you please include versions for various desktop browsers? I'm unable to view your work as I'm unsure how to replicate the version.

@bramus @property @layer When in doubt use Canary with the web experiments on in about://flags 👍🏻 I'll try and be better about specifying how to replicate the video in a thread with the tweet, sometimes I forget or assume A prompt made it into my website post 😅

@property @layer You maniac!! ❤️

@property @layer I’d love to use scroll snap for stuff instead of a carousel plug-in, but most PC mice don’t have a side scroll like a mac mouse etc, so the use expertience suffers. Until we get pagination and arrows with it it’s hard to use on PC.

@property @layer Works nicely, except in Safari (dev betas). Swiping/scrollind sideways is pretty good :)