Motion as state, not decoration

The states are authoritative. The transition is optional.

Every demonstration below begins with two valid interface states. Motion presents the relationship between them; it does not own the relationship. The destination must remain correct if the transition is disabled, interrupted, skipped by a motion preference, or completed immediately.

“Thetransitionisoptional.Thestatechangeisnot.”

What perception and animation research can establish

Human vision does not process a changing interface as a neutral sequence of screenshots. Perception can connect successive appearances through a temporary representation of the same object. Shared location, relative position and continuity make later information easier to integrate with what is already visible. Motion can support that connection, but it cannot decide whether two product states actually share identity.

Movement also spends attention. A newly moving element can receive priority even when movement is not the user's task, which makes animation useful for a changed status and expensive when applied to everything around it. The impression of cause and effect also depends on spatial and temporal contiguity: a delayed or displaced response is harder to associate with the action that produced it.

A review of animation research warns that comparisons are meaningful only when animated and non-animated versions carry equivalent information. It also notes that motion can fail when it is too fast or complex to perceive accurately. Those limits shape the experiments below: each pair keeps product state and information constant while changing the presentation rule.

Controlled experiments with animated transitions in statistical graphics found that well-designed transitions can improve graphical perception. That evidence concerns data graphics, not every interface component, so this article uses it narrowly: motion may help when it preserves orientation and valid intermediate states, but it does not supply universal timing values.

W3C guidance for interaction-triggered animation requires non-essential motion to be disableable and frames essential motion in terms of information or functionality. That provides the accessibility boundary used here: a reduced-motion version must preserve state, meaning and available action without depending on spatial choreography.

Engineering model

Intent updates state; presentation follows

Interruptibility is an architectural property before it is an easing choice. The dependency is intent → authoritative state → optional presentation, never intent → animation → authoritative state. New input updates the target immediately. The presentation layer may continue from its current rendered position, but it must cancel obsolete work and converge on the latest intent.

type ArchiveState =
  | { type: 'idle' }
  | { type: 'archiving' }
  | { type: 'archived' }
  | { type: 'error'; message: string };

setState(next);                    // authoritative state
present(previous, next, signal);  // optional presentation

Waiting for animationend to commit the destination reverses that dependency. Background tabs throttle animation, users interrupt it, components unmount, and reduced-motion settings can bypass it. Correctness cannot depend on a presentation lifecycle.

Reduced motion preserves information, not choreography

Accessibility is not a zero-duration version of the same animation. It is a different communication strategy. Spatial travel can become direct insertion plus an outline, opacity emphasis, text update, or live status. The information, whether identity, result, hierarchy, or failure, must survive the substitution.

The W3C notes that interaction-triggered animation can cause distraction, dizziness, nausea, and headaches for people with vestibular disorders, and recommends honoring the user's motion preference for non-essential movement. The requirement is about control and equivalent function, not about preserving an art direction at a smaller amplitude. See WCAG 2.3.3: Animation from Interactions.