Animations

One focused chapter from the Thorbis interface research. 20 rules. Read the research index for every chapter and focused study.

Animations

Motion is restraint. The bar is Emil Kowalski . You Don’t Need Animations (opens in a new tab), animations.dev (opens in a new tab), and the work he shipped on Vercel’s design team. Keyboard-initiated actions never animate. High-frequency surfaces barely do.

Honor prefers-reduced-motion. Wrap motion in @media (prefers-reduced-motion: no-preference) so it is opt-in. Under reduced motion, replace slides and scales with opacity; kill parallax and autoplay. Reduced motion is complete, not decorative.
Keep the result. Remove the movement.
The Motion skill permits an opacity-only alternative. The current Dialog goes further: its entrance is instant when reduced motion is requested.
Inspect the reduced-motion result
Step through a still diagram. Both states remain visible; this is not a timed animation.
Start
The job editor is closed. The Edit sample job button keeps its place.
Result
The editor is open with its title, fields and focus. Reduced motion changes the entrance, not the available work.
Inspecting start: The job editor is closed. The Edit sample job button keeps its place.
This lesson is readable without JavaScript. To inspect a state or read your browser preference, enable JavaScript and reload.
Browser motion preference
Not read yet
Fast token
--motion-fast
Overlay token
--motion-overlay
Curve token
--ease-out
Read the Motion owner Try the Dialog example and source
Reduced motion is a preference, not an incomplete version of the task.
Implementation preference. Prefer CSS. Avoid main-thread JS-driven animations when possible.
- Preference: CSS transitions, then Web Animations API, then JavaScript libraries e.g. motion (opens in a new tab).
Compositor-friendly. Prioritize GPU-accelerated properties (transform, opacity) & avoid properties that trigger reflow (width, height, top, left).
Necessity check. Ask first: should this animate at all? Match motion to how often the user sees it. High-frequency actions (every keystroke, every row hover, ⌘K) are instant. Rauno and Emil independently: command menus used hundreds of times a day become cognitive burden, not delight. Novelty dies. Only animate when it clarifies cause & effect or adds deliberate, rare delight. animations.dev (opens in a new tab) · Frequency & Novelty (opens in a new tab). Emil Kowalski , Rauno Freiberg .
Keep UI transitions within 200ms. The Motion skill owns the timing: 120ms by default, at most 200ms for ordinary web UI. Use its event recipes, and keep frequent keyboard actions instant. If everything animates, nothing stands out.
Read the duration from the token.
A pointer-opened Dialog uses --motion-overlay with --ease-out. The values below are read from this page's styles. Keyboard opening stays instant.
Inspect the Dialog timing
Step through a still diagram. Both states remain visible; this is not a timed animation.
Start
The job editor is closed. A pointer activation can use the existing Dialog entrance recipe.
Result
The editor is ready to use. The recipe uses --motion-overlay; it does not delay the available actions.
Inspecting start: The job editor is closed. A pointer activation can use the existing Dialog entrance recipe.
This lesson is readable without JavaScript. To inspect a state or read your browser preference, enable JavaScript and reload.
Browser motion preference
Not read yet
Fast token
--motion-fast
Overlay token
--motion-overlay
Curve token
--ease-out
Read the Motion owner Try the Dialog example and source
The Motion owner defines event recipes; a duration is not a reason to animate.
Easing fits the subject. Choose easing based on what changes. Prefer a custom ease-out (cubic-bezier(0.23, 1, 0.32, 1)) for entering surfaces. Never ease-in. it delays the first frame the user is watching.
Interruptible. Animations are cancelable by user input. Prefer CSS transitions for interactive state; reserve keyframes for one-shot sequences. If a mistap opens a sheet, the reverse swipe must work on the first frame, not after the entrance finishes. Rauno’s iOS Settings critique. Jakub Krehel : transitions retarget, keyframes do not. Details that make interfaces feel better (opens in a new tab).
Animate icons contextually. When an icon appears because of context, a search result, a status change, fade it. Opacity, a little scale, maybe blur. Not the whole toolbar. Jakub Krehel .
Split and stagger entering elements. A first Showcase entrance may arrive in pieces: title, then copy, then the shot. Follow the Motion recipe for stagger. First paint of a workbench stays still; opening another feed page does not grant a new motion budget. This sequencing lesson comes from Jakub Krehel .
Just arrived
New rows may fade 8px. The first screen stays still.
Exit is quieter than enter. Leaving does not need the same attention as arriving. Opacity, or a slide fully off screen. Do not bounce a sheet out. Jakub Krehel .
Confirm the choice as it leaves. macOS context menus do not animate in. They fade out, and the selected item blinks the accent so you know the click landed. High-frequency menus in Thorbis do the same: instant open, a brief selected flash on close. Don’t scale the menu in. Rauno, “Frequency & Novelty.”
Input-driven. Avoid autoplay; animate in response to actions. Nothing should refuse to stop.
Correct transform origin. Anchor motion to where it physically starts. Popovers scale from their trigger, not the center of the screen.
Never kiss the window. A popover, a menu, a sheet, a toast, they keep a gap from the edge of the viewport. At least 16px, plus the safe area. Touching the chrome of the window looks unfinished. If it would collide, slide it. Do not clip it flush. Same law for the left, the right, the top, the bottom.
Never transition: all. Explicitly list only the properties you intend to animate. all animates layout properties and causes jank.
Scale on press. Tactile confirmation uses scale(0.96). Never below 0.95. Skip it when the motion would be distracting.
Collect
The press is the feedback. No flash of blue from the OS.
Cross-browser SVG transforms. Apply CSS transforms to <g> wrappers & set transform-box: fill-box; transform-origin: center;.
will-change is a last resort. Only transform, opacity, filter — properties the GPU can composite. Never will-change: all. Add it when the first frame stutters. Take it off when the motion is done.
Menus fade. They do not fly. Close a menu with a short fade. Do not translate it off screen. High-frequency menus open instant and confirm the choice as they leave. Sheets may slide from an edge; menus may not. Confirm the choice as it leaves. D-021.

