Welcome toDay 2 of the GSAP learning series! In this session, we'll dive into the world ofScrollTrigger, 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 initiallyduration:1,// Animation duration is 1 seconddelay:1,// Starts after a 1-second delayrotate: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 animationscroller:"body",// Scroll containermarkers:true,// Visual markers for debuggingstart:"top 60%",// Animation starts when the top of the element reaches 60% of the viewportend:"top 30%",// Animation ends at 30% of the viewportscrub:5// Smoothens animation over 5 seconds}});

This code usesScrollTrigger 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 transparentduration:1,x:500,// Moves in from the rightscrollTrigger:{trigger:"#page2 h1",scroller:"body",markers:true,// Debugging markersstart:"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 leftscrollTrigger:{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 leftscrollTrigger:{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 blackdelay: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. UsingscrollTrigger:
   • 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:
   • Usemarkers: true for debugging during development.

📌 Final Notes

Day 2 introduced you to the magic ofScrollTrigger 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 forDay 3, where we’ll explore even more advanced GSAP features. Happy animating! 🎉