React + GSAP ScrollTrigger: Stacked Cards on Scroll Effect #gsap #reactjs

This tutorial explains how to build a stacked cards animation using React and GSAP ScrollTrigger. It shows how to create cards that appear one by one with smooth animations while scrolling. We use useRef and useGSAP hooks in React to connect DOM elements and run GSAP animations. The tutorial also demonstrates how to set up a React project with Vite, how to use ScrollTrigger and ScrollSmoother in React, and how to map through card elements to apply animations. This project is responsive and works on different screen sizes. It demonstrates: - How to set up a React project with Vite - How to use GSAP ScrollTrigger and ScrollSmoother in React - How to animate multiple elements with smooth scroll effects - How to organize components and references for clean React code 📂 Resources: 1) GSAP Installation: https://gsap.com/docs/v3/Installation/ 2) React and useGSAP() Hook: https://gsap.com/resources/React/ 🏞️ The images are designed by Freepik: https://www.freepik.com ⭐Lists: - Mini React Projects: https://www.youtube.com/playlist?list=PLes5YJFlROjGlHbGu3mnLAunULzAKKwsr - GSAP: https://www.youtube.com/playlist?list=PLes5YJFlROjHOLLJBZkwpfUihD_ouui8w - Swiper JS: https://www.youtube.com/playlist?list=PLes5YJFlROjF1Lf2RZykNeD-q6KuUYXmn - Slider with Vanilla Javascript & CSS: https://www.youtube.com/playlist?list=PLes5YJFlROjE2USc2RbzJXLzANyxijsUb - Background Animation: https://www.youtube.com/playlist?list=PLes5YJFlROjE3QNHDn6UNzP5fiMhzQlze - CSS Hover Effect: https://www.youtube.com/playlist?list=PLes5YJFlROjGxfF4QgD4QwR6noJyCI_8f 👩‍💻 My Social Profiles: - X: https://x.com/ecemgo - Codepen: https://codepen.io/ecemgo - GitHub: https://github.com/ecemgo - TikTok: https://www.tiktok.com/@ecemgo 🕔 Timestamps: 0:00 – Introduction 0:51 – JavaScript version of the project 1:06 – Creating a React project with Vite 1:24 – Starting the React project: Main.jsx, public folder, and source folder 1:36 – App.jsx 1:49 – StackedCards.jsx: Installing React GSAP and setting up structure 3:15 – CSS: Styling cards and adding media queries 6:02 – StackedCards.jsx: Adding GSAP animations