Radial Gallery
A slow-spinning ring of image cards that works out how many fit the screen on its own, so it always looks even. Drop it behind a hero or a call to action as a moving backdrop, as two half-rings off the edges or one full ring behind your content.
One of 70 GSAP components in React, Vue and HTML.
On mobile
Take the free components with you.
In React, Vue and HTML, 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.
How it's built.
The first version I built had a set number of cards, and it broke at the edges - on a wide screen they drifted apart with gaps, on a narrow one they piled over the text in the middle. So I made the ring work out its own count: it looks at the space it's got and fills the circle with however many cards land evenly, and it redoes that the moment you resize. That's the whole thing really - it always reads as an even, deliberate ring instead of one fixed layout stretched to fit.
The hover took another pass. A card slides out of the ring when you point at it, but early on it kept sliding out from under the cursor and flickering as it went. The fix was to hold the card you're actually on still and slide an inner layer instead, so you never lose it - and it kicks out a touch too far before it settles, so it feels like there's a bit of weight to it.
Past that it's yours. Drop in your own images, set it as a half-ring bleeding off one edge or a full circle behind your content, and dial the spacing to make it calm and airy or packed tight - the card count just follows. On a phone it settles into a full circle sized to wrap around the content instead of throwing cards off into the corners.
What you'll need.
Install
- GSAP
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.
Frequently asked
- Does Radial Gallery work with React and Vue?
- Radial Gallery ships as React (Next.js included), Vue 3 (Nuxt included), plain HTML/CSS/JS - the same animation in each format. The React version uses the official useGSAP hook with cleanup handled; the Vue version is a real single-file component with <script setup>.
- Do I need GSAP to use Radial Gallery?
- Yes. Radial Gallery is built on GSAP directly, and GSAP has been 100% free for commercial use, including every plugin, since version 3.13. The component page lists exactly what to install.
- Can I customize Radial Gallery without editing code?
- Radial Gallery exposes 7 tunable controls in the Customize panel on this page - drag the values, watch the live preview respond, and the code you copy carries your exact settings.
- Is Radial Gallery free?
- Radial Gallery is part of the Annnimate Library, a paid subscription (from EUR 249/year). The live preview and customization run free on this page; the paste-ready code is for members.
- Can I use Radial Gallery in client projects?
- Yes. The Annnimate license covers commercial and client work - ship Radial Gallery on as many projects as you build, with no attribution required.
- Does Radial Gallery respect prefers-reduced-motion?
- Yes. Every Annnimate component handles prefers-reduced-motion via gsap.matchMedia, so users who opt out of motion get an effectively instant, readable state.
