❮ Previous Next ❯

ScrollTrigger .direction Property

  • Learn how to detect scroll up and scroll down using ScrollTrigger .direction and create direction-based animations

  • Introduction

    In many modern websites, animations behave differently when scrolling up or down.

    GSAP ScrollTrigger provides a .direction property to detect:

    • ⬇️ Scrolling down

    • ⬆️ Scrolling up

    This helps you:

    • Hide headers on scroll down

    • Show headers on scroll up

    • Play different animations based on scroll direction

  •  Basic Concept of .direction

    The .direction property tells which way the user is scrolling.

    ValueMeaning
    1Scrolling DOWN
    -1Scrolling UP

    📌 .direction is accessed inside ScrollTrigger callbacks like onUpdate.

Lesson image

Basic Syntax 

ScrollTrigger.create({
  trigger: ".section",
  onUpdate: (self) => {
    console.log(self.direction);
  }
});

  • What happens here?

    • self.direction gives scroll direction

    • Logs 1 or -1 while scrolling

Detect Scroll Direction 

ScrollTrigger.create({
  onUpdate: (self) => {
    if (self.direction === 1) {
      console.log("Scrolling Down");
    } else {
      console.log("Scrolling Up");
    }
  }
});

Hide Header on Scroll Down 

ScrollTrigger.create({
  start: 0,
  end: "max",
  onUpdate: (self) => {
    if (self.direction === 1) {
      gsap.to(".header", { y: -100 });
    } else {
      gsap.to(".header", { y: 0 });
    }
  }
});

Change Animation Direction 

gsap.to(".box", {
  x: 300,
  scrollTrigger: {
    trigger: ".box",
    onUpdate: (self) => {
      gsap.to(".box", {
        rotation: self.direction === 1 ? 360 : 0
      });
    }
  }
});

  • Parameters Related to Direction

    PropertyDescription
    onUpdateFires on every scroll update
    self.directionReturns scroll direction
    start / endControl trigger range
    scrubSync animation with scroll

  • Common Mistakes

    1. ❌ Using .direction outside ScrollTrigger

    2. ❌ Expecting direction inside normal GSAP animation

    3. ❌ Forgetting ScrollTrigger.create()

    4. ❌ Heavy animations inside onUpdate (performance issue)

    5. ❌ Not limiting trigger range

❮ Previous Next ❯