028
Optional AI setup

3D Ring Gallery

£5

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. Opt in and each card becomes a button that spins to the front and Flips open into a full detail lightbox.

DraggableInertiaPluginFlip advanced
8 more details
3d-transformsdraggablemomentumcarouselsnapvelocity-reactiveclick-togglelightbox
3D Ring Gallery - GSAP animation effect preview

This demo reads better at your own screen size than in the frame below:

Open the demo in a new tab
Open 3D Ring Gallery demo in new tab

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.

Read the full effect overview

A data-detail="true" flag takes the ring further: every card becomes a button, and clicking one spins it to the front, then the GSAP Flip plugin morphs a clone of the card art into a large detail lightbox showing the print big, its edition metadata, a short description, and a CTA over the blurred ring. Closing Flips the card back onto its exact slot and returns focus to it.

What's included

8 items
  • 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
  • Opt-in click-to-open detail view (data-detail): cards become buttons that spin to the front and Flip open into a full lightbox
  • Buttery Flip morph of the card art into a large detail panel, with edition metadata and description staggering up through masks as it settles
  • Depth-aware cards that dim and scale down as they turn away from the viewer, computed from each card's angle
  • Touch-safe dragging plus keyboard access (arrow keys step, Enter opens, Escape closes) and a fully static reduced-motion fallback

Perfect for

5 use cases
  • Print shop or poster store collection browsers where clicking a print opens its full edition detail
  • Portfolio case-study selectors that expand a thumbnail into a full case study in place
  • Product colourway or edition pickers on e-commerce landing pages, spinning to a product and opening its detail card
  • Exhibition, lineup, or programme showcases where each entry opens a bio or blurb
  • Album or cover-art discography browsers that open track notes for artists and labels

How it works

3 sections

Every card shares one transform trick: each is given 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 itself uses the same deep origin, so spinning the whole thing is one rotation.

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 every card's angle relative to the front sets its own dim and scale, while motion blur and a tilt ease toward the live spin speed. When the throw decays the nearest card springs into place and the caption rises through overflow-hidden masks.

With data-detail="true", clicking a card tweens the ring to that card's front angle, then Flip morphs a clone of the card art into a large panel appended to the body, clear of the stage's 3D containing block; the detail text staggers up through masks behind a blurred backdrop. Closing Flips the clone back onto the ring slot and restores focus. Reduced motion gets a static ring and an instant, Flip-free open and close.

Plugins Draggable, InertiaPlugin, Flip
Difficulty Advanced
Includes HTML + JS + CSS source, documentation, AI setup prompt, lifetime updates

Paid effect

Purchase to unlock the code.

Buying 3D Ring Gallery opens the HTML, CSS and JavaScript source, the full documentation, an AI setup prompt for your editor, and every update we ship to it. Standard license: unlimited personal and commercial projects.

£5 Standard license, unlimited projects

Browse free effects

Documentation

Quick Start

1. Add to your HTML <head>:

Code snippet omitted: it ships with the download.

2. Add before closing </body> tag:

Code snippet omitted: it ships with the download.

3. Add the effect HTML anywhere in your <body>:

Code snippet omitted: it ships with the download.

Copy the complete six-card composition from index.html; the abbreviated block above shows the required structure without repeating every card.

Pre-fill the caption and counter with the first card's details so the page reads correctly before the script runs.

Options

All options are data attributes on the .ring-gallery wrapper.

Attribute Values Default Description
data-drag-speed Any number 0.25 Degrees of ring rotation per pixel of drag. Higher = faster spin.
data-snap true, false true Elastic-snap to the nearest card after a throw. false leaves the ring wherever momentum stops it.
data-tilt Number (degrees) 7 Maximum rotationX tilt the ring takes under speed. 0 disables the tilt channel.
data-blur Number (px) 6 Maximum motion blur cards catch under speed. 0 disables the blur channel.
data-dim 0 to 1 0.55 How much cards dim as they face away from the viewer. 0 disables depth dimming.
data-radius Number (px) auto Explicit cylinder radius. Leave unset to derive it from the card width and count.
data-detail true, false false Turn the cards into buttons that open a Flip detail lightbox on click. Requires the Flip plugin.

Per-card attributes

Attribute Description
data-title Caption title shown when this card settles at the front; also the detail panel heading
data-sub Caption subtitle line for this card; also the detail panel edition/meta line
data-desc Description paragraph shown in the detail panel. Detail mode only (data-detail="true").

Card and stage sizing

Card size and stage height are CSS variables on .ring-gallery; the script derives the cylinder radius from the card width, so resizing these rescales the whole ring:

Code snippet omitted: it ships with the download.

The stylesheet already reduces these at 640px so the ring fits phone viewports.

Touch Behaviour

Only horizontal-dominant gestures spin the ring. A vertical swipe that starts on the ring scrolls the page, courtesy of Draggable's allowNativeTouchScrolling and delta-based rotation (the script never maps an absolute pointer position to the ring, so a reclaimed scroll gesture can't yank it back to the start).

Accessibility

  • Keyboard: the stage is focusable; left and right arrow keys rotate the ring one card at a time with the same caption reveal
  • Screen readers: an aria-live region announces the settled card ("Solstice Drift, 1 of 8"); the stage carries role="group" and aria-roledescription="carousel"
  • Reduced motion: prefers-reduced-motion: reduce gets a static ring with the front card and caption fully visible; arrow keys still work with instant jumps and no momentum, blur, or tilt
  • No JavaScript: the cards render as a flat, scrollable row; nothing on the page is hidden behind a script

Detail view (data-detail="true")

  • Keyboard: cards are real <button>s, so Enter and Space open them; the panel takes focus on open, Escape closes it, and focus returns to the card that was opened
  • Dialog semantics: the panel carries role="dialog" and aria-modal="true" and is labelled by the print title; a real close button (aria-label) sits top-right, and clicking the backdrop also closes
  • Reduced motion / no Flip: the panel still opens and closes, just instantly (no Flip morph, no staggered text); nothing is ever left stuck at opacity: 0
  • Scrolling: the panel has data-lenis-prevent so its internal scroll on small screens stays native under Lenis

Dependencies

Required:

  • GSAP 3.12+
  • Draggable plugin
  • InertiaPlugin

Required for the detail view only (data-detail="true"):

  • Flip plugin

All three plugins are on the public GSAP CDN (formerly Club-only; free since GSAP joined Webflow). A gallery without data-detail runs without Flip loaded.

Worked examples, the events and programmatic API, and the class reference ship with the download, alongside the full source.

Your cart

Your cart is empty

The Vault £99

Everything in the catalogue, plus everything we release next.

Or browse effects, templates or UI elements.