React + GSAP ScrollTrigger: Image Reveal Animation on Scroll
This tutorial shows how to create a scroll-based animation in React using GSAP and ScrollTrigger. When scrolling down, the images move from outside the screen and stop around the center point. The useGSAP hook connects GSAP with React. The tutorial also explains how to set start and end positions for images, trigger animations on scroll, and use container references effectively.
📂 Resources:
1) GSAP Installation: https://gsap.com/docs/v3/Installation/
2) React and useGSAP() Hook: https://gsap.com/resources/React/
⭐Lists:
Mini React Projects: • Mini React Projects
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 – Intro
0:33 – Creating a React project with Vite
0:52 – Starting the React project: Main.jsx, public folder, and src folder
1:08 – App.jsx
1:23 – ImageAnimation component: Importing GSAP plugins and setting up structure
3:00 – CSS: Styling layout and images
4:48 – ImageAnimation component: Adding useGSAP hook and GSAP animation