✦ StealThis .dev
Web Animations Medium

Lenis + GSAP Scroll Cards

Scroll-driven card stack with Lenis smooth scroll and GSAP ScrollTrigger; cards pin and transition as you scroll.

Open in Lab
html css gsap lenis javascript
Targets: HTML

Code

Lenis + GSAP Scroll Cards

A scroll-driven card experience: Lenis provides smooth scrolling while GSAP ScrollTrigger pins a stack of cards and animates each one out (fade, lift, rotate) as you scroll, then brings the next into focus.

How it works

  • Lenis — smooth scroll; its raf() runs each frame and lenis.on("scroll", ScrollTrigger.update) keeps ScrollTrigger in sync.
  • ScrollTrigger — pins the .pin container and uses a long scroll distance to drive a single timeline; each card animates out and the remaining stack repositions.
  • Initial stack — cards are offset by y, rotate, scale, and opacity/brightness for depth.

When to use it

  • Editorial or narrative scroll sections
  • Product or portfolio highlights that should feel cinematic
  • Any page where scroll progress should drive card transitions instead of time