✦ StealThis .dev
Web Animations Medium

Split Slide Cards

Auto-advancing cards where each image is split into left/right halves that slide apart and back together for the transition.

Open in Lab
html css gsap javascript
Targets: HTML

Code

Split Slide Cards

Split cards carousel: each card’s image is split into left and right halves; on transition the current halves slide outward (e.g. xPercent: -120 / 120) while the next card’s halves slide in from the sides, driven by GSAP.

How it works

  • Structure — Each card has .half.left and .half.right with data-image; script sets backgroundImage and GSAP animates xPercent for the slide.
  • Timeline — Next card starts with halves off-screen (xPercent: -100 / 100); current halves go to -120 / 120 while next halves go to 0 in the same timeline.
  • Interval meter — Progress bar indicates time until the next transition.

When to use it

  • Hero or feature carousels where a strong horizontal split fits the layout
  • Portfolios or campaigns that benefit from a “reveal” feel
  • Any image carousel where you want a clear left/right motion instead of fade or diagonal