Chapter 286: Observer (Overview)

Core Idea

A lightweight unified interface for detecting user interaction events (wheel, touch, pointer, scroll) across devices, without dealing with each event type's own quirks — often used as the input layer behind custom scroll-jacking or gesture-driven animations.

Code Examples

gsap.registerPlugin(Observer);

Observer.create({
  target: window,
  type: "wheel,touch,pointer",
  onUp: () => console.log("up"),
  onDown: () => console.log("down"),
});

Key Takeaways

1. type controls which underlying event categories are watched ("wheel", "touch", "pointer", "scroll"), each with different default behavior around when deltas are tracked.
2. ScrollTrigger uses Observer internally for some of its normalized-scroll behavior.

Connects To

• ScrollTrigger: often the higher-level tool to reach for instead, unless you need Observer's more general/manual gesture detection.
• Draggable: a more specialized tool specifically for making elements draggable, vs. Observer's generic gesture detection.