GSAP ScrollTrigger: Horizontal Scroll with Opposite Direction #gsap

This tutorial shows how to create a horizontal image scroll effect using GSAP ScrollTrigger. It includes rows of images that move in opposite directions while scrolling. ScrollTrigger is used to pin the section, control the scroll length, and synchronize the animation with the scroll position. The images are cloned dynamically with JavaScript to create an infinite scrolling effect without gaps.

This project includes:
- a horizontal scroll animation with GSAP
- animating rows in different directions
- using ScrollTrigger pin and scrub for smooth scrolling effects
- cloning images dynamically with JavaScript
- making the design responsive with CSS media queries

📂 GSAP Installation: https://gsap.com/docs/v3/Installation/
⭐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:35 – HTML
1:18 – CSS: Styling and Responsiveness
2:25 – JavaScript: Cloning Images and Adding GSAP Animation
4:33 – Rotating the Rows with CSS Transform

Видео GSAP ScrollTrigger: Horizontal Scroll with Opposite Direction #gsap канала Ecem Gokdogan