Verify animation performance

Animation Performance & Verification

Smooth motion requires staying within the frame budget ($16.6\text{ms}$ at 60Hz, $8.3\text{ms}$ at 120Hz ProMotion) while keeping main-thread input responsiveness (INP) crisp and GPU memory bounded.

Eliminating Layout Thrashing & Paint Bottlenecks

1. Batch DOM reads before DOM writes:
   • Reading layout properties (offsetWidth, getBoundingClientRect(), scrollTop, getComputedStyle()) immediately after mutating styles forces a synchronous browser reflow. Perform all measurements in a single read pass before applying style mutations or scheduling writes inside requestAnimationFrame.
2. Disciplined GPU layer promotion (will-change):
   • Never apply will-change: transform, opacity globally (* or hundreds of list items), which exhausts GPU VRAM (especially on mobile Safari and high-DPI displays).
   • Apply will-change only to elements actively animating or about to animate, and remove it when the animation settles if layer count is high.
   • Watch out for expensive paint properties: animating large blur() filters, box-shadow, or mask-image repaints textures every frame. Instead, pre-render blurred shadows onto a pseudo-element (::after) and animate only the pseudo-element's opacity and transform.

Visibility Lifecycle & Resource Cleanup

Never waste CPU/GPU cycles animating elements the user cannot see:

• Offscreen pausing (IntersectionObserver): Pause continuous requestAnimationFrame loops, Canvas/WebGL renderers, SVG loops, and video/timeline playback as soon as the container leaves the viewport (!entry.isIntersecting).
• Background tab suspension (visibilitychange): Pause timers and custom rAF delta clocks on document.hidden === true, and clamp deltaTime (Math.min(dt, 0.05)) on resume so physics or particle simulations do not explode after a 10-minute background pause.
• Deterministic teardown on unmount:
  • Cancel active requestAnimationFrame IDs, AbortController listeners, ResizeObserver, and IntersectionObserver instances.
  • Revert animation contexts (ctx.revert(), ScrollTrigger.kill(), animation.cancel()) and dispose WebGL geometries, materials, textures, and render targets.

Browser Verification Checklist

Verify every significant animation against concrete conditions before handoff:

1. Input & interruption stress test: Rapidly hover/unhover, click repeatedly mid-transition, press Escape, and trigger browser Back/Forward during the animation.
2. Viewport & mid-page load test: Reload the page while scrolled halfway down a scroll-triggered scene; resize across mobile (375px) and desktop (1440px+) breakpoints; test both touch/trackpad and wheel scrolling.
3. Reduced-motion & keyboard walkthrough: Toggle prefers-reduced-motion: reduce and navigate the entire scene using only Tab, Shift+Tab, Enter, Space, and arrow keys.
4. Performance profiling: Inspect Chrome DevTools Performance / Rendering tracks (Layout Shift regions, Paint flashing, Frame timing, and Heap/GPU memory after 5 mount/unmount cycles).