GSAP Observer Tutorial | Scroll Controlled Slider with Clip-Path Reveal Effect #gsap

This tutorial shows how to build a scroll-controlled slider animation using GSAP Observer. The layout uses CSS Grid to divide each slide into two sections. The animation reveals both sections using clip-path, transform animations, and a GSAP timeline. The GSAP Observer plugin detects mouse wheel and touch gestures and triggers the animation when the user scrolls up or down.

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

🏞️ The images are designed by Freepik: https://www.freepik.com
⭐Lists:
- 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:29 – HTML
1:06 – CSS
3:51 – JavaScript: GSAP Observer with Clip-Path and Slide Transitions

Видео GSAP Observer Tutorial | Scroll Controlled Slider with Clip-Path Reveal Effect #gsap канала Ecem Gokdogan