GSAP Draggable Product Carousel with Inertia and Snapping
Overview
A draggable product carousel for React and Next.js, built with GSAP Draggable and InertiaPlugin. Throw it and it glides to a card, images slide inside their frames, and cards lean with the speed of the drag.
Grab the rail and throw it. It carries on with the speed of your hand, slows down and always settles with a card on the edge. While it moves, each image slides inside its frame and the cards lean with the speed. A thin bar shows where you are, and on a desktop a small badge follows the mouse and squeezes when you press.
Details
- Category
- Carousel
- Interaction
- Drag + On Click + On Scroll + Mouse Move
- Trigger
- Drag
- Languages
- React, TypeScript, Tailwind
(01)Keep exploring
All 118 componentsBuilt with the same techniques
No. 023 / Hero
GSAP Botanical Drink Slider Hero with Pour Preloader
On Load · On Scroll · Drag · Mouse Move · On Click
No. 078 / Hero
GSAP Draggable Photo Hero Section with Throwable Prints
On Load · Drag · On Click
No. 029 / Hero
GSAP Magazine Cover Hero with Cut-Out Models and Variable Type
On Load · Mouse Move · On Click · On Scroll
(02)FAQ
GSAP Draggable Product Carousel with Inertia and Snapping — FAQ
01How do I add products?
Pass items with a title, image and alt text. Price, note and href are optional, and a card without an href is just a card.
02Do I need a paid GSAP plugin?
No. Draggable and InertiaPlugin both ship in the regular gsap package, and the source imports them directly.
03What if all the cards fit on the screen?
Dragging switches off, the buttons are disabled and the progress bar hides. It checks again whenever the rail changes size.
04What does it need from my page?
npm install gsap @gsap/react, and Tailwind CSS v4. Images load through next/image, and text colour comes from your page or from className.
05What happens with reduced motion?
There's no throw, parallax or lean. Letting go moves straight to the nearest card, and the buttons and keys jump instead of gliding.