MOTION / 03 MIN
Every movement needs a reason.
A useful animation makes the interface easier to understand.
Connect cause and effect.
Motion works best when it explains a relationship. A panel follows the button that opened it. A selected state travels to the new choice. A transition gives the reader a moment to understand that the context has changed.
Know when to be still.
Keep everyday transitions short and let them respond to interruption. Use transforms and opacity when possible, stop work outside the viewport, and respect reduced-motion preferences. The experience should remain complete when the movement is removed.