This tutorial shows how to create a Flip animation in React using GSAP ScrollTrigger. The image moves smoothly between sections while scrolling. It is also responsive.
📂 GSAP Installation: https://gsap.com/docs/v3/Installation/
📌 The previous tutorial: https://youtu.be/C614y50sFvw
⭐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 – Intro
0:43 – Project setup overview: Main.jsx, public folder, and src folder
1:05 – App.jsx
1:21 – Home component: Importing GSAP plugins and creating structure
2:25 – About component: Adding text and final image position
2:47 – Adding About component to App.jsx
3:00 – CSS: Styling layout, text, image, and responsive design
7:28 – Home.jsx: Using useGSAP hook and creating Flip scroll animation
