❮ Previous Next ❯

GSAP . end

  • Learn how ScrollTrigger .end defines where a scroll animation stops and how to control animation length properly.

  • Introduction

    In scroll-based animations, it’s important to know when an animation should stop.

    The .end property in GSAP ScrollTrigger defines the point where the scroll-triggered animation ends.

    Why .end is important

    • Controls animation duration on scroll

    • Helps sync animations with page sections

    • Essential for scrub and pin effects

  • Basic Concept of .end

    The .end property works together with .start.

    • start → when animation begins

    • end → when animation finishes

    📌 Without end, GSAP uses a default value.

Basic Syntax 

gsap.to(".box", {
  x: 300,
  scrollTrigger: {
    trigger: ".box",
    start: "top 80%",
    end: "top 30%"
  }
});

  • What this means

    • Animation starts when .box reaches 80% viewport

    • Animation ends when .box reaches 30% viewport

Using Viewport Positions 

end: "bottom top"
  • ValueMeaning
    topTop of trigger element
    centerCenter of trigger
    bottomBottom of trigger
    top / center / bottomViewport positions

Using Scroll Distance 

end: "+=300"

End at Another Element 

end: ".footer"
  • Practical Examples

Scroll-Controlled Animation 

gsap.to(".bar", {
  width: "100%",
  scrollTrigger: {
    trigger: ".section",
    start: "top center",
    end: "bottom center",
    scrub: true
  }
});

Pin Section Until End 

ScrollTrigger.create({
  trigger: ".panel",
  start: "top top",
  end: "+=400",
  pin: true
});

Animate Between Two Sections 

gsap.fromTo(".image",
  { scale: 0.8 },
  {
    scale: 1,
    scrollTrigger: {
      trigger: ".section1",
      end: ".section2",
      scrub: true
    }
  }
);
❮ Previous Next ❯