GSAP Scroll Animation: Stacked Cards with Clip-Path | ScrollTrigger & ScrollSmoother

Опубликовано: 01 Май 2026
на канале: Ecem Gokdogan

5,750

150

This tutorial shows how to create scroll-based stacked cards using HTML, CSS, JavaScript, and GSAP ScrollTrigger. Each card includes text and an image. When we scroll, the cards animate one by one with a clip-path effect. GSAP ScrollSmoother is also used to improve the scroll experience. The cards are stacked on top of each other and animate when the user scrolls down or up.

This project includes:
ScrollTrigger in GSAP
ScrollSmoother setup
Clip-path animations
Responsive card layouts

📂 GSAP Installation: https://gsap.com/docs/v3/Installation/

⭐Lists:
GSAP:    • GSAP
Swiper JS:    • Swiper JS
Slider with Vanilla Javascript & CSS:    • Slider with Vanilla Javascript & CSS
Background Animation:    • Background Animation
CSS Hover Effect:    • CSS Hover Effect

👩‍💻 My Social Profiles:
X: https://x.com/ecemgo
Codepen: https://codepen.io/ecemgo
GitHub: https://github.com/ecemgo
TikTok:   / ecemgo

🕔 Timestamps:
0:00 – Introduction
0:52 – HTML
1:55 – CSS
4:50 – JavaScript: GSAP & Clip-Path Animation
8:31 – Custom Scroll Settings Based on Number of Cards