Skip to content
SkillCodex
Menu

State transition

State transition

A state transition changes meaningful interface state, such as Draft to Saved. Animation can reinforce that feedback; it must never determine whether saving succeeded.

Try the component
Context, sources and actions
Sources and revision
Updated
Version
v1.0.26 · r1
Sources
4 sources
Status
Published
Read the sources

You may have searched for: show that my changes were savedconfirm an action without movementkeep success text after an animation

All phrasings
Save and share

Recognize

Documented cost and limits

DOM rendering with transform or opacity through Web Animations API, with no added animation dependency, Canvas or WebGL. The module is requested on Load demo. The spring prepares 121 points once; the browser then controls playback. Continuous shimmer keeps consuming resources until paused or unmounted.

These properties can avoid layout work; they guarantee neither GPU compositing nor smooth playback on low-end devices. Battery, GPU and real-device performance remain unmeasured. Static state and text remain the reference when the system reduces motion or the API is missing.

web.dev · rendering cost · MDN · Web Animations API

Motion & Effects

Try it

Does motion explain a change, report state, or only decorate?

State transition

Shared trial context

An item moves, changes state or waits for content. Which information must survive without motion?

State transition

Static preview: state and result remain readable without motion. Activate the demo to compare the parameter, pause and try the fallback.

Compare an instant update with a 200 ms fade. Saved appears immediately in both cases; only the decorative check fades.

What this example shows

The state is the information. Easing and springs describe how to animate; shimmer merely decorates waiting. The result stays readable with no animation.

Which fits your need?

State transition

Confirm a completed local action with persistent text and an optional short fade.

Easing

Make a short positional change easier to follow with a predictable duration.

Which component will you use here?
Difference and sources

The state is the information. Easing and springs describe how to animate; shimmer merely decorates waiting. The result stays readable with no animation.

Read the sources

    Parts of the specimen

    Select a numbered marker on the schematic, or use the list below, to see its role. The schematic shows the concept's representative state.

    Trigger

    The control that opens or reveals the surface.

    Position in the atlas

    Relationship map

    Locate the chapter, neighboring concepts, and the next useful decision.

    • Chapter

      Motion & Effects

      State transition belongs to this comparison group.

    • Do not confuse

      Easing

      Choose State transition if you need persistent state feedback. Choose Easing if you need a fixed-duration pace.

      Compare this pair
    • Do not confuse

      Spring animation

      Choose State transition if you need persistent state feedback. Choose Spring animation if you need a damped physical response.

      Compare this pair
    • Do not confuse

      Skeleton shimmer

      Choose State transition if you need persistent state feedback. Choose Skeleton shimmer if you need optional loading decoration.

      Compare this pair
    • Do not confuse

      Reduced motion and fallback

      Choose State transition if you need persistent state feedback. Choose Reduced motion and fallback if you need the same result without movement.

      Compare this pair
    • Next step

      Compare the concepts in the chapter before choosing an implementation.

      Open the chapter

    In your own words

    Understand

    What people describe

    Documented aliases: state transition

    • show that my changes were saved
    • confirm an action without movement
    • keep success text after an animation
    • change from draft to saved
    • fade in a confirmation check
    • feedback independent of animation

    Choose

    Use it when

    • Confirm a completed local action with persistent text and an optional short fade.

    Avoid it when

    • Never wait for animation completion to commit data or report success before the operation resolves.

    Compare

    Compare similar concepts

    Verification checklist

    Try these actions in the lab, then check the same behaviours in your agent’s result. Adapt the example names to your interface.

    1. 1. Do this

      Change the example from Draft to Saved and read the label while the visual transition runs.

      Expected result

      The new state is stated in text as soon as the operation succeeds; a fading icon is only an extra cue.

    2. 2. Do this

      Compare the instant version with the animated version, then repeat the action from the keyboard.

      Expected result

      Both versions communicate the same outcome, and focus stays on the control you used.

    3. 3. Do this

      Enable reduced motion and change state again.

      Expected result

      The text still changes correctly; the animation is not needed to know whether the operation succeeded.

    Full contract
    1. 1The result is readable with no animation
    2. 2Pause, system reduction and fallback work during playback
    3. 3Unmount cancels effects and listeners
    4. 4Only transform or opacity changes; device cost remains unmeasured

    Understand → Recognize → Choose → Compare

    Pack for your agent

    Pre-written instructions to paste into your agent. Copying executes nothing.

    Implement correctly

    Build State transition without breaking its behavior

    # Implement State transition in your agent
    
    ## Objective
    Implement State transition for this verified behavior: A state transition changes meaningful interface state, such as Draft to Saved. Animation can reinforce that feedback; it must never determine whether saving succeeded.
    
    ## Prerequisites
    - Inspect the repository, design system, and existing tests first.
    - Preserve unrelated changes and keep the file scope bounded.
    - Confirm that State transition matches the need before writing code.
    
    ## Required behavior
    - A live region announces new status only when the update is important and not already focused.
    - Pointer, Enter, or Space activation runs one named action exactly once.
    
    ## States to cover
    - Ready — Static initial state
    - Running — The optional effect runs
    - Paused — Playback is frozen
    - Result — Persistent result with no motion required
    
    ## Accessibility
    - ARIA role: button + select + checkbox + status
    - The primary control or named region for State transition has a stable accessible name from visible text or an explicit programmatic label; placeholder text and tooltips are not names.
    - Focus stays on the activated control. Reset restores focus to its button.
    - Pause freezes playback; static fallback cancels it. Leaving the specimen cancels its animation and removes listeners.
    - Announce state changes with concise text, never animation frames. Decorative graphics stay hidden from assistive technology.
    - Tab reaches every control
    - Enter or Space activates buttons; arrows change the native select; Space toggles the static fallback checkbox
    
    ## When not to use
    - Never wait for animation completion to commit data or report success before the operation resolves.
    
    ## Acceptance criteria
    - The result is readable with no animation
    - Pause, system reduction and fallback work during playback
    - Unmount cancels effects and listeners
    - Only transform or opacity changes; device cost remains unmeasured
    
    ## Guardrails
    - Show the proposed changes before any external action.
    - Do not publish, send, delete, pay for, or change remote state without explicit authorization.
    - Preserve unrelated changes and stop if the scope becomes ambiguous.
    
    ## Output format
    - Outcome or verdict.
    - Files or actions involved.
    - Checks run and observable evidence.
    - Remaining blockers or limitations.
    
    • Web platform
    • Requires · Access to the repository, design system, and tests
    Why it works
    • The need is tied to canonical behavior before any technical choice.
    • States, accessibility, and non-goals prevent a merely visual implementation.
    • Acceptance criteria and the output format make verification observable.

    Try next

    Verify State transition on a real journey

    # Verify State transition after implementation
    
    ## Objective
    Audit the State transition implementation against its behavior, states, and accessibility requirements without changing it automatically.
    
    ## Checks
    - Replay the smallest representative journey.
    - Check keyboard behavior, focus, accessible name, and announcements.
    - Tie each gap to a specific acceptance criterion.
    
    ## Guardrails
    - Show the proposed changes before any external action.
    - Do not publish, send, delete, pay for, or change remote state without explicit authorization.
    - Preserve unrelated changes and stop if the scope becomes ambiguous.
    
    ## Output format
    - Outcome or verdict.
    - Files or actions involved.
    - Checks run and observable evidence.
    - Remaining blockers or limitations.
    

    sha256:4d8bd7667ca40c4e458d053b22411f52fdedba0e1621a697b85c96393b39a95b

    Diagnose a problem

    Find and fix the State transition defect

    # Debug State transition in your agent
    
    ## Observed symptom
    [DESCRIBE THE SYMPTOM HERE]
    
    ## Observable checks
    - Reproduce the issue with the smallest relevant journey.
    - Compare behavior with the documented states and transitions for State transition.
    - Verify keyboard behavior, focus, accessible name, and announcements.
    
    ## Possible causes
    - The chosen primitive does not match the expected behavior.
    - A state, transition, or focus return is missing.
    - A neighboring component captures an event or hides an accessible signal.
    
    ## Bounded corrections
    - Fix the reproduced cause without recreating neighboring components.
    - Preserve the public contract and add a focused regression test.
    - Do not install dependencies or change remote state without authorization.
    
    ## Final verification
    - The result is readable with no animation
    - Pause, system reduction and fallback work during playback
    - Unmount cancels effects and listeners
    - Only transform or opacity changes; device cost remains unmeasured
    
    ## Guardrails
    - Show the proposed changes before any external action.
    - Do not publish, send, delete, pay for, or change remote state without explicit authorization.
    - Preserve unrelated changes and stop if the scope becomes ambiguous.
    
    ## Output format
    - Outcome or verdict.
    - Files or actions involved.
    - Checks run and observable evidence.
    - Remaining blockers or limitations.
    
    • Web platform
    • Requires · Access to the repository, design system, and tests
    Why it works
    • The explicit symptom prevents starting from an assumed fix.
    • Checks separate behavior, accessibility, and neighboring interference.
    • The fix stays bounded and must produce regression evidence.

    Try next

    Lock in the State transition fix

    # Prevent the State transition regression
    
    ## Objective
    Turn the reproduced cause into a focused regression test and compare State transition with neighboring concepts before widening the fix.
    
    ## Checks
    - Prove that the test fails before the fix.
    - Prove that it passes after the bounded fix.
    - Verify that no neighboring component changed behavior.
    
    ## Guardrails
    - Show the proposed changes before any external action.
    - Do not publish, send, delete, pay for, or change remote state without explicit authorization.
    - Preserve unrelated changes and stop if the scope becomes ambiguous.
    
    ## Output format
    - Outcome or verdict.
    - Files or actions involved.
    - Checks run and observable evidence.
    - Remaining blockers or limitations.
    

    sha256:76f88af7d47d49ec840a873338e1d4c87907a37838c170f572f79f65daab6092

    Full entry, saving and provenance

    Pre-written instruction by SkillCodex — your request is neither sent nor used to adapt this text; no content is generated, and copying executes nothing.

    Pack digest: sha256:196a269320e143ed8020f2a3328767cee8b74495ca2ef8f305e6e5fb98449aea

    In code

    TechnologyPrimitiveVersionCaveat
    Web platform

    button, label, select, input[type=checkbox] and decorative div

    NativeNative browser animation demo, not a new ARIA widget. Static content remains usable.

    Technical details

    Behaviors

    • Announce meaningful changes

      A live region announces new status only when the update is important and not already focused.

    • Run an action

      Pointer, Enter, or Space activation runs one named action exactly once.

    States

    • Ready

      Static initial state

    • Running

      The optional effect runs

    • Paused

      Playback is frozen

    • Result

      Persistent result with no motion required

    State transitions

    • Ready → Running

      Activate Play when motion is available

    • Running → Paused

      Activate Pause

    • Running → Result

      Finish or activate static fallback

    Test scenarios

    Context
    Confirm a completed local action with persistent text and an optional short fade.
    Mission
    Compare an instant update with a 200 ms fade. Saved appears immediately in both cases; only the decorative check fades.
    Primary state
    A state transition changes meaningful interface state, such as Draft to Saved. Animation can reinforce that feedback; it must never determine whether saving succeeded.
    Edge case
    System reduction or an unavailable animation API gives the same static information. No data operation depends on playback.

    Visual signals

    • A bounded specimen with a visible start and result
    • Text remains readable without movement

    Behavioral signals

    • Compare an instant update with a 200 ms fade. Saved appears immediately in both cases; only the decorative check fades.
    • Starts only on request; pause and static fallback remain available

    Accessibility

    Role
    button + select + checkbox + status
    Accessible name
    The primary control or named region for State transition has a stable accessible name from visible text or an explicit programmatic label; placeholder text and tooltips are not names.
    Focus
    Focus stays on the activated control. Reset restores focus to its button.
    Dismissal
    Pause freezes playback; static fallback cancels it. Leaving the specimen cancels its animation and removes listeners.
    Scroll
    Activating the control with Space does not scroll the page, and feedback appears without moving focus or causing an unexpected jump.
    Announcement
    Announce state changes with concise text, never animation frames. Decorative graphics stay hidden from assistive technology.
    Keyboard
    • Tab reaches every control
    • Enter or Space activates buttons; arrows change the native select; Space toggles the static fallback checkbox

    Bindings

    Open the HTML, ARIA, Radix, and shadcn matrix
    • button, label, select, input[type=checkbox] and decorative div

      implementationKind
      custom
      nativeElement
      button, label, select, input[type=checkbox] and decorative div
      ariaPattern
      native controls and status text
      radixPrimitive
      Not applicable
      shadcnRecipe
      Not applicable
      runtimeDependency
      Not applicable
      packageName
      Not applicable
      exportName
      Not applicable
      exactVersion
      Not applicable
      status
      exception
      sourceId
      source-ui-motion-waapi
      deprecationStatus
      active
      replacement
      Not applicable
      validFrom
      Not applicable
      validUntil
      Not applicable

      Equivalence caveat: Native browser animation demo, not a new ARIA widget. Static content remains usable.

      Verify binding source

    Sources

    • Web Animations API
      sourceId
      source-ui-motion-waapi
      kind
      documentation
      canonicalUrl
      https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API
      publisher
      MDN
      sourceRevision
      Wed, 16 Sep 2026 01:08:41 GMT
      consultedAt
      2026-09-16
      license
      Not stated
      contentDigest
      sha256:b030cde49d8dbf6294ab507e29a03d53591011c9bd11ca2d48d87182a0abd50b
      status
      verified

      Claim covered: State transition: Browser animation playback, pause and cancellation.

    • WCAG 2.2: Status Messages
      sourceId
      source-ui-wcag-understanding-status-messages
      kind
      documentation
      canonicalUrl
      https://www.w3.org/WAI/WCAG22/Understanding/status-messages.html
      publisher
      W3C WAI
      sourceRevision
      http-last-modified:2026-07-02T10:07:49Z
      consultedAt
      2026-07-19
      license
      Not stated
      contentDigest
      sha256:cf2a8c16b20c1a94164c9a37e2b3f15d9a7d3f47d88385d47432d6a29655609e
      status
      verified

      Claim covered: State transition: informative WCAG guidance for status messages announced without moving focus.

    • prefers-reduced-motion
      sourceId
      source-ui-motion-reduction
      kind
      documentation
      canonicalUrl
      https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/prefers-reduced-motion
      publisher
      MDN
      sourceRevision
      Wed, 16 Sep 2026 01:08:49 GMT
      consultedAt
      2026-09-16
      license
      Not stated
      contentDigest
      sha256:573fe46ee27fed249d9c39e910a2a6c258cee26527e90554ba5b02eba1496fbf
      status
      verified

      Claim covered: State transition: User motion preferences and a static alternative.

    • High-performance animations
      sourceId
      source-ui-motion-performance
      kind
      documentation
      canonicalUrl
      https://web.dev/articles/animations-guide?hl=de
      publisher
      Google web.dev
      sourceRevision
      Tue, 06 Oct 2020 07:00:00 GMT
      consultedAt
      2026-09-16
      license
      Not stated
      contentDigest
      sha256:2f4492e9ba7b3679936eac2f1f1e6e42dcde7fc65bf29cf6f848d076df224acd
      status
      verified

      Claim covered: State transition: Transform and opacity rendering costs; compositor eligibility is not a performance guarantee.