A seamless vertical looping image slider controlled by wheel and touch gestures with depth-based scaling.
Vertical Loop Slider is a GSAP-powered animation component that creates an infinite scrolling illusion by recycling DOM elements. Images are positioned vertically and dynamically reordered during interaction, maintaining a continuous loop without DOM re-renders. The component adjusts scale and z-index based on position to create a depth hierarchy, giving a stacked visual effect. It supports both wheel and touch input, includes resize recalculations, and is optimized using transform-based animations for smooth performance.
npm i gsap
Ideal for modern portfolios, hero sections, and interactive showcases where continuous motion enhances visual storytelling. Best used in full-screen layouts with 5–15 items (odd no. of items recommended) to maintain clarity and performance. Works particularly well for showcasing projects, artwork, or product previews in a minimal UI.
Advanced
| Prop | Type | Description |
|---|---|---|
| ease | string | GSAP easing function applied to transitions, affecting motion smoothness and responsiveness. |
| duration | number | Controls how fast each scroll transition occurs. Lower values feel snappier, higher values feel smoother. |
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