Motion
Cascade motion
Section titled “Cascade motion”Choose the duration that matches the visual weight of the surface, then cascade elements in reading order.
| Token | Value | Tailwind utility |
| ----------------- | ----------------------------- | ----------------------------------- |
| Fast duration | 160ms | duration-cascade-fast |
| Standard duration | 200ms | duration-cascade |
| Slow duration | 280ms | duration-cascade-slow |
| Ease out | cubic-bezier(0, 0, 0.58, 1) | ease-cascade |
| Settle distance | 6px | slide-in-from-{direction}-cascade |
| Stagger | 40ms | delay-cascade-stagger |
Stagger multiples are available through delay-cascade-stagger-2, delay-cascade-stagger-3, and delay-cascade-stagger-4.
<div className="duration-cascade-slow ease-cascade animate-in fade-in slide-in-from-top-cascade motion-reduce:animate-none" />Motion components can import the equivalent JavaScript values from stylus-ui/Motion.