Circular Slider
Draggable circular card slider. Cards sit on a large SVG circle and travel in a shallow arc as you drag, throw, or use the prev/next arrows, then snap to the nearest card. The circle extends well beyond the viewport so you only see its top slice, which gives the cards a gentle cresting motion. Built with GSAP Draggable, Inertia, and MotionPath. Good for portfolios, product carousels, and editorial galleries.
On mobile
Can't copy on a phone? Get the free Starter Pack instead.
Three production-grade components in React, Vue and HTML/CSS/JS, in your inbox, ready when you're back at your desk.
Where this component came from.
We built it for annnimate.com, our own site, and kept it in the library once it earned its place. The same code runs in production today.
What you'll need.
Install
- GSAP
- MotionPathPlugin
- Draggable
- InertiaPlugin
Attributes, tips, use cases and full code are part of access.
The preview and provenance stay public. Tune-it docs, the data-anm-* attribute table, real-world use cases and the copy-ready code unlock the moment you sign in.
