Enough to read as a ring, not a crowd. Past about 12, a straight slider is kinder.

Does the centre have to show something?

It helps. A ring with no centre cue leaves people guessing which item is active.

The ring already loops. You do not need copies, only angles that wrap.

What does reduced motion do?

Change the active item with no spin.

Is this better than a straight slider?

It is better when a centre preview is the point and the set is small.

Circular slider

A circular slider puts choices on a ring. People rotate the ring, or drag it, until one item sits in the active position.

SlidersBuild difficulty: MediumDraggable rotation

Also called Rotary picker, Wheel slider, Circular carousel, Ring selector.

Here it is working.

Drag the disc. The number is the angle.

For designers

You reach for this when the set is small, the items are equals, and the centre can hold the active label or a preview. It looks considered in a hero. It is a lot of geometry for a settings row. If the set is long, a straight Draggable slider is easier to scan. If nobody is choosing, you wanted Infinite marquee. Every item should be reachable by rotation, by buttons, and by keyboard. A ring that only yields to drag will strand keyboard and some touch users. Reduced motion can sit the active item in place and skip the spin.

Use this when

The set is small, often 4 to 12 items.
One item is active at a time, and the centre can show it.
Rotation, buttons and keys can all change the selection.
Reduced motion can skip the spin and still change the item.

Reach for something else when

The set is long or needs to be compared as a row. Use Draggable slider.
The loop should feel like a strip with depth. Use Infinite parallax slider.
Nobody is choosing. Use Infinite marquee.
The field is a grid you pan. Use Infinite draggable grid.
The items are names in a column. Use Hoverable list.

How to build it

Place each item with x and y from a radius and an angle, around a centre. The active slot is a fixed angle, often the top. Draggable type rotation on the wheel, with InertiaPlugin so a throw can settle. Snap rotation to 360 divided by the count. Buttons and arrow keys add or subtract one snap. Keep the active item in the accessibility tree as selected. On reduced motion, jump to the next snap with no spin. Do not auto-rotate a choice.

Official GSAP

Draggable type rotation.

Draggable.create(knob, { type: 'rotation', inertia: false, onDrag() { value = ((this.rotation % 360) + 360) % 360 / 360 * 100 } });

Every plugin ships in the public GSAP package. Nothing here is copied from a paid pack.

Common questions

How many items?: Enough to read as a ring, not a crowd. Past about 12, a straight slider is kinder.
Does the centre have to show something?: It helps. A ring with no centre cue leaves people guessing which item is active.
Can it loop?: The ring already loops. You do not need copies, only angles that wrap.
What does reduced motion do?: Change the active item with no spin.
Is this better than a straight slider?: It is better when a centre preview is the point and the set is small.

Save as skill

A SKILL.md for this one animation: what it is, the official docs link, and a copy-paste block with the reduced-motion branch already in it. Copy gives you the same words.

Use this with your AI

Save the skill, drop it into Cursor, Claude, or whatever you use, and ask for this motion. That is all. The skill tells the agent to open this page, watch the working demo, and match it.

Last reviewed 26 AUG 2026

Next: Step-by-step timeline