DEV Community

Cover image for Day 2: Exploring GSAP ScrollTrigger and Advanced Animations 🚀
Ashish prajapati
Ashish prajapati

Posted on

Day 2: Exploring GSAP ScrollTrigger and Advanced Animations 🚀

#webdev #javascript #beginners #tutorial

Welcome to Day 2 of the GSAP learning series! In this session, we'll dive into the world of ScrollTrigger, a powerful plugin in GSAP that helps create scroll-based animations effortlessly. This day builds upon our foundational knowledge from Day 1, introducing animations that react dynamically to user scroll interactions.

Final Project Link: Day 2 GSAP Project

GitHub Repository: Anticoder03/gsap

🚦 Animating Elements with ScrollTrigger

Below are the examples covered today:

1. Basic Animation 

gsap.from("#page1 #box", { scale: 0, // Shrinks the element to zero size initially duration: 1, // Animation duration is 1 second delay: 1, // Starts after a 1-second delay rotate: 360 // Rotates the element 360 degrees });
Enter fullscreen mode Exit fullscreen mode

This simple animation makes an element scale up from 0 to its original size while performing a 360° rotation.

2. Scroll-Triggered Box Animation 

gsap.from("#page2 #box", { scale: 0, opacity: 0, duration: 1, rotate: 360, scrollTrigger: { trigger: "#page2 #box", // Element that triggers the animation scroller: "body", // Scroll container markers: true, // Visual markers for debugging start: "top 60%", // Animation starts when the top of the element reaches 60% of the viewport end: "top 30%", // Animation ends at 30% of the viewport scrub: 5 // Smoothens animation over 5 seconds } });
Enter fullscreen mode Exit fullscreen mode

This code uses ScrollTrigger to animate the #box on #page2 as the user scrolls through the page.

3. Heading Animations with ScrollTrigger

For <h1>: 

gsap.from("#page2 h1", { opacity: 0, // Starts completely transparent duration: 1, x: 500, // Moves in from the right scrollTrigger: { trigger: "#page2 h1", scroller: "body", markers: true, // Debugging markers start: "top 60%", // Begins animation when the heading is 60% into the viewport } });
Enter fullscreen mode Exit fullscreen mode

For <h2>: 

gsap.from("#page2 h2", { opacity: 0, duration: 1, x: -500, // Moves in from the left scrollTrigger: { trigger: "#page2 h2", scroller: "body", markers: true, start: "top 60%", } });
Enter fullscreen mode Exit fullscreen mode

These animations create smooth transitions for headings, entering from opposite directions.

4. Pinning and Animating an Element 

gsap.from("#page2 #box", { scale: 0, opacity: 0, duration: 1, rotate: 360, scrollTrigger: { trigger: "#page2 #box", scroller: "body", markers: true, start: "top 60%", end: "top 30%", scrub: 5, pin: true // Pins the box during the animation } });
Enter fullscreen mode Exit fullscreen mode

Pinning locks an element in place while it animates, creating an engaging effect.

5. Moving Elements Horizontally 

gsap.to("#page2 h1", { transform: "translateX(-300%)", // Moves out of the viewport to the left scrollTrigger: { trigger: "#page2", scroller: "body", start: "top 0%", end: "top -100%", scrub: 5, pin: "#page2" // Pins the entire page section } });
Enter fullscreen mode Exit fullscreen mode

This moves the heading horizontally across the screen, synced with the scroll.

6. Page-Specific Animations

Page 1 Heading: 

gsap.from("#page1 h1", { opacity: 0, delay: 1, duration: 1, scale: 0.2, yoyo: true // Reverses the animation on repeat });
Enter fullscreen mode Exit fullscreen mode

Page 3 Heading: 

gsap.from("#page3 h1", { opacity: 0, color: "#000", // Ensures the text starts in black delay: 1, duration: 1, scale: 0.2, yoyo: true, scrollTrigger: { trigger: "#page3", scroller: "body", start: "top 60%", end: "top 30%", scrub: 5 } });
Enter fullscreen mode Exit fullscreen mode

These animations introduce visual flair as users scroll through different sections.

🔍 Key Learnings

  1. Using scrollTrigger:
    • Attach animations to scrolling.
    • Configure start and end points to control animation timing.
  2. Pinning and Scrubbing:
    • Pinning freezes an element during animation.
    • Scrubbing syncs the animation with scroll progress.
  3. Debugging with Markers:
    • Use markers: true for debugging during development.

📌 Final Notes

Day 2 introduced you to the magic of ScrollTrigger and how GSAP animations can respond dynamically to user scroll actions. Whether it’s pinning, scrubbing, or triggering animations at precise moments, ScrollTrigger is a game-changer for creating immersive web experiences.

Feel free to check out the live demo and code:

Stay tuned for Day 3, where we’ll explore even more advanced GSAP features. Happy animating! 🎉

Top comments (0)