Concept cluster

Motion & Effects

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

Which one to choose

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

Easing: Easing defines a timing curve; a spring evolves from physical parameters. Neither defines the meaning of a state change.
Spring animation: A spring models a physical response rather than a fixed timing curve. This isolated sampled demo does not implement gesture velocity or retargeting.
State transition: The state is the information. Easing and springs describe how to animate; shimmer merely decorates waiting. The result stays readable with no animation.
Skeleton shimmer: Skeleton reserves the content shape; shimmer is optional decoration on that shape. Unlike a progress bar, neither measures completion.
Reduced motion and fallback: Pause freezes a running animation; reduced motion replaces it with a static result. A fallback also covers missing browser APIs and failed loading.

Try it

Motion & Effects

Compare the behaviors

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

This context stays fixed. Switch concepts to observe the mission, edge case, and specimen specific to each behavior.

Easing

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

Your task

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.

Edge case to verify

System reduction or an unavailable animation API gives the same static information. No data operation depends on playback.

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.

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