56 Interruptible Animation. 56 of 95.
56/MOTION/56 of 95
Interruptible Animation
New intent should not wait for old motion.
The problem
Change your mind mid-animation and you must wait for it to finish before it reverses, so controls feel sluggish.
The solution
Animation immediately changes direction from current visual state.
Experiment
Play with the values
400ms
How it works
- A new toggle or target arrives while the previous animation may still be running.
- The animation reads the current visual position, not the destination it has not reached yet.
- The new target replaces the old one immediately.
- Velocity already in the motion is kept, so the turn does not restart from zero.
- The object animates from where it actually is toward the new target.
Seen in
Drawers
Slide-out panels reverse direction immediately when you toggle them mid-animation.
Accordions
Expanding one section while another is still closing feels responsive, not queued.
Expandable panels
Height animations respond to new input from wherever the panel currently is.
Modal sheets
Bottom sheets can be dismissed and reopened rapidly without waiting for the exit to finish.