Stacked Card Animation with GSAP ScrollTrigger
This tutorial shows how to create a stacked card animation using GSAP ScrollTrigger. It explains how to pin a section, animate cards on scroll, and build a layered card stack effect. Each card moves from the bottom, scales slightly to create depth, and rotates based on its index. The tutorial also covers how to reveal images using CSS clip-path and GSAP timelines. The image reveal animation runs in sync with the card movement to create a smooth scroll-based interaction. The layout uses CSS variables, flexbox, and media queries to keep the design responsive on smaller screens.
📂 Resources:
1) GSAP Installation: https://gsap.com/docs/v3/Installation/
2) Left Double Quotation Mark: https://www.compart.com/en/unicode/U+...
🏞️ The images are designed by Freepik: https://www.freepik.com
⭐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:40 – HTML
1:40 – CSS: Layout, Card Styles, and Responsive Design
4:45 – JavaScript: GSAP ScrollTrigger, Timeline, and Clip-Path Animation