Skip to content
SkillCodex
Menu

Easing

Easing

Easing maps elapsed time to progress along a fixed-duration animation. It changes the pace, not the destination.

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: slow down near the destinationchange how fast a card movessame duration different rhythm

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?

Easing

Shared trial context

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

Easing

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

Compare linear with ease-out at the same distance and 800 ms teaching duration. Ease-out advances faster at the start and slows near the target.

What this example shows

Easing defines a timing curve; a spring evolves from physical parameters. Neither defines the meaning of a state change.

Which fits your need?

Easing

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

Spring animation

Explain settling after a drag or a spatial change when a physical response helps orientation.

Which component will you use here?
Difference and sources

Easing defines a timing curve; a spring evolves from physical parameters. Neither defines the meaning of a state change.

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

      Easing belongs to this comparison group.

    • Do not confuse

      Spring animation

      Choose Easing if you need a fixed-duration pace. Choose Spring animation if you need a damped physical response.

      Compare this pair
    • Do not confuse

      State transition

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

      Compare this pair
    • Do not confuse

      Skeleton shimmer

      Choose Easing if you need a fixed-duration pace. Choose Skeleton shimmer if you need optional loading decoration.

      Compare this pair
    • Do not confuse

      Reduced motion and fallback

      Choose Easing if you need a fixed-duration pace. 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: easing

    • slow down near the destination
    • change how fast a card moves
    • same duration different rhythm
    • make a movement stop gently
    • compare linear and ease out
    • control the pace of an animation

    Choose

    Use it when

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

    Avoid it when

    • Do not slow repeated actions or add motion to data people are reading.

    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

      Play the same movement with linear easing, then ease-out, keeping its distance and duration unchanged.

      Expected result

      Both movements reach the same destination; ease-out starts faster and slows near the end.

    2. 2. Do this

      Reach Play and Reset with Tab, then activate them with the keyboard.

      Expected result

      Each control has a visible focus indicator, and focus stays on the control you activated.

    3. 3. Do this

      Enable reduced motion on your device, then repeat the movement.

      Expected result

      The destination and status remain understandable without relying on the animated path.

    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 Easing without breaking its behavior

    # Implement Easing in your agent
    
    ## Objective
    Implement Easing for this verified behavior: Easing maps elapsed time to progress along a fixed-duration animation. It changes the pace, not the destination.
    
    ## Prerequisites
    - Inspect the repository, design system, and existing tests first.
    - Preserve unrelated changes and keep the file scope bounded.
    - Confirm that Easing 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 Easing 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
    - Do not slow repeated actions or add motion to data people are reading.
    
    ## 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 Easing on a real journey

    # Verify Easing after implementation
    
    ## Objective
    Audit the Easing 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:1ce5c5dfe0d281eba58e910ed4acf30fbc92791b9d9d00b4c907784b4f076a40

    Diagnose a problem

    Find and fix the Easing defect

    # Debug Easing 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 Easing.
    - 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 Easing fix

    # Prevent the Easing regression
    
    ## Objective
    Turn the reproduced cause into a focused regression test and compare Easing 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:411c01f61a6a28bc7e5bd77b92f9bba0d7d48d7e38a19a5c03e6bfb2b36be59b

    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:3c3c284421d9377c6d26bfe514c678cb5a09bceee318b7ae829394c80507a039

    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
    Make a short positional change easier to follow with a predictable duration.
    Mission
    Compare linear with ease-out at the same distance and 800 ms teaching duration. Ease-out advances faster at the start and slows near the target.
    Primary state
    Easing maps elapsed time to progress along a fixed-duration animation. It changes the pace, not the destination.
    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 linear with ease-out at the same distance and 800 ms teaching duration. Ease-out advances faster at the start and slows near the target.
    • 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 Easing 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

    • Easing functions
      sourceId
      source-ui-motion-easing
      kind
      documentation
      canonicalUrl
      https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/easing-function
      publisher
      MDN
      sourceRevision
      Wed, 16 Sep 2026 01:08:55 GMT
      consultedAt
      2026-09-16
      license
      Not stated
      contentDigest
      sha256:d3263af9fefefee2191fa2f46d76957edd94817ef8484d772af31f3c70711648
      status
      verified

      Claim covered: Easing: Time-based interpolation curves.

    • 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: Easing: Browser animation playback, pause and cancellation.

    • 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: Easing: 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: Easing: Transform and opacity rendering costs; compositor eligibility is not a performance guarantee.