Which animation to use, where
Use the listed default whenever the situation occurs. Do not invent a new animation for a situation that has one.
| Situation | Use | Tokens / timing | Do not |
|---|---|---|---|
| A whole page or panel is loading | LogoLoader (box loop), 72 px, centred, with a status label |
4400 ms loop | a generic spinner, a progress bar for unknown time |
| A button is busy (save, submit) | BoxSpinner mono in the button, aria-busy="true" on it |
16 to 24 px, currentColor |
change the button width; show a spinner and a label that disagree |
| Inline field, table row or small area is loading | BoxSpinner (20 px) or BoxArt sized to the placeholder, plus a Skeleton shape for lists |
same loop | skeleton shimmer sweeps; spinners on every row at once |
| Route change | TransitionLink / useTransitionNavigate (View Transition on [data-sw-main] only) |
old out 90 ms, new in --sw-dur-slow + 8 px rise |
animate the sidebar or top bar; block navigation on the animation |
| Sidebar or tab section switch | useSlideIndicator (one box sliding) |
transform over --sw-dur-base, --sw-ease-standard |
repaint each item’s highlight separately |
| Open or close a dialog, drawer, menu, popover, toast | usePresence + sw-fx-pop (dialog), sw-fx-drawer (side panel), sw-fx-menu, sw-fx-toast, sw-fx-fade (scrim) |
enter 120 to 240 ms decelerate, exit 120 to 180 ms accelerate | unmount instantly without the exit; leave a closing layer focusable (it must be inert) |
| Expand or collapse a group | Collapse / Disclosure (sw-collapse) |
grid rows 0fr to 1fr, 180 ms open, 120 ms close | animate height |
| List or dashboard items first appear | StaggerGroup (first eight children) |
200 ms, 30 ms apart, 6 px | stagger long lists, or re-run on every refetch |
| Scroll reveals on marketing pages | data-reveal blocks, once |
640 ms, opacity and transform | reveal on hover; replay on scroll back up; hide content from reduced-motion users |
| Hover on cards, buttons, links, rows | colour only | 120 ms, --sw-ease-standard |
translate, scale, lift or shadow on hover |
| The Space Works logo | AnimatedLogoMark (folds shut and opens back on hover and focus-visible) |
2200 ms once: fold 600 ms + opening 1600 ms | loop it; animate a tenant logo; animate on touch |
| Success or confirm feedback | status toast (sw-fx-toast); card verify stamp; return confetti only with delight on |
180 ms in, 120 ms out; stamp 420 ms | confetti in staff or kiosk flows; sound |
| Empty state | still artwork or Patch frame, no loop | none (Patch frame 0) | looping mascots in staff chrome |
| Kiosk and TV screens | fades only (.sw-kiosk, .sw-tv zero the distances); display slide fade 400 ms |
no slide, scale or loops | anything that keeps repainting while idle |
| Theme switch | revealTheme (circle growing from the toggle); copy-paste template in motion/theme-reveal/ |
720 ms | animate individual surfaces separately |
What never animates: layout properties, text content swaps in forms, validation errors (they appear, they do not bounce), focus rings, data tables on sort or filter, anything while a person is typing.
Part of Motion in Space Works, published from docs/motion.md. Edit it there.