Animated img carousel 🤙 Use CSS trig functions to get radius and layout images as a cylinder 🤓 Use scroll animation to rotate the cylinder 📜 :root { --a: calc((360 / var(--total)) * 1deg); --r: calc((var(--item-width) / sin(var(--a))) * -1); } Explained 👇

1st trick: Create two lists. One to drive the animation, and one for the images You can see It when you enable "debug" The controlling list has a scroll-timeline hoisted with timeline-scope ul.controller { scroll-timeline: --controller } :root { timeline-scope: --controller }

2nd trick: Create the cylinder layout using CSS trig functions :root { --a: calc((360 / var(--total)) * 1deg); --item-width: clamp(100px, 10vmin, 8rem); --r: calc((var(--item-width) / sin(var(--a))) * -1); } li:nth-of-type(3) { --index: 3; } li { transform: rotateY(calc((var(--a) * var(--index)))) translate3d(0, 0, calc(var(--r) * -1)); } Don't forget the transform-style: preserve-3d! 🤙

The last trick is to animate that rotate. Rotate the list on the y-axis with the hoisted scroll-timeline main{ timeline-scope: --controller;} .controller{ scroll-timeline: --controller inline;} .carousel { animation: spin; animation-timeline: --scroller;} @​keyframes spin {to:{rotate: y 360deg;}}

Here's the @CodePen link! 🚀 It will do a better job of explaining what's happening 😅 There are a bunch of little tricks in this one Love how CSS Math can do things like layout with ease and how easy scroll animations adapt ⭐️

Umm… but can you do this? 🤔 Anyway, thanks for always sharing dope stuff!

Wait what’s that config tool you’re using?

Bro is PhD in CSS

You never disappoint

This is so freaking nice dude.

sin() is a trigonometric function You need to have a way to calculate the radius based on using sin() with the inner angle and the variable width It updates responsively with changes to number of items or size of items because it will recalculate via the custom property