gsap-scrolltrigger Checked

| Property | Type | Description |

|----------|------|-------------|

| **trigger** | String \| Element | Element whose position defines where the ScrollTrigger starts. Required (or use shorthand). |

| **start** | String \| Number \| Function | When the trigger becomes active. Default "top bottom" (or "top top" if pin: true). |

| **end** | String \| Number \| Function | When the trigger ends. Default "bottom top". Use endTrigger if end is based on a different element. |

| **endTrigger** | String \| Element | Element used for **end** when different from trigger. |

| **scrub** | Boolean \| Number | Link animation progress to scroll. true = direct; number = seconds for playhead to "catch up". |

| **toggleActions** | String | Four actions in order: **onEnter**, **onLeave**, **onEnterBack**, **onLeaveBack**. Each: "play", "pause", "resume", "reset", "restart", "complete", "reverse", "none". Default "play none none none". |

| **pin** | Boolean \| String \| Element | Pin an element while active. true = pin the trigger. Don't animate the pinned element itself; animate children. |

| **pinSpacing** | Boolean \| String | Default true (adds spacer so layout doesn't collapse). false or "margin". |

| **horizontal** | Boolean | true for horizontal scrolling. |

| **scroller** | String \| Element | Scroll container (default: viewport). Use selector or element for a scrollable div. |

| **markers** | Boolean \| Object | true for dev markers; or { startColor, endColor, fontSize, ... }. Remove in production. |

| **once** | Boolean | If true, kills the ScrollTrigger after end is reached once (animation keeps running). |

| **id** | String | Unique id for **ScrollTrigger.getById(id)**. |

| **refreshPriority** | Number | Lower = refreshed first. Use when creating ScrollTriggers in non–top-to-bottom order: set so triggers refresh in page order (first on page = lower number). |

| **toggleClass** | String \| Object | Add/remove class when active. String = on trigger; or { targets: ".x", className: "active" }. |

| **snap** | Number \| Array \| Function \| "labels" \| Object | Snap to progress values. Number = increments (e.g. 0.25); array = specific values; "labels" = timeline labels; object: { snapTo: 0.25, duration: 0.3, delay: 0.1, ease: "power1.inOut" }. |

| **containerAnimation** | Tween \| Timeline | For "fake" horizontal scroll: the timeline/tween that moves content horizontally. ScrollTrigger ties vertical scroll to this animation's progress. See **Horizontal scroll (containerAnimation)** below. Pinning and snapping are not available on containerAnimation-based ScrollTriggers. |

| **onEnter**, **onLeave**, **onEnterBack**, **onLeaveBack** | Function | Callbacks when crossing start/end; receive the ScrollTrigger instance (progress, direction, isActive, getVelocity()). |

| **onUpdate**, **onToggle**, **onRefresh**, **onScrubComplete** | Function | **onUpdate** fires when progress changes; **onToggle** when active flips; **onRefresh** after recalc; **onScrubComplete** when numeric scrub finishes. |

**Standalone ScrollTrigger** (no linked tween): use **ScrollTrigger.create()** with the same config and use callbacks for custom behavior (e.g. update UI from self.progress).

ScrollTrigger.create({
  trigger: "#id",
  start: "top top",
  end: "bottom 50%+=100px",
  onUpdate: (self) => console.log(self.progress.toFixed(3), self.direction)
});

ScrollTrigger.batch()

**ScrollTrigger.batch(triggers, vars)** creates one ScrollTrigger per target and **batches** their callbacks (onEnter, onLeave, etc.) within a short interval. Use it to coordinate an animation (e.g. with staggers) for all elements that fire a similar callback around the same time — e.g. animate every element that just entered the viewport in one go. Good alternative to IntersectionObserver. Returns an Array of ScrollTrigger instances.

• **triggers**: selector text (e.g. ".box") or Array of elements.
• **vars**: standard ScrollTrigger config (start, end, once, callbacks, etc.). Do **not** pass trigger (targets are the triggers) or animation-related options: animation, invalidateOnRefresh, onSnapComplete, onScrubComplete, scrub, snap, toggleActions.

**Callback signature:** Batched callbacks receive **two** parameters (unlike normal ScrollTrigger callbacks, which receive the instance):

1. **targets** — Array of trigger elements that fired this callback within the interval.

2. **scrollTriggers** — Array of the ScrollTrigger instances that fired. Use for progress, direction, or kill().

**Batch options in vars:**

• **interval** (Number) — Max time in seconds to collect each batch. Default is roughly one requestAnimationFrame. When the first callback of a type fires, the timer starts; the batch is delivered when the interval elapses or when **batchMax** is reached.
• **batchMax** (Number | Function) — Max elements per batch. When full, the callback fires and the next batch starts. Use a **function** that returns a number for responsive layouts; it runs on refresh (resize, tab focus, etc.).

ScrollTrigger.batch(".box", {
  onEnter: (elements, triggers) => {
    gsap.to(elements, { opacity: 1, y: 0, stagger: 0.15 });
  },
  onLeave: (elements, triggers) => {
    gsap.to(elements, { opacity: 0, y: 100 });
  },
  start: "top 80%",
  end: "bottom 20%"
});

With **batchMax** and **interval** for finer control:

ScrollTrigger.batch(".card", {
  interval: 0.1,
  batchMax: 4,
  onEnter: (batch) => gsap.to(batch, { opacity: 1, y: 0, stagger: 0.1, overwrite: true }),
  onLeaveBack: (batch) => gsap.set(batch, { opacity: 0, y: 50, overwrite: true })
});

See ScrollTrigger.batch() in the GSAP docs.

ScrollTrigger.scrollerProxy()

**ScrollTrigger.scrollerProxy(scroller, var