domains / families / design / animation-systems

animation-systems

separate

Use when designing or implementing product-grade web motion like Stripe, Linear, Apple, and Vercel. Covers motion principles, easing/duration defaults, choreography patterns, scroll/hover interactions, performance, accessibility (reduced motion), and implementation guidance.

When to use

• designing product-grade web motion
• implementing web motion
• motion principles
• easing and duration defaults
• choreography patterns
• scroll and hover interactions
• performance optimization
• accessibility and reduced motion

When not to use

• heavy 3D animation unless it is the hero
• elastic or bounce easing for serious product UI
• animating layout properties like width, height, top, or left

Skill page

Source