09 / MOTION
Interruptible Animation
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
Task: Rapidly toggle the panel open and closed.
NAIVE
Panel content area. Rapidly toggle to feel the difference in responsiveness.
stateidle
target0px
current0px
queue0
THOUGHTFUL
Panel content area. Rapidly toggle to feel the difference in responsiveness.
stateidle
target0px
current0px
queue0
Play with the values
400ms
How it works
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.