Motion
Ason Motion is the shared vocabulary of movement: short durations, calm curves, springs without overshoot. On routine work screens motion never draws attention; it only shows what came from where.
Duration
The longest duration is the upper limit. An exit is always shorter than its entrance.
--ason-motion-duration-instant | 0 ms | State change, no animation |
--ason-motion-duration-quick | 70 ms | Press feedback, toggle |
--ason-motion-duration-fast | 110 ms | Fade, exit, opacity under reduced motion |
--ason-motion-duration-base | 150 ms | Small element entrance, hover color |
--ason-motion-duration-relaxed | 240 ms | Popover entrance, scrim, notification |
--ason-motion-duration-slow | 400 ms | Large surface, page — upper limit |
Easing
The single shared curve is the standard curve; entrance and exit are its twins. The emphasized curve is for rare moments only.
If your reduced-motion preference is on, the demos finish instantly, as the rule requires.
standard
cubic-bezier(0.2, 0, 0.38, 0.9)In-place change: hover, state, reordering
entrance
cubic-bezier(0, 0, 0.38, 0.9)Entering element, decelerates to rest
exit
cubic-bezier(0.2, 0, 1, 0.9)Leaving element, accelerates away
emphasized
cubic-bezier(0.4, 0.14, 0.3, 1)Rare, emphasized moment — not for routine work
Spring
Springs are used only for position and scale; opacity and color never spring. Bounce is zero: motion never overshoots its target.
smooth
duration 0.4s · bounce 0Bottom sheet on phones
snappy
duration 0.25s · bounce 0Tab indicator, small movement
Distance and scale
Travel distance stays small; a full-height bottom sheet is the only exception.
--ason-motion-distance-xs | 4px |
--ason-motion-distance-sm | 8px |
--ason-motion-distance-md | 16px |
--ason-motion-distance-lg | 24px |
--ason-motion-travel-sheet | 100% |
--ason-motion-scale-pop | 0.96 |
--ason-motion-stagger | 25 ms |
Reduced motion
- When “reduce motion” is on in the operating system, there is no position or scale movement: distance is zero and scale is one.
- Opacity transitions stay, with a short duration, so it is still clear that an element appeared.
- All other transitions drop to almost zero duration (not zero, so the transition end event still fires and flows that wait for it do not stall).
What may animate
Moving surfaces (panel, scrim, menu)
opacitytransformtranslatescalerotate
Small controls (adds the color family)
colorbackground-colorborder-coloroutline-colortext-decoration-colorfillstroke
Never
allbox-shadowfilterbackdrop-filter-webkit-backdrop-filterwidthheighttopleftrightbottommarginpaddingfont-sizeborder-radius
The duration scale and curve values are inspired by the “productive / expressive” approach of the IBM Carbon Design System motion guidelines (Apache-2.0); no code was copied. The spring model follows the math of Apple’s WWDC 2023 “Animate with springs” session.