Easing: definition, examples, and differences

Updated: Sep 16, 2026
Version: v1.0.24 · r1
Sources: 4 sources
Status: Published

Easing

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

You may have searched for: slow down near the destinationchange how fast a card movessame duration different rhythm

All phrasings

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

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

Try it

Motion & Effects

Compare the behaviors

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

This context stays fixed. Switch concepts to observe the mission, edge case, and specimen specific to each behavior.

Easing

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

Your task

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.

Edge case to verify

System reduction or an unavailable animation API gives the same static information. No data operation depends on playback.

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.

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.

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

A spring models a physical response rather than a fixed timing curve. This isolated sampled demo does not implement gesture velocity or retargeting.

Spring animation

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

State transition

Skeleton reserves the content shape; shimmer is optional decoration on that shape. Unlike a progress bar, neither measures completion.

Skeleton shimmer

Pause freezes a running animation; reduced motion replaces it with a static result. A fallback also covers missing browser APIs and failed loading.

Reduced motion and fallback

Verification checklist

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

Understand → Recognize → Choose → Compare

Pack for your agent

Pre-written instruction by SkillCodex — your request is neither sent nor used to adapt this text; no content is generated, and 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

Pack digest: sha256:3c3c284421d9377c6d26bfe514c678cb5a09bceee318b7ae829394c80507a039

In code

Technology	Primitive	Version	Caveat
Web platform	button, label, select, input[type=checkbox] and decorative div	Native	Native 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.

Recognize

Documented cost and limits

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

Try it

Motion & Effects

Compare the behaviors

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

This context stays fixed. Switch concepts to observe the mission, edge case, and specimen specific to each behavior.

Easing

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

Your task

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.

Edge case to verify

System reduction or an unavailable animation API gives the same static information. No data operation depends on playback.

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.

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.

# 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.

# 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.

# 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.

# 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.

Technology

Primitive

Version

Caveat

Web platform

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

Native

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