Behavior comparison
Easing vs Reduced motion and fallback
Decisive difference
Easing addresses a fixed-duration pace; Reduced motion and fallback addresses the same result without movement. They can be combined when both needs apply.
Choice criteria, links and sources
- EasingChoose Easing if you need a fixed-duration pace.Open entry Easing
- Reduced motion and fallbackChoose Reduced motion and fallback if you need the same result without movement.Open entry Reduced motion and fallback
See the nine dimensionsSee the sources
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.
Reduced motion and fallback
Static preview: state and result remain readable without motion. Activate the demo to compare the parameter, pause and try the fallback.
Force the static fallback, then play the action. The destination and status remain identical. The system preference always wins, including when it changes during playback.
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.
Reduced motion and fallback
Provide a static result for every essential action, respecting system settings and an explicit local opt-out.
Difference and sources
Easing defines a timing curve; a spring evolves from physical parameters. Neither defines the meaning of a state change.
Read the sourcesParts 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.
Decision
Family question
Does motion explain a change, report state, or only decorate?
Three criteria to choose
- Use case
Easing
Make a short positional change easier to follow with a predictable duration.
Reduced motion and fallback
Provide a static result for every essential action, respecting system settings and an explicit local opt-out.
- Interactivity
Easing
Adjust one parameter for a fixed-duration pace; pause or use a static result.
Reduced motion and fallback
Adjust one parameter for the same result without movement; pause or use a static result.
- Mobile behavior
Easing
Native touch controls; system motion reduction always wins.
Reduced motion and fallback
Native touch controls; system motion reduction always wins.
Nine dimensions
- Trigger
Easing
Explicit activation to demonstrate a fixed-duration pace.
Reduced motion and fallback
Explicit activation to demonstrate the same result without movement.
- Modality
Easing
Non-modal; surrounding content stays usable.
Reduced motion and fallback
Non-modal; surrounding content stays usable.
- Placement
Easing
Inside a bounded specimen; no page-level decoration.
Reduced motion and fallback
Inside a bounded specimen; no page-level decoration.
- Interactivity
Easing
Adjust one parameter for a fixed-duration pace; pause or use a static result.
Reduced motion and fallback
Adjust one parameter for the same result without movement; pause or use a static result.
- Focus
Easing
Focus stays on the activated control. Reset restores focus to its button.
Reduced motion and fallback
Focus stays on the activated control. Reset restores focus to its button.
- Dismissal
Easing
Pause freezes playback; static fallback cancels it. Leaving the specimen cancels its animation and removes listeners.
Reduced motion and fallback
Pause freezes playback; static fallback cancels it. Leaving the specimen cancels its animation and removes listeners.
- Accessible role
Easing
button + select + checkbox + status
Reduced motion and fallback
button + checkbox + status
- Use case
Easing
Make a short positional change easier to follow with a predictable duration.
Reduced motion and fallback
Provide a static result for every essential action, respecting system settings and an explicit local opt-out.
- Mobile behavior
Easing
Native touch controls; system motion reduction always wins.
Reduced motion and fallback
Native touch controls; system motion reduction always wins.
| Dimension | EasingEasing | Reduced motion and fallbackReduced motion and fallback |
|---|---|---|
| Trigger | Explicit activation to demonstrate a fixed-duration pace. | Explicit activation to demonstrate the same result without movement. |
| Modality | Non-modal; surrounding content stays usable. | Non-modal; surrounding content stays usable. |
| Placement | Inside a bounded specimen; no page-level decoration. | Inside a bounded specimen; no page-level decoration. |
| Interactivity | Adjust one parameter for a fixed-duration pace; pause or use a static result. | Adjust one parameter for the same result without movement; pause or use a static result. |
| Focus | Focus stays on the activated control. Reset restores focus to its button. | 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. | Pause freezes playback; static fallback cancels it. Leaving the specimen cancels its animation and removes listeners. |
| Accessible role | button + select + checkbox + status | button + checkbox + status |
| Use case | Make a short positional change easier to follow with a predictable duration. | Provide a static result for every essential action, respecting system settings and an explicit local opt-out. |
| Mobile behavior | Native touch controls; system motion reduction always wins. | Native touch controls; system motion reduction always wins. |