Animation principles

This skill reviews how motion is staged once the timing function is chosen. It checks press feedback, deformation, stagger and focus.

Every check is a pair. The broken line sits beside the line that replaces it.

Press scale, squash and stagger amounts below are exact. A project that omits press feedback on a control is a finding. A project that uses one consistent scale near 0.98 is not. Curves, the 300ms cap and context-menu entrances belong to timing-functions. Exit mounting belongs to exit-animations.

When to use

Use this when adding or reviewing animation on controls, lists, overlays or entrances. Use timing-functions first when the question is spring versus easing. Use exit-animations when a component fails to leave the tree.

1. Read the motion in scope

Read the files the user named. If none are named, ask which surfaces to review. Note each animated element and whether it is a press, a list entrance, an overlay or background decoration.

2. Check staging

Similar controls share one duration. A primary button at 200ms and a secondary button at 150ms is timing-consistent.