DEV Community

Cover image for Day 2: Exploring GSAP ScrollTrigger and Advanced Animations πŸš€
Ashish prajapati
Ashish prajapati

Posted on

3

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

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more