Chapter 366: ScrollTrigger.observe

Core Idea

Super-flexible, unified way to sense meaningful events across all (touch/mouse/pointer) devices without wrestling with all the implementation details. Trigger simple callbacks like onUp, onDown, onLeft, onRight, onChange, onHover, onDrag, etc.

Key Concepts

• config: Object

Code Examples

ScrollTrigger.observe({
  target: window, // can be any element (selector text is fine)
  type: "wheel,touch", // comma-delimited list of what to listen for ("wheel,touch,scroll,pointer")
  onUp: () => previous(),
  onDown: () => next(),
});

• What it demonstrates: typical usage of ScrollTrigger.observe in a GSAP animation.

Key Takeaways

1. config: Object

Connects To

• Observer.create(): see ch298 — Observer.create
• Observer docs: related GSAP concept
• ScrollTrigger.normalizeScroll(): see ch365 — ScrollTrigger.normalizeScroll