Flint Foundations
Motion
Short, purposeful motion that shows what changed. Every animation has a reduced-motion version.
Duration
| Token | Value |
|---|---|
--duration-instant | 0ms |
--duration-fast | 120ms |
--duration-base | 200ms |
--duration-slow | 320ms |
Easing
| Token | Curve | Use |
|---|---|---|
--ease-standard | cubic-bezier(0.2, 0, 0, 1) | Moving between states |
--ease-entrance | cubic-bezier(0, 0, 0.2, 1) | Things arriving |
--ease-exit | cubic-bezier(0.4, 0, 1, 1) | Things leaving |
Reduced motion
Gate every non-essential animation on prefers-reduced-motion, and name in the design what each animation becomes when it is off. On iOS, Flint.Motion.animation(_:duration:reduceMotion:) returns no animation when Reduce Motion is on.
CSS
.drawer {
transition: transform var(--duration-base) var(--ease-entrance);
}
@media (prefers-reduced-motion: reduce) {
.drawer { transition: none; }
}