SearchF
April 9, 2026/Advanced/Carousels & Sliders

Cascading Slider

GSAP-driven carousel that positions slides across 7 slots (active, left/right siblings, far left/right, and two hidden staging slots). Slides clip-path into view as they move, with the active slide title fading in after the transition completes. Keyboard and click navigable.

Live Demo ↗

Preview

Editorial

Campaign

Portrait

Studio

Archive

Lookbook

Editorial

Campaign

Portrait

Studio

Archive

Lookbook

Source

import CascadingSlider from './index.jsx';

const SLIDES = [
  { src: '/demo-assets/models/model0.png', alt: '', title: 'Editorial' },
  { src: '/demo-assets/models/model2.png', alt: '', title: 'Campaign' },
  { src: '/demo-assets/models/model4.png', alt: '', title: 'Portrait' },
  { src: '/demo-assets/models/model6.png', alt: '', title: 'Studio' },
  { src: '/demo-assets/models/model8.png', alt: '', title: 'Archive' },
  { src: '/demo-assets/models/model1.png', alt: '', title: 'Lookbook' },
];

export default function CascadingSliderDemo() {
  return <CascadingSlider slides={SLIDES} />;
}

Dependencies

  • gsap

Related Components

1MO AGO
Infinite Card Carouselcarousels
3MO AGO
Card Slidercarousels