scroll animation, stitch and snare

Interactive Scroll Animation with GSAP + CSS

BySteve Sparacino Published Updated

When it comes to modern web experiences, subtle interactivity goes a long way for a users experience on your site. Inspired by the card transitions on sites like PayPal, we built a GSAP-powered scroll animation where content cards stack smoothly as the user scrolls—each one fading in with the relevant content / CTA, and then sliding out as the next piece of content to showcase takes its place.

If you’re building a modern landing page, services overview, or portfolio section, this technique creates a high-end, interactive experience that keeps users engaged—without overwhelming them.

Why we built it

We wanted a more dynamic way to showcase services or case studies (just work that we’ve done)—something beyond a static list, 3 column module or simple slider. The goal was to build an experience that feels alive and intentional, especially on desktop where users have more scroll real estate.

How we built the scroll-triggered stacking cards with GSAP

We used GSAP + ScrollTrigger to animate a two-column layout of content cards. Here’s what’s happening behind the scenes:

The animation uses a pinned container that stays fixed while each content card scrolls into place. Here’s the high-level flow:

  • Each card is absolutely positioned and layered using z-index.
  • As you scroll, GSAP animates the card’s opacity and vertical position.
  • Cards fade in, slide forward, and then fade out as the next one enters.
  • On mobile, the layout adapts to maintain readability and flow—no jarring shifts or performance issues.
preview, scroll cards, stitch and snare

Tech Stack:

  • GSAP + ScrollTrigger: For smooth animations and scroll-based timing.
  • HTML + CSS Grid: For clean, responsive layout.
  • WP HTML Block: All code can be uploaded/input into one custom block (or Additional CSS via Customize)
Live Preview →

Key Features of Our GSAP Scroll Animation

  • Stacked Card Effect: Cards layer over each other as users scroll, creating a polished, cinematic flow.
  • Scroll-Pinning: The animation is contained in a pinned section, creating an immersive interaction zone.
  • Responsive by Design: Built with CSS Grid and flexible media, the layout adapts for mobile, tablet, and desktop.
  • Fully Customizable: Everything from timing to animation easing is tunable—ideal for fitting any brand aesthetic.
  • Lightweight + Modular: It works without page builders, relying on clean HTML, CSS, and GSAP only.

Inspired By:

Want this on Your Site?

We can bring this scroll-triggered animation to your project—perfect for showcasing case studies, services, or any content that deserves attention.

👇 Ready to add some motion to your message?

Let’s build it →

More from us: