A seamless infinite image carousel using clip-path transitions with scroll and touch interactions.
Infinite Clip Carousel is a GSAP-powered image slider that uses layered elements and clip-path animations to create smooth directional transitions between images. The system maintains two image layers (front and back) along with overlay duplicates to simulate depth and brightness effects. Based on user interaction (scroll or touch), the animation dynamically reveals the next or previous image using directional clipping.
npm i gsap @gsap/react
Ideal for fullscreen galleries, portfolio showcases, hero sections, and immersive storytelling interfaces where smooth, gesture-driven navigation enhances user engagement.
Intermediate
| Prop | Type | Description |
|---|---|---|
| ease | string | Defines the easing curve used for clip-path transitions during image changes. |
| duration | number | Controls how long each image transition takes (in seconds). |
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