Motion
Motion expresses changes in elements and the flow between states.
Text & Numbers
Count-up / Count-down
Animate revenue, user counts or remaining time toward a target number.
Monthly revenue
12,840Time remaining
00:00Rolling Number / Odometer
Roll digits vertically like an odometer.
Typewriter
Reveal text one character at a time.
Staggered Text
Introduce characters or words with staggered timing.
Text Reveal
Reveal words as they rise from a masked area.
Blur Text Reveal
Reveal words or characters as they rise gently out of a soft blur.
Text Fade-in
Gradually fade text into view.
Rotating Text
Alternate phrases in a shared space.
Text Scramble
Resolve scrambled characters into a final phrase.
Marquee / Ticker
Move news or announcements continuously in one direction.
Highlight / Underline Reveal
Emphasize text with an expanding highlight or underline.
Entrance & Exit
Fade-in / Fade-out
Fade tooltips, backgrounds and messages in and out.
Slide-in / Slide-out
Slide panels, toasts and menus in and out from an edge.
Scale-in / Zoom-in
Introduce an element by scaling it up.
Pop-in
Briefly overshoot and settle to emphasize a badge or response.
Stagger
Introduce cards or list items in a staggered sequence.
Flip
Flip a card to switch between its front and back.
Blur-in
Bring a blurred element into focus.
Interaction & State
Morph
Transform an element's shape and icon into a new state.
Layout Animation
Animate neighboring items as a list changes or reorders.
- Task 1
- Task 2
- Task 3
Drag / Snap
Drag an element or move it with the keyboard to snap positions.
Shake
Shake a field horizontally when validation fails.
Progress & Attention
Bounce
Bounce an element to draw attention.
Scroll & Navigation
Scroll Reveal
Reveal content as it enters a scroll area.
Scroll-linked Animation
Link size, position and color continuously to scroll progress.
Parallax
Move foreground and background layers at different speeds.
A quiet moment
Crossfade
Fade one screen out while the next fades in.
Inbox
3 new messages