Chapter 142: Performance & Platform Notes

Core Idea

A curated set of technical notes from Motion's blog (the "magazine") that carry lasting engineering guidance, separate from product announcements and interviews which are excluded from this skill as non-reference content.

Key Concepts

• Hover detection at speed: fast pointer movement can skip over small hover targets entirely; robust hover detection needs a technique borrowed from game development (swept collision detection along the pointer's path), not a plain point-in-rect check.
• GSAP easing on WAAPI: the native Web Animations API only ships CSS timing functions, but GSAP-style custom eases can be converted into a WAAPI-compatible easing function so hardware-accelerated animations keep GSAP's easing curves.
• Web animation performance tiers: transform and opacity are the fastest properties to animate (compositor-only); layout- and paint-triggering properties (width, top, box-shadow, etc.) are progressively slower and should be avoided in hot animation loops.
• requestAnimationFrame throttling: Safari and Firefox can throttle requestAnimationFrame in specific situations (e.g. backgrounded/inactive tabs, some iframe contexts), which shows up as janky JS-driven animations unrelated to your own code.
• View Transitions API gaps: the native View Transitions API can animate transitions the DOM otherwise can't, but has rough edges (no cross-fade control, coarse scoping); Motion's animateView() wraps it to smooth those over.
• React's experimental view transition API: React has an experimental API building on the browser's View Transitions API for coordinating transitions across renders, still evolving and not yet stable.
• CSS vs JS animation trade-off: native CSS has closed the gap with JS animation libraries on several fronts (basic transitions, some entry/exit cases), but a JS library like Motion still wins for gesture-driven, physics-based, and cross-browser-consistent animation.

Key Takeaways

1. Prefer transform/opacity for any animation running every frame; anything else risks layout/paint cost.
2. Don't assume requestAnimationFrame fires at a steady rate in every browser/tab state, build animations that tolerate frame drops.
3. Reach for native CSS first for simple cases; reach for Motion when you need gestures, springs, or cross-element orchestration CSS can't express.

Connects To

• Transitions, Keyframes & Variants: the performance guidance here applies directly to how transitions are authored.
• Scroll-driven Effects: scroll-linked animation is especially sensitive to the performance tiers described here.