Optimizing Frontend Motion Performance
Rule
Measure before removing effects. Preserve the visual idea while stopping work that produces no visible value.
Audit
Search for CSS keyframes, GSAP timelines, requestAnimationFrame, timers, observers, video, canvas/WebGL, physics, large blur/filter use, and event listeners.
Check runtime at top, middle, and lower page plus mobile when relevant. Distinguish CSS animation from JavaScript RAF work.
Fix priorities
- Stop or pause offscreen loops with
IntersectionObserver or visibility state.
- Cancel RAFs, timers, observers, and listeners on unmount.
- Kill GSAP contexts/tweens/timelines during cleanup.
- Dispose Three.js textures, geometries, materials, render targets, and renderer resources.
- Cap device pixel ratio and pause WebGL when hidden/offscreen.
- Avoid per-frame React state and per-frame allocation.
- Reduce heavy blur/filter areas and continuously animated large surfaces.
- Honor
prefers-reduced-motion.
Verification
Re-run the same runtime scenario after changes. Confirm visible animations still work, offscreen loops stop, route cycles do not accumulate canvases/listeners, console remains clean, and production checks pass.
Never
Do not call performance fixed because the build passes, and do not remove all motion merely to make profiling quiet.
1---2name: optimizing-frontend-motion-performance3description: Use when a frontend has janky scrolling, excessive CPU or GPU use, long-session slowdown, offscreen animation work, WebGL or RAF loops, animation-related memory leaks, or costly GSAP effects.4---56# Optimizing Frontend Motion Performance78## Rule9Measure before removing effects. Preserve the visual idea while stopping work that produces no visible value.1011## Audit12Search for CSS keyframes, GSAP timelines, `requestAnimationFrame`, timers, observers, video, canvas/WebGL, physics, large blur/filter use, and event listeners.1314Check runtime at top, middle, and lower page plus mobile when relevant. Distinguish CSS animation from JavaScript RAF work.1516## Fix priorities171. Stop or pause offscreen loops with `IntersectionObserver` or visibility state.182. Cancel RAFs, timers, observers, and listeners on unmount.193. Kill GSAP contexts/tweens/timelines during cleanup.204. Dispose Three.js textures, geometries, materials, render targets, and renderer resources.215. Cap device pixel ratio and pause WebGL when hidden/offscreen.226. Avoid per-frame React state and per-frame allocation.237. Reduce heavy blur/filter areas and continuously animated large surfaces.248. Honor `prefers-reduced-motion`.2526## Verification27Re-run the same runtime scenario after changes. Confirm visible animations still work, offscreen loops stop, route cycles do not accumulate canvases/listeners, console remains clean, and production checks pass.2829## Never30Do not call performance fixed because the build passes, and do not remove all motion merely to make profiling quiet.
jhonatan-oliveiradev