gsap trained

the learned layer for the gsap guru: tweens, timelines, and scroll binding that revert when their owner does.

mental model

GSAP owns imperative web motion: a tween changes targets, a timeline coordinates tweens, ScrollTrigger binds a timeline to scroll, and framework code owns setup and cleanup. gsap.matchMedia() reverts animations created in a handler when its condition stops matching. Official source

examples

const mm = gsap.matchMedia();
mm.add('(prefers-reduced-motion: no-preference)', () => {
  gsap.from('.card', { opacity: 0, y: 12, duration: 0.2 });
});
// call mm.revert() when the owning surface unmounts

best practices

Register each plugin before use.
Scope selectors and own cleanup with the component.
Prefer transforms and opacity, then measure before optimizing.

strengths

GSAP excels at choreography, responsive setup, and scroll-bound motion.

weaknesses / pain points

Mutable timelines and selectors can outlive a component; scroll motion needs reduced-motion and keyboard-accessible paths.

gotchas

A match-media handler can run again after a breakpoint transition. Official source
Transformed ancestors can affect ScrollTrigger pinning; inspect live layout. Official source

known bugs

No version-specific defect is recorded. Add release, reproduction, issue, and workaround only when observed.

troubleshooting

symptom	root cause	fix
duplicate motion after resize	responsive setup was not reverted	own one matchMedia instance and call `revert()`
motion survives navigation	component cleanup is missing	use the framework guide's scoped cleanup
pin jumps	ancestor changes fixed-position behavior	remove the conflicting transform where possible, then retest

practiced cases

The matchMedia lifecycle and the ScrollTrigger registration and pinning guidance here follow the official GSAP docs; no site runtime was exercised for them.

Read the gsap guide.