❮ Previous

GSAP Observer Plugin (Scroll, Touch & Wheel Control)

  • Observer plugin lets you listen to scroll, wheel, touch, and pointer interactions in a clean and consistent way.

  • Introduction

    Observer is a GSAP plugin that lets you listen to user interactions such as:

    • Mouse wheel

    • Scroll direction

    • Touch swipes

    • Pointer movements

    Instead of manually handling many browser events, Observer gives you one clean API.

    Observer is an official plugin from GreenSock GSAP.

  • What Problem Does Observer Solve?

    Without Observer:

    • Multiple event listeners (wheel, touch, pointer)

    • Different behavior across devices

    • Complex logic for direction & speed

    With Observer:

    • Unified event handling

    • Built-in direction detection

    • Clean callbacks for gestures

    👉 Think of Observer as “Scroll & gesture controller”.

Installation / Setup 

<script src="https://unpkg.com/gsap@3/dist/gsap.min.js"></script>
<script src="https://unpkg.com/gsap@3/dist/Observer.min.js"></script>
gsap.registerPlugin(Observer);


Observer.create({
  target: window,
  type: "wheel,touch",
  onUp: () => console.log("Scroll Up"),
  onDown: () => console.log("Scroll Down")
});

  • Parameters / Options

    OptionMeaningExample
    targetElement to observewindow
    typeEvent types"wheel,touch,pointer"
    onUpScroll/swipe up() => {}
    onDownScroll/swipe down() => {}
    onLeftSwipe left() => {}
    onRightSwipe right() => {}
    toleranceGesture sensitivity10
    preventDefaultStop native scrolltrue

Detect Scroll Direction 

Observer.create({
  target: window,
  type: "wheel",
  onUp() {
    console.log("Scrolling Up");
  },
  onDown() {
    console.log("Scrolling Down");
  }
});

Section-Based Scroll Control 

Observer.create({
  type: "wheel,touch",
  preventDefault: true,
  onDown() {
    gsap.to(window, { scrollTo: "+=100vh" });
  },
  onUp() {
    gsap.to(window, { scrollTo: "-=100vh" });
  }
});

Animate on Gesture 

Observer.create({
  type: "wheel",
  onDown() {
    gsap.to(".box", { y: "+=100" });
  },
  onUp() {
    gsap.to(".box", { y: "-=100" });
  }
});

  • Best Practices

    • Use Observer for gesture-driven UI

    • Combine with ScrollToPlugin for full-page scroll

    • Adjust tolerance for better UX

    • Disable Observer when not needed

  • Comparison

    ToolBest Use
    ObserverScroll & gesture detection
    ScrollTriggerScroll position animation
    addEventListenerLow-level handling
    IntersectionObserverVisibility detection

  • Quick Summary

    • Observer listens to user gestures

    • Works with scroll, wheel, touch, pointer

    • Simplifies interaction logic

    • Ideal for full-page scroll & sliders

    • Beginner-friendly and powerful

❮ Previous