A stacked image loader where images rotate and scale into place sequentially while a counter increments to 100.
Stack Rotate Loader is a sequential loading animation built with GSAP. A stack of images is dynamically created and layered using z-index ordering. Each image enters the scene with a rotation and scale transformation, then animates back to its natural orientation. Once the animation completes, the image is recycled to the back of the stack and reused, producing a continuous rotating stack effect. Meanwhile, a numerical counter increments from 0 to 100, visually representing loading progress. When the counter completes, all images fade and translate downward, followed by the counter itself.
npm i gsap
Ideal for creative preloaders, portfolio websites, landing pages, and immersive UI experiences where loading feedback should feel visually engaging instead of static.
Easy-Intermediate
| Prop | Type | Description |
|---|---|---|
| ease | string | GSAP easing function controlling how smoothly images rotate and settle into place. |
| duration | number | Duration of each image animation cycle (scale and rotation transition). |
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