2026
GSAP component

Orbit

Navigation laid out on an arc, with drag and inertia, an arch-shaped preview and an open view that grows to full bleed.

Source on GitHub
Live demo
GSAP
Draggable, InertiaPlugin, CustomEase
Version
1.1.0
Year
2026
License
MIT

The links sit on a wide circle whose centre is below the stage, so only the top of the curve shows: the active link at the keystone, its neighbours leaning away and fading down the slope. Drag or swipe with inertia, scroll, or use the arrow keys, Home and End. It always settles on a link.

A preview in the shape of an arch shows the active item, each new image rising from a circle at its base, and the arch leans with the speed of the turn. Clicking the active link opens it: the arch grows into a full bleed image, the title rises in, and the bar text switches to dark or light ink to stay readable.

An optional sound gives each link its own note, so turning the arc plays a scale. It stays off until the toggle is pressed. The links stay a normal list, so tabbing turns the arc and screen readers read them in order. Options live in attributes: data-arco-orbit-start, data-arco-orbit-wheel, data-arco-orbit-thumbs and data-arco-orbit-open.