I built this for the dispatcher at 7 a.m., the tech in a crawlspace, and the owner closing the books. Quiet chrome. Precise work. I’m still learning. These are the notes.

Applied bookmark research

Reviewed 2026-09-06. These examples reinforce the existing owners; they do not introduce another visual style or claim the product behavior is implemented. Read the 26-source review and access limits.

Frequent work stays immediate; allowed motion can be interrupted

A small delay repeated through a working day becomes friction, and a transition that restarts from the wrong position disconnects feedback from input.

Apply the existing profile first: Workbench is press-only, Evidence has no motion, and other profiles remain constrained by their owner. Where a transition is already permitted, preserve continuity and the state footprint when input interrupts it.

Thorbis example. Command-menu selection follows the key immediately. A permitted popover opens from its trigger and survives open-close-open without snapping, losing focus, or changing the action label.

Verify. Repeat the interaction rapidly, switch between input methods, and test reduced motion. Compare with the nonanimated version at ordinary task speed. Use existing tokens rather than copying durations or curves from an article.

Do not import. No row stagger in routine work, delayed keyboard highlights, ornamental blur, minimum success delay, or automatic spring-library adoption.

Open the motion skill · Evidence: You Don't Need Animations; 7 Practical Animation Tips; Train Your Judgement; Details that make interfaces feel better

Motion explains the product; it does not become the product

An impressive effect can consume attention without helping a contractor understand what Thorbis does.

Name the product idea a Showcase scene explains. Use representative trade content, keep the next action clear, and compare against a static explanation. Make animation optional to comprehension and task completion.

Thorbis example. A single scene can explain how a completed job becomes an invoice. It should not hide the invoice behind a long sequence, invent product capabilities, or turn routine billing into a celebratory animation.

Verify. Check the initial viewport, static and reduced-motion alternatives, readable copy, reserved media geometry, and the real cost of any proposed asset. Record license and dependency review before reuse.

Do not import. No effect collection imported as a style system, no shaders in the workbench, and no made-up conversion or performance evidence.

Open the cinematic skill · Evidence: You Don't Need Animations; React Bits Pro; Design Engineering at Vercel; animations.dev