Optimize Web Animations

When to use this skill

• The user asks to make animations performant, pause offscreen animations, or repeat the "only play in view" optimization on a React/Vite/Next/frontend page.
• The user reports memory leaks, pages that slow down the computer over a long session, or wants long-lived resources (RAF loops, listeners, observers, timers, GSAP tweens, WebGL objects) audited and released.
• The user wants janky scrolling fixed or CPU/GPU use reduced from CSS animations, canvas/WebGL requestAnimationFrame loops, marquees/tickers, skeleton loaders, or GSAP/Three/Matter effects.
• The work requires a measured baseline-then-fix loop in the browser (Codex Browser preferred), gating motion with IntersectionObserver/is-offscreen classes, and verifying with offscreenRunningCount, DOM/canvas counts, and route-cycle stability rather than screenshots alone.
• The fix needs source-level cleanup discipline: clearing timers, cancelling RAF, disconnecting observers, removing listeners, and disposing Three/WebGL/GSAP resources on unmount.
• Not for general performance-artifact triage (deciding what a trace, query plan, load-test result, or CWV/Lighthouse report means, or which bottleneck to tune first across latency/throughput/memory/bundle-size) — route that to performance-optimization instead; use this skill only once the target is already known to be animation/motion-related frontend work.

Core Rule

Measure the real page before editing. The goal is not to remove motion; it is to make offscreen work stop, visible motion resume correctly, and route/unmount cleanup release long-lived resources.

Use Codex Browser when available, especially for localhost pages. Do not use Chrome unless the user explicitly asks for it.