Motion catalog

Fade in / Fade out helps users understand how content appears or leaves the interface.

Slide in helps users understand how content appears or leaves the interface.

Scale in helps users understand how content appears or leaves the interface.

Pop in helps users understand how content appears or leaves the interface.

Reveal helps users understand how content appears or leaves the interface.

Enter / Exit helps users understand how content appears or leaves the interface.

Keyframes helps turn several changes into a readable rhythm.

Interpolation / Tween helps turn several changes into a readable rhythm.

Stagger helps turn several changes into a readable rhythm.

Orchestration helps turn several changes into a readable rhythm.

Delay helps turn several changes into a readable rhythm.

Duration helps turn several changes into a readable rhythm.

Fill mode helps turn several changes into a readable rhythm.

Stepped animation helps turn several changes into a readable rhythm.

Translate helps express space, depth, and object state changes.

Scale helps express space, depth, and object state changes.

Rotate helps express space, depth, and object state changes.

Skew helps express space, depth, and object state changes.

3D tilt / Flip helps express space, depth, and object state changes.

Perspective helps express space, depth, and object state changes.

Transform origin helps express space, depth, and object state changes.

Origin-aware animation helps express space, depth, and object state changes.

Crossfade helps preserve visual continuity across state changes.

Continuity transition helps preserve visual continuity across state changes.

Morph helps preserve visual continuity across state changes.

Shared element transition helps preserve visual continuity across state changes.

Layout animation helps preserve visual continuity across state changes.

Accordion / Collapse helps preserve visual continuity across state changes.

Direction-aware transition helps preserve visual continuity across state changes.

Scroll reveal helps turn scroll position into directional visual feedback.

Scroll-driven animation helps turn scroll position into directional visual feedback.

Parallax helps turn scroll position into directional visual feedback.

Page transition helps turn scroll position into directional visual feedback.

View transition helps turn scroll position into directional visual feedback.

Hover effect helps confirm user action and keep the interface physical.

Press / Tap feedback helps confirm user action and keep the interface physical.

Hold to confirm helps confirm user action and keep the interface physical.

Drag helps confirm user action and keep the interface physical.

Drag to reorder helps confirm user action and keep the interface physical.

Swipe to dismiss helps confirm user action and keep the interface physical.

Rubber-banding helps confirm user action and keep the interface physical.

Shake / Wiggle helps confirm user action and keep the interface physical.

Ripple helps confirm user action and keep the interface physical.

Easing helps control speed changes so motion feels responsive or smooth.

Ease-out helps control speed changes so motion feels responsive or smooth.

Ease-in helps control speed changes so motion feels responsive or smooth.

Ease-in-out helps control speed changes so motion feels responsive or smooth.

Linear helps control speed changes so motion feels responsive or smooth.

Cubic-bezier helps control speed changes so motion feels responsive or smooth.

Asymmetric easing helps control speed changes so motion feels responsive or smooth.

Spring helps keep velocity, weight, and interruptibility in motion responses.

Stiffness / Tension helps keep velocity, weight, and interruptibility in motion responses.

Damping helps keep velocity, weight, and interruptibility in motion responses.

Mass helps keep velocity, weight, and interruptibility in motion responses.

Bounce helps keep velocity, weight, and interruptibility in motion responses.

Perceptual duration helps keep velocity, weight, and interruptibility in motion responses.

Momentum helps keep velocity, weight, and interruptibility in motion responses.

Velocity helps keep velocity, weight, and interruptibility in motion responses.

Interruptible animation helps keep velocity, weight, and interruptibility in motion responses.

Marquee helps use continuous motion for waiting, liveliness, or ambient atmosphere.

Loop helps use continuous motion for waiting, liveliness, or ambient atmosphere.

Alternate (yoyo) helps use continuous motion for waiting, liveliness, or ambient atmosphere.

Orbit helps use continuous motion for waiting, liveliness, or ambient atmosphere.

Pulse helps use continuous motion for waiting, liveliness, or ambient atmosphere.

Float helps use continuous motion for waiting, liveliness, or ambient atmosphere.

Idle animation helps use continuous motion for waiting, liveliness, or ambient atmosphere.

Blur helps make information changes and visual details feel more refined.

Clip-path helps make information changes and visual details feel more refined.

Mask helps make information changes and visual details feel more refined.

Before / after slider helps make information changes and visual details feel more refined.

Line drawing helps make information changes and visual details feel more refined.

Text morph helps make information changes and visual details feel more refined.

Skeleton / Shimmer helps make information changes and visual details feel more refined.

Number ticker helps make information changes and visual details feel more refined.

Tabular numbers helps make information changes and visual details feel more refined.

Typewriter helps make information changes and visual details feel more refined.

Frame rate (FPS) helps help diagnose stutter and choose more stable implementations.

Jank helps help diagnose stutter and choose more stable implementations.

Dropped frame helps help diagnose stutter and choose more stable implementations.

Compositing helps help diagnose stutter and choose more stable implementations.

will-change helps help diagnose stutter and choose more stable implementations.

Layout thrashing helps help diagnose stutter and choose more stable implementations.

Purposeful animation helps turn motion judgment into actionable design engineering rules.

Anticipation helps turn motion judgment into actionable design engineering rules.

Follow-through helps turn motion judgment into actionable design engineering rules.

Squash & stretch helps turn motion judgment into actionable design engineering rules.

Perceived performance helps turn motion judgment into actionable design engineering rules.

Frequency of use helps turn motion judgment into actionable design engineering rules.

Spatial consistency helps turn motion judgment into actionable design engineering rules.

Hardware acceleration helps turn motion judgment into actionable design engineering rules.

Reduced motion helps turn motion judgment into actionable design engineering rules.