❮ Previous Next ❯

ScrollTrigger .isActive Property

  •  Learn how to check if a ScrollTrigger is currently active using .isActive and build smart scroll-based UI behaviors.

  • Introduction

    Sometimes you need to know whether a section is currently active on scroll or not.

    GSAP ScrollTrigger provides the .isActive property to check if the scroll position is between start and end.

    Why .isActive is useful

    • Highlight active sections

    • Trigger UI changes only when section is visible

    • Control navigation, headers, or indicators

  •  What is .isActive?

    .isActive is a boolean value.

    ValueMeaning
    trueScrollTrigger is active
    falseScrollTrigger is not active
  •  A ScrollTrigger becomes active after start and before end.

Basic Syntax 

ScrollTrigger.create({
  trigger: ".section",
  start: "top center",
  end: "bottom center",
  onUpdate: (self) => {
    console.log(self.isActive);
  }
});
Lesson image

Detect Active Section 

ScrollTrigger.create({
  trigger: ".box",
  start: "top 80%",
  end: "bottom 20%",
  onUpdate: (self) => {
    if (self.isActive) {
      console.log("Box is active");
    }
  }
});

Add Class When Section is Active 

ScrollTrigger.create({
  trigger: ".section",
  onUpdate: (self) => {
    document
      .querySelector(".section")
      .classList.toggle("active", self.isActive);
  }
});

Change Navbar Based on Active Section 

ScrollTrigger.create({
  trigger: ".hero",
  start: "top top",
  end: "bottom top",
  onUpdate: (self) => {
    gsap.to(".navbar", {
      backgroundColor: self.isActive ? "#000" : "transparent"
    });
  }
});

  • Where .isActive Works Best

    Use CaseExample
    Section highlightActive menu item
    UI changesNavbar style
    AnimationsPlay only when active
    Logic checksConditional triggers
❮ Previous Next ❯