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