Timing functions

This skill picks the timing function for a motion and checks its duration. It asks whether the motion is reacting to the user or the system is speaking.

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

The bands below are exact. A gesture on a fixed ease-out is a finding. A spring that is not the sample pair stiffness: 500 and damping: 30 is a finding only when it visibly oscillates, as with stiffness: 1000 and damping: 5. Staging, press scale and stagger belong to animation-principles. Mounting and exits of conditional trees belong to exit-animations.

When to use

Use this when choosing or reviewing a transition, a spring or a decision to animate at all. Use it for drag, toggles, menus, hover, progress and page changes. Shared-element page transitions that should use the View Transitions API belong to pseudo-elements.

1. Classify the motion

Read the files in scope. For each transition, label it as one of: gesture, interruptible, system state, progress or time, or high-frequency. Say which label you used before judging the curve.

2. Match the function

Gesture-driven motion, including drag, flick and swipe, uses a spring. That is spring-for-gestures. Motion the user can reverse mid-flight uses a spring. That is spring-for-interruptible. On release, pass the pointer velocity into the spring, as in velocity: info.velocity.x. That is spring-preserves-velocity.