Images explode outward from the center into a circular layout, animate dynamically, and collapse back with staggered motion.
Radial Image Burst is a GSAP-driven animation that distributes images evenly around a circular radius using trigonometric positioning (sin/cos). The animation begins with all elements scaled down at the center, expands them outward into a radial formation, and then applies sequential directional shifts to create fluid motion across multiple phases. Finally, all elements collapse back into the center with scale and opacity transitions. The animation uses timelines, stagger control, and mathematical positioning to produce a dynamic, organic motion.
npm i gsap
Ideal for interactive hero sections, creative portfolios, loaders, where a dynamic burst animation creates strong visual impact. Works best with a small set of images (6–10) to maintain clarity and smooth motion. Particularly effective for creating an engaging entry animation.
Intermediate
| Prop | Type | Description |
|---|---|---|
| ease | string | Controls the easing applied across all animation phases, influencing how elements accelerate and decelerate during expansion and movement. |
| duration | number | Base duration (in seconds) for each phase of the animation timeline. Affects how fast images expand, shift, and collapse. |
| stagger | number | Delay between each image animation, creating a ripple-like effect from the center outward. |
These components are designed for developers who have at least an intermediate understanding of React and GSAP. To fully customize, extend, or modify the behavior, familiarity with both libraries is recommended. They are not specifically intended for absolute beginners.
However, beginners can still use them by simply copying and pasting the code.
© 2026 dropui.design