GSAP Observer Tutorial | Scroll Controlled Slider with Clip-Path Reveal Effect
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: • 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:
Codepen: https://codepen.io/ecemgo
GitHub: https://github.com/ecemgo
TikTok: / ecemgo
🕔 Timestamps:
0:00 – Intro
0:29 – HTML
1:06 – CSS
3:51 – JavaScript: GSAP Observer with Clip-Path and Slide Transitions