THE MOTION LIBRARY

A little motion.
A clearer interaction.

Explore 24 animated effects, find the words to describe them,
and bring the right movement to your next component.

Previews are still until you press Play.

Explore the effects

24 effects

entrance350ms · Once

Fade in

A quiet arrival from transparent to visible.

entrance450ms · Once

Slide up

Content rises a short distance as it appears.

entrance350ms · Once

Scale in

An element gently grows into its final size.

entrance650ms · Once

Spring pop

A small overshoot adds a playful settling motion.

entrance650ms · Once

Flip in

A panel turns toward the viewer.

entrance550ms · Once

Blur reveal

Soft content resolves into a crisp surface.

entrance650ms · Once

Clip wipe

A mask reveals content from one edge.

exit300ms · Once

Fade out

Content leaves without directional movement.

exit400ms · Once

Collapse out

A surface compresses toward its upper edge.

attention700ms · Once

Pulse

A small expansion draws attention to a control.

attention450ms · Once

Shake

A short sideways nudge signals a rejected action.

attention800ms · Once

Bounce

A brief lift and return creates a lively cue.

attention700ms · Once

Ripple

An expanding ring acknowledges an activation.

attention1100ms · Once

Glow

A soft halo briefly emphasizes an active surface.

attention900ms · Once

Tilt

A small perspective turn adds a tactile response.

transition850ms · Once

Crossfade

One visual state dissolves into another.

transition950ms · Once

Shape morph

A compact tile expands into a softer surface.

transition450ms · Once

Stagger reveal

A short sequence introduces related items in order.

loading1600ms · Loop

Shimmer

A soft sweep passes over placeholder content.

loading1100ms · Loop

Spin

A circular indicator rotates at a steady pace.

loading1400ms · Loop

Progress sweep

A moving segment crosses an indeterminate track.

loading1050ms · Loop

Dot wave

Three small dots rise in a repeating sequence.

ambient6000ms · Loop

Gradient drift

A background color field moves slowly behind content.

ambient3200ms · Loop

Float

An illustration drifts gently above its resting point.

Animation effects

Enable JavaScript to play previews and use copy controls. Every effect description is available below.

Fade in — A quiet arrival from transparent to visible.
Slide up — Content rises a short distance as it appears.
Scale in — An element gently grows into its final size.
Spring pop — A small overshoot adds a playful settling motion.
Flip in — A panel turns toward the viewer.
Blur reveal — Soft content resolves into a crisp surface.
Clip wipe — A mask reveals content from one edge.
Fade out — Content leaves without directional movement.
Collapse out — A surface compresses toward its upper edge.
Pulse — A small expansion draws attention to a control.
Shake — A short sideways nudge signals a rejected action.
Bounce — A brief lift and return creates a lively cue.
Ripple — An expanding ring acknowledges an activation.
Glow — A soft halo briefly emphasizes an active surface.
Tilt — A small perspective turn adds a tactile response.
Crossfade — One visual state dissolves into another.
Shape morph — A compact tile expands into a softer surface.
Stagger reveal — A short sequence introduces related items in order.
Shimmer — A soft sweep passes over placeholder content.
Spin — A circular indicator rotates at a steady pace.
Progress sweep — A moving segment crosses an indeterminate track.
Dot wave — Three small dots rise in a repeating sequence.
Gradient drift — A background color field moves slowly behind content.
Float — An illustration drifts gently above its resting point.