53 lines
3.8 KiB
Markdown
53 lines
3.8 KiB
Markdown
# Motion and interaction
|
|
|
|
## Character
|
|
|
|
Use fluid, slightly viscous motion that makes work and state legible without moving layout. Avoid bounce, elastic easing, abrupt unmounts, and decorative page choreography.
|
|
|
|
Use `cubic-bezier(0.16, 1, 0.3, 1)` for arrivals and interaction feedback.
|
|
|
|
- hover and press: 180-300ms;
|
|
- popover/tooltip: 90-180ms;
|
|
- panel reveal: 420-600ms;
|
|
- state color and glow: 600-900ms;
|
|
- progress or numeric tween: about 900ms.
|
|
|
|
## State controls
|
|
|
|
- Transition inactive gray to the route accent slowly when a service becomes active, and back to gray when stopped.
|
|
- Animate icon color, localized light, and SVG shadow together while keeping the hit target fixed.
|
|
- Use a short `scale(0.97)` press followed by a slower release.
|
|
- Show checking and running work with restrained motion that finishes cleanly; do not stop spinners or cycles at arbitrary coordinates.
|
|
|
|
## Changing content
|
|
|
|
- Crossfade alternate labels inside one fixed slot. Do not replace text in normal flow when its length can move the interface.
|
|
- Animate only what changed. Unchanged labels, icons, surrounding rows, and route nodes stay fixed.
|
|
- Update data immediately when it arrives; finishing a decorative cycle must not delay the result.
|
|
- Repeated background polling updates quietly and does not replay entrance choreography.
|
|
- Keep mode selectors outside the keyed content they replace. Let the new content enter with a short directional fade and blur while focus remains on the selected mode.
|
|
- For user-triggered sorting, fade and lightly blur the reordered list as one surface; row stagger stays bounded and saved data order does not change.
|
|
|
|
## Anchored disclosures
|
|
|
|
- Keep the trigger fixed while its surface opens and closes. Position its resting hit area with grid, flex, or logical inset properties; never rely on a placement `transform` that hover or active feedback can replace.
|
|
- Give the surface, background, copy, and actions one origin and one timeline. They should emerge from the trigger together; do not make the background pop before the trigger or appear after the content.
|
|
- Keep animated disclosure content mounted through entry and exit. Gate pointer and keyboard access separately; conditional rendering directly into the final state is not an entrance animation.
|
|
- Design opening and closing together. Preserve visible reverse motion long enough before fading opacity, and keep both directions interruptible under repeated clicks.
|
|
- Let explicit product feedback override the default easing. When a component calls for a slow start followed by acceleration, define a local curve instead of forcing the global ease-out.
|
|
- Compose hover and active feedback without changing the resting position. If transform composition is unavoidable, use separate wrappers, individual transform properties, or shared custom properties and verify every state.
|
|
- Keep decorative sweeps subordinate to state motion, low-opacity, bounded to the surface, and finished cleanly. The disclosure must remain legible without the effect.
|
|
|
|
## Lists and disclosures
|
|
|
|
- Reveal dynamic rows with opacity, light blur, and a small transform.
|
|
- On hover, let a row lift one or two pixels and reveal a restrained local surface/light; keep resting rows visually flat.
|
|
- Animate status dots through color, light, and a small scale change instead of animating a surrounding badge or border.
|
|
- Keep departing rows and disclosures mounted until their exit animation completes; remove immediately under reduced motion.
|
|
- Bound list stagger to 60-100ms and never make interaction latency grow with list length.
|
|
- Tooltips appear quickly above the trigger as independent translucent surfaces and never inherit trigger transforms or filters.
|
|
|
|
## Reduced motion
|
|
|
|
Under `prefers-reduced-motion: reduce`, remove transforms, filters, transitions, and keyframes while preserving final state, focus, contrast, status wording, and all functionality.
|