3D Ring Gallery
A draggable 3D ring carousel where cards stand on a cylinder in real perspective. Flick it hard and it spins with momentum, motion blur, and a velocity-driven tilt before an elastic snap locks the nearest card front and centre.
About This Effect
A draggable 3D ring carousel built on Draggable and InertiaPlugin. Cards stand on a real CSS cylinder viewed in perspective, and dragging or flicking spins the whole ring with genuine momentum. Under speed the cards catch a velocity-driven motion blur and the ring tilts on its horizontal axis, then as the throw decays an elastic snap locks the nearest card front and centre while its caption and index counter stagger up through a masked reveal.
What's Included
- True 3D cylinder built from a single transform-origin trick, so card placement needs no per-frame trigonometry
- Flick-to-spin momentum via InertiaPlugin, with the throw velocity carried straight into the ring's rotation
- Velocity-driven motion blur and ring tilt that build with spin speed and drain away as the ring settles
- Elastic snap that locks the nearest card front and centre after the throw decays, tuned to overshoot once without wobbling
- Depth-aware cards that dim and scale down as they turn away from the viewer, computed from each card's angle
- Masked caption and index counter that stagger in whenever a new card settles at the front
- Touch-safe dragging: vertical swipes on the ring scroll the page, only horizontal gestures spin it
- Keyboard accessible (arrow keys step one card) with a fully static reduced-motion fallback
Perfect For
- Print shop or poster store collection browsers with a physical, spin-to-browse feel
- Portfolio case-study selectors that make a short list of projects feel expansive
- Product colourway or edition pickers on e-commerce landing pages
- Exhibition, lineup, or programme showcases for galleries and events
- Album or cover-art discography browsers for artists and labels
How It Works
Every card shares one transform trick: gsap.set gives each a transform-origin pushed radius pixels behind its own plane, so rotating card i by i * (360 / n) degrees places it on a cylinder facing outward, with correct paint order for free. The ring element gets the same deep origin, and spinning it is a single rotationY write.
A hidden proxy element is driven by Draggable with inertia: true; drag deltas (never absolute pointer positions) feed the ring's rotation, which keeps a vertical touch swipe scrolling the page instead of yanking the ring. On each update a cosine of every card's angle versus the front sets per-card dim and scale, while a gsap.ticker eases motion blur and a rotationX tilt toward the live spin velocity.
When the throw decays, the nearest multiple of the card step is tweened in with elastic.out, and the caption and counter rise through overflow-hidden masks with a small stagger. gsap.matchMedia routes reduced-motion users to a static ring with the front card and caption already visible.