Concept cluster

Motion & Effects

Separate timing, spring response, state feedback, loading decoration and static alternatives.

Try the 5 concepts, compare what changes, then use the Pack that fits your need.

Try the components

Motion & Effects

Try it

Does motion explain a change, report state, or only decorate?

Shared trial context

An item moves, changes state or waits for content. Which information must survive without motion?

Easing

Static preview: state and result remain readable without motion. Activate the demo to compare the parameter, pause and try the fallback.

Compare linear with ease-out at the same distance and 800 ms teaching duration. Ease-out advances faster at the start and slows near the target.

What this example shows

Easing defines a timing curve; a spring evolves from physical parameters. Neither defines the meaning of a state change.

Use the Pack — Easing

Which fits your need?

Easing

Make a short positional change easier to follow with a predictable duration.

Spring animation

Explain settling after a drag or a spatial change when a physical response helps orientation.

Which component will you use here?Use EasingUse Spring animation

Read the full Pack Verify the result

Difference and sources

Easing defines a timing curve; a spring evolves from physical parameters. Neither defines the meaning of a state change.

Read the sources

Parts of the specimen

Select a numbered marker on the schematic, or use the list below, to see its role. The schematic shows the concept's representative state.

Trigger

The control that opens or reveals the surface.

Documented cost and limits

DOM rendering with transform or opacity through Web Animations API, with no added animation dependency, Canvas or WebGL. The module is requested on Load demo. The spring prepares 121 points once; the browser then controls playback. Continuous shimmer keeps consuming resources until paused or unmounted.

These properties can avoid layout work; they guarantee neither GPU compositing nor smooth playback on low-end devices. Battery, GPU and real-device performance remain unmeasured. Static state and text remain the reference when the system reduces motion or the API is missing.

web.dev · rendering cost · MDN · Web Animations API

The three concepts

ConceptEasingEasing maps elapsed time to progress along a fixed-duration animation. It changes the pace, not the destination.Open ConceptSpring animationA spring approaches a target using stiffness, mass and damping. Low damping can overshoot; higher damping removes oscillation.Open ConceptState transitionA state transition changes meaningful interface state, such as Draft to Saved. Animation can reinforce that feedback; it must never determine whether saving succeeded.Open ConceptSkeleton shimmerSkeleton shimmer adds a moving highlight to a placeholder while content is pending. It gives no percentage or promise about remaining time.Open ConceptReduced motion and fallbackReduced motion honors a user's preference for less movement. A fallback preserves the same information when motion is disabled or unavailable.Open

The three comparisons

ComparisonEasing vs Spring animation ComparisonEasing vs State transition ComparisonEasing vs Skeleton shimmer ComparisonEasing vs Reduced motion and fallback ComparisonSpring animation vs State transition ComparisonSkeleton shimmer vs Spring animation ComparisonReduced motion and fallback vs Spring animation ComparisonSkeleton shimmer vs State transition ComparisonReduced motion and fallback vs State transition ComparisonReduced motion and fallback vs Skeleton shimmer

Signals you are confusing them

These descriptions fit every concept in the cluster, so none of them is enough to decide.

a moving element
an animated state

Other concept clusters

Concept clusterSmall contextual surfaces Concept clusterModal surfaces Concept clusterEdge-attached surfaces Concept clusterChoose from a list Concept clusterChoices and binary states Concept clusterChange view or reveal content Concept clusterInform the user Concept clusterWait and track progress Concept clusterTrigger or navigate Concept clusterEnter text Concept clusterOrient within a journey Concept clusterStructure and explore data