Scroll-driven · 1.13
Scroll-mapped 3D ring
A Rolodex, or a ferris wheel you turn with the scrollbar.
Items placed around an invisible cylinder, the whole form rotating on scroll. CSS 3D only, no WebGL.
4 knobs
How it actually works
This is the cheapest route to a 3D site that exists. No WebGL context, no shader, no library, no asset pipeline. The text inside the cards is real DOM text: selectable, searchable, readable by a screen reader. It costs a sine and a cosine per card per frame.
Trig placement: x = sin(angle) * radius, z = cos(angle) * radius, items spread over an arc. Scroll then scrubs rotateX across the ring. transform-style: preserve-3d on the parent, and backface-visibility: hidden on the items so mirrored text does not show when they rotate away. That one property is the difference between "3D" and "broken". Ours adds two things: each card's opacity and z-index follow cos(angle), and slot 0 is an empty gap so the seam marks the start and end rather than hiding it.
The knobs, named
Radius, item count, arc span, rotation range. Four numbers that produce wildly different objects out of the same markup: a tight drum, a lazy wheel, a flat fan.
| Knob | Source | What it teaches |
|---|---|---|
| Radius | sourced | How far each card sits from the axis. Small = a tight drum you see the back of; large = a shallow curve. |
| Item count | sourced | Cards around the ring. More cards, denser drum, and the gap slot matters more. |
| Arc span | sourced | 180° is a cylinder you look into. 360° is a closed tube. |
| Rotation range | sourced | How far the ring turns across the full scroll. This is the gearing. |
sourced means the source names this parameter. ours means the source names none and the knob is our design against the mechanism. No knob here is invented and passed off as sourced.
Evidence
VERIFIED (author) + VERIFIED (ours, shipped)
Codrops "Creating 3D Scroll-Driven Text Animations with CSS and GSAP" (cylinder, circle, tube demos). Ours: clients/tabblabs/build/andrew/app.js feature block E, live at tabblabs.net/andrew. Andrew's verdict on the set: "This is now EXCELLENT."
- Seen on
- Codrops 3D scroll-driven text; tabblabs.net/andrew (ours, vertical ring).
- Dependencies
- vanilla CSS 3D + one rAF (ours). GSAP + ScrollTrigger in the source.
- Difficulty
- moderate
- Performance
- Excellent value: GPU-accelerated CSS transforms, no DOM churn per frame, no WebGL context, text stays real.
- Accessibility and the floor
- The source concedes it may affect users with vestibular disorders. Ours drops to a static complete list below 760px and under reduced motion: the cards are all there, in order, readable.
Notes
Composability. Pairs with per-word illumination (4.6) on the card text, and with velocity (1.4) if you want the ring to overshoot.