Component Motion Animation

Web component animation.

Framer Motion

• Framer Motion
• Motion Primitives
• React Magic Motion
• Variant Vault

Context

• Components — Where animated components live in the stack
• Component-Driven Development — Design methodology that governs motion tokens
• Browser APIs — Web Animation API and requestAnimationFrame underneath

Articles

• Building an interactive 3D event badge / t3.gg Review

Questions

When does animation improve usability and when does it just slow things down?

• What frame rate threshold makes a transition feel broken instead of smooth?
• How do you animate without triggering layout reflow on every frame?
• When does CSS animation beat a JavaScript animation library?