A staggered image reveal animation where each image expands outward from the center using clip-path transitions.
Image Reveal is a GSAP-powered animation that progressively reveals images using clip-path polygons. Each image begins in a collapsed center state and expands outward to full visibility, creating a cinematic reveal effect. The images animate sequentially using configurable stagger timing, producing a smooth cascading transition. This approach works well for visually driven layouts where imagery is introduced in a controlled and engaging way.
npm i gsap @gsap/react
Ideal for hero sections, portfolio landing pages, gallery introductions, and visual presentations where staggered image reveals add dramatic impact without overwhelming the layout.
Easy-Intermediate
| Prop | Type | Description |
|---|---|---|
| ease | string | Controls the easing curve used during the image reveal animation. |
| duration | number | Duration (in seconds) of the reveal animation applied to each image. |
| stagger | number | Delay between each image reveal, creating the cascading animation sequence. |
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, it is already optimized and production-ready out of the box.
© 2026 dropui.design