❮ Previous Next ❯

ScrollTrigger scroller Property

  • Learn how to animate elements inside custom scroll containers using GSAP ScrollTrigger scroller property.

  • Introduction

    By default, GSAP ScrollTrigger listens to the browser window scroll.

    But many modern websites use:

    • Scrollable containers

    • Smooth scrolling wrappers

    • Fixed layouts with internal scroll areas

    For these cases, ScrollTrigger provides the scroller property.

  •  What is scroller?

    scroller tells ScrollTrigger which element should be treated as the scrolling container instead of the window.

Default behavior 

scroller: window

Custom behavior 

scroller: ".scroll-container"

Basic Syntax 

gsap.to(".box", {
  y: 100,
  scrollTrigger: {
    trigger: ".box",
    scroller: ".scroll-container"
  }
});

HTML Setup Example 

<div class="scroll-container">
  <section class="box"></section>
  <section class="box"></section>
</div>


.scroll-container {
  height: 100vh;
  overflow-y: scroll;
}

Pin Inside Scroll Container 

ScrollTrigger.create({
  trigger: ".panel",
  scroller: ".scroll-container",
  start: "top top",
  end: "+=300",
  pin: true
});

Progress Tracking in Custom Scroller 

ScrollTrigger.create({
  trigger: ".content",
  scroller: ".scroll-container",
  start: "top top",
  end: "bottom bottom",
  onUpdate: (self) => {
    gsap.to(".progress", {
      scaleX: self.progress,
      transformOrigin: "left"
    });
  }
});

  • When to Use scroller

    ScenarioUse scroller
    Full page scroll❌ No
    Internal scroll div✅ Yes
    Dashboard layout✅ Yes
    Smooth scroll wrapper✅ Yes
    Mobile app-like UI✅ Yes
❮ Previous Next ❯