Marcos Paulo
64 lines
2.4 KiB
Markdown
64 lines
2.4 KiB
Markdown
# Rule: animation
|
||
|
||
This is an editorial-print design. Motion is punctuation, not decoration.
|
||
|
||
## Budget
|
||
|
||
- **Purpose or nothing.** Motion may signal a state change, direct attention to
|
||
what just changed, or smooth a layout shift. Nothing else.
|
||
- Duration: **150–250ms** for UI feedback, up to 400ms for a page transition.
|
||
Longer reads as sluggish; shorter reads as a glitch.
|
||
- Easing: `cubic-bezier(.2,0,0,1)` for entrances, `ease-out` for exits. Never
|
||
`linear` for anything a person watches. Never bounce/elastic — wrong register
|
||
for this design.
|
||
- One thing moves at a time. Staggered cascades of cards are a template default;
|
||
this site has a point of view and does not do them.
|
||
|
||
## `prefers-reduced-motion` is mandatory
|
||
|
||
Several current stylesheets already honour it. Every new animation must:
|
||
|
||
```css
|
||
@media (prefers-reduced-motion: reduce) {
|
||
* {
|
||
animation-duration: 0.01ms !important;
|
||
animation-iteration-count: 1 !important;
|
||
transition-duration: 0.01ms !important;
|
||
scroll-behavior: auto !important;
|
||
}
|
||
}
|
||
```
|
||
|
||
Reduced motion means _reduced_, not _broken_: the end state must still be
|
||
correct and the interface still usable. Test it — in DevTools, Rendering →
|
||
Emulate `prefers-reduced-motion`.
|
||
|
||
## Performance
|
||
|
||
- Animate **`transform` and `opacity` only.** They composite on the GPU.
|
||
Animating `width`, `height`, `top`, `left`, or `margin` forces layout on every
|
||
frame and will show up as a failed INP.
|
||
- `will-change` only on an element about to animate, removed after. Leaving it
|
||
on permanently costs memory and can _hurt_ performance.
|
||
- Prefer CSS transitions. Reach for the Web Animations API only for sequencing
|
||
that CSS cannot express. Do not add an animation library — it is a runtime
|
||
dependency on a site whose thesis is having none.
|
||
- INP budget is **200ms**. An animation that delays interaction response fails.
|
||
|
||
## Astro view transitions
|
||
|
||
If page transitions are wanted, use Astro's `<ClientRouter />`. It is the only
|
||
sanctioned motion dependency, and it must:
|
||
|
||
- degrade cleanly with JS disabled (it does — full navigation)
|
||
- respect `prefers-reduced-motion`
|
||
- not break the review desk's query-param deep links or browser back/forward
|
||
|
||
## Accessibility
|
||
|
||
- Never animate anything that conveys information on its own. Motion is
|
||
redundant reinforcement.
|
||
- Nothing flashes more than three times per second.
|
||
- Focus must stay visible throughout a transition, and focus order must not
|
||
change because of one.
|