Day 2: Exploring GSAP ScrollTrigger and Advanced Animations 🚀

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
});

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
    }
});

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
    }
});

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%",
    }
});

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
    }
});

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
    }
});

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
});

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
    }
});

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:

• Project Link: Day 2 GSAP Project
• GitHub Repository: Anticoder03/gsap

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