Motion · Learn · Guide

Springs carry the character

A curve plus a duration describes a fixed path through time. A spring describes a force: give it a stiffness and a damping ratio and the settle time falls out of the physics. Material specifies six — three paces × two property families — and this is the layer a motion scheme actually moves.

How it works

Three attributes, not two numbers

A curve-and-duration pair is a fixed recording. A spring is a rule, so it can be interrupted part-way and re-aimed at a new target without a seam.

Stiffness --md-sys-motion-spring-{pace}-{kind}-stiffness

How hard the spring pulls toward the target — how quickly the motion resolves.

Damping ratio --md-sys-motion-spring-{pace}-{kind}-damping

How quickly the bouncing stops. At 1 the spring is critically damped and never overshoots; below 1 it passes the target and settles back.

Initial velocity runtime input · not a token

The speed the object already had when the animation started. Material does not tokenise it because it comes from the interaction: hand a fling's velocity to the spring and the motion continues from the finger instead of restarting at zero.

Gestures. Velocity carries through from a drag or fling.
Interruptions. A spring can be redirected mid-flight; a keyframe timeline has to be cancelled and restarted.
Retargeting. Change the destination while it is running and the spring simply aims at the new one.

Spatial position, size, shape May overshoot. A little travel past the target and back reads as physical weight.

Effects opacity, color Never overshoots. Critically damped — an opacity of 1.08 is not a thing.

Expressiveness is one-dimensional Material's standard and expressive schemes differ only in their spatial springs. The effects springs are identical in both. That is why one scheme choice is enough.

Two token families, one definition

Material --md-sys-motion-spring-{pace}-{kind}-damping --md-sys-motion-spring-{pace}-{kind}-stiffness

The canonical physics values, exactly as Material defines them. Hand these to a JS animation library that understands springs.

Etesie namespace --et-motion-spring-{pace}-{kind}-easing --et-motion-spring-{pace}-{kind}-duration

CSS has no spring primitive, so each spring also needs a curve and a settle time. Material publishes that conversion for web, and on an untouched spring Etesie emits those numbers verbatim. The namespace is --et-* because Material files these as guidance rather than as tokens — not because the values are ours.

A custom scheme — forking individual springs from a base scheme — is part of Material's own model, its second customization level. What a fork costs is the published conversion: Material publishes no curve for a spring it never specified, so a forked spring's web values are sampled from your physics and marked derived. The customization levels guide walks the three levels.