animate
Use motion to make changes, relationships, and feedback clear.
On this page 3 sections
Use animate when a change is hard to follow, a click needs clearer feedback, or a meaningful moment deserves more character. Impeccable adds motion that helps people understand what happened and where to look next.
Try it
/impeccable animate moving a task from In progress to Done. Make it easy to follow the change.
Name the interaction and what the motion should explain. Mention any performance constraints or existing animation style to preserve.
How it works
Impeccable reviews the existing interactions and plans the motion around a few clear jobs:
- Feedback: acknowledge actions and make loading, success, and error states understandable.
- Continuity: help people follow an item, panel, or view as it changes.
- Attention and character: give a meaningful moment emphasis without animating every section.
- Timing and control: keep routine feedback quick and handle interruptions, repeated actions, and reduced-motion preferences.
The technique follows the job. A small state change may need a color transition; a larger move may need a shared-element transition, mask, or other effect. Impeccable works with the existing stack and checks the cost on target devices.
Check the result
Repeat the action quickly, interrupt it, and try it with a keyboard. Can you still tell what happened? Check the reduced-motion version and confirm that useful feedback remains. Animation should not delay the task or hide content if a script fails.
Use delight when the broader question is how a moment should feel, or optimize if motion makes the page sluggish.