Foundation
MotionTechnical specifications and step-by-step guidance for building and deploying the motion system.
Duration standards
Consistent timing creates rhythm and predictability
Instant
Immediate feedback, micro-interactions
Swift
Hover states, toggles, checkboxes
Quick
Dropdowns, tooltips, simple transitions
Moderate
Page transitions, modals, drawers
Slow
Complex animations, onboarding flows
Deliberate
Celebration, success states, key moments
Easing curves
Easing defines the personality and feel of motion
Entrance
[0.16, 1, 0.3, 1]
Elements appearing (modals, tooltips, dropdowns)
Starts slow, ends fast - feels like sliding into place
Exit
[0.7, 0, 0.84, 0]
Elements disappearing (closing modals, hiding menus)
Starts fast, ends slow - feels like fading away
Standard
[0.4, 0, 0.2, 1]
General transitions, state changes
Balanced acceleration - natural and versatile
Spring
[0.34, 1.56, 0.64, 1]
Playful interactions, success states, delight moments
Overshoots slightly - energetic and bouncy
Transformations
Common transformation properties and their usage
Fade
Scale
Slide
Rotate