Behavior comparison
Spring animation vs State transition
Decisive difference
Spring animation addresses a damped physical response; State transition addresses persistent state feedback. They can be combined when both needs apply.
Choice criteria, links and sources
- Spring animationChoose Spring animation if you need a damped physical response.Open entry Spring animation
- State transitionChoose State transition if you need persistent state feedback.Open entry State transition
See the nine dimensionsSee the sources
Motion & Effects
Try it
Does motion explain a change, report state, or only decorate?
Spring animation
Shared trial context
An item moves, changes state or waits for content. Which information must survive without motion?
Spring animation
Static preview: state and result remain readable without motion. Activate the demo to compare the parameter, pause and try the fallback.
Change damping from 10 to 20 with mass 1 and stiffness 100. Less damping overshoots; critical damping settles without oscillation. The demo samples two seconds then snaps to the exact target.
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
A spring models a physical response rather than a fixed timing curve. This isolated sampled demo does not implement gesture velocity or retargeting.
Which fits your need?
Spring animation
Explain settling after a drag or a spatial change when a physical response helps orientation.
State transition
Confirm a completed local action with persistent text and an optional short fade.
Difference and sources
A spring models a physical response rather than a fixed timing curve. This isolated sampled demo does not implement gesture velocity or retargeting.
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
Spring animation
Explain settling after a drag or a spatial change when a physical response helps orientation.
State transition
Confirm a completed local action with persistent text and an optional short fade.
- Interactivity
Spring animation
Adjust one parameter for a damped physical response; pause or use a static result.
State transition
Adjust one parameter for persistent state feedback; pause or use a static result.
- Mobile behavior
Spring animation
Native touch controls; system motion reduction always wins.
State transition
Native touch controls; system motion reduction always wins.
Nine dimensions
- Trigger
Spring animation
Explicit activation to demonstrate a damped physical response.
State transition
Explicit activation to demonstrate persistent state feedback.
- Modality
Spring animation
Non-modal; surrounding content stays usable.
State transition
Non-modal; surrounding content stays usable.
- Placement
Spring animation
Inside a bounded specimen; no page-level decoration.
State transition
Inside a bounded specimen; no page-level decoration.
- Interactivity
Spring animation
Adjust one parameter for a damped physical response; pause or use a static result.
State transition
Adjust one parameter for persistent state feedback; pause or use a static result.
- Focus
Spring animation
Focus stays on the activated control. Reset restores focus to its button.
State transition
Focus stays on the activated control. Reset restores focus to its button.
- Dismissal
Spring animation
Pause freezes playback; static fallback cancels it. Leaving the specimen cancels its animation and removes listeners.
State transition
Pause freezes playback; static fallback cancels it. Leaving the specimen cancels its animation and removes listeners.
- Accessible role
Spring animation
button + select + checkbox + status
State transition
button + select + checkbox + status
- Use case
Spring animation
Explain settling after a drag or a spatial change when a physical response helps orientation.
State transition
Confirm a completed local action with persistent text and an optional short fade.
- Mobile behavior
Spring animation
Native touch controls; system motion reduction always wins.
State transition
Native touch controls; system motion reduction always wins.
| Dimension | Spring animationSpring animation | State transitionState transition |
|---|---|---|
| Trigger | Explicit activation to demonstrate a damped physical response. | Explicit activation to demonstrate persistent state feedback. |
| 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 damped physical response; pause or use a static result. | Adjust one parameter for persistent state feedback; 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 + select + checkbox + status |
| Use case | Explain settling after a drag or a spatial change when a physical response helps orientation. | Confirm a completed local action with persistent text and an optional short fade. |
| Mobile behavior | Native touch controls; system motion reduction always wins. | Native touch controls; system motion reduction always wins. |