80 motion patterns

MotionDict

Pick the right UI motion by situation, not by guessing names.

LoadingFeedbackTransitions

Library

81 shown

Skeleton Screen

●●○Customize

Choose skeletons when layout context matters more than showing generic activity.

Shimmer / Sweep Loader

●●○Customize

Use shimmer as an enhancer to skeletons, not as the whole loading strategy.

Loading...

Spinner / Loading Circle

●○○Ready to Use

Choose a spinner only when you need the smallest possible loading signal.

0%

Progress Bar

●○○Ready to Use

Choose a progress bar when the user needs confidence about how much work remains.

Typing Dots (AI Reply)

●○○Ready to Use

Three animated dots that pulse sequentially, indicating that an AI or person is typing a response. Creates anticipation and confirms the system is processing.

Pulse Placeholder

●○○Ready to Use

A gentle fade-in-fade-out animation applied to placeholder content, creating a "breathing" effect. Softer and more subtle than shimmer.

Content Revealed

Fading in from blur to sharp focus

Blur Fade-in

●●○Customize

Content fades in while simultaneously transitioning from blurred to sharp focus, creating a cinematic reveal effect. More sophisticated than a simple fade.

Overview
Analytics
Settings
Profile

Staggered Item Load

●●○Customize

List items or grid cards appear one after another with a small delay between each, creating a cascading reveal effect. Adds rhythm and polish to content-heavy pages.

Total Users

0

Number Ticker / Counting Animation

●○○Ready to Use

Numbers actively counting up from zero to their final value. Makes data updates feel dynamic and draws attention to key metrics.

Scroll down to reveal elements
Keep scrolling...

Scroll Reveal / Fade-Up on Scroll

●●○Customize

Elements remain hidden until they enter the browser viewport, then smoothly fade in and slide up into position. Makes scrolling feel like an active discovery process.

IN
Normal
MSG
3
Static
Pulsing

Pulsing Hotspot

●○○Ready to Use

A small circular dot that softly pulses outwards like a sonar ping. Gently draws user attention to unread items or new un-clicked features.

Button Loading State

●○○Ready to Use

Choose button loading for async actions whose feedback belongs exactly where the user acted.

Content for Overview

Fade Transition

●○○Ready to Use

Choose fade when the best motion is the one users barely notice.

Error Shake

●○○Ready to Use

A quick horizontal shaking motion applied to an element (like an input field) to indicate invalid input or an error, mimicking a head shake.

Toast Notification

●○○Ready to Use

Choose toast when feedback should be seen but not answered.

Ripple Effect

●○○Ready to Use

A circular wave that expands from the point of contact when a user clicks or taps an element, providing immediate spatial feedback.

Haptic Bounce

●●○Customize

A physical-feeling spring animation that rapidly shrinks an element on press and bounces it back on release, mimicking a tactile physical button.

Scale on Press

●○○Ready to Use

A simpler, non-spring version of tactile feedback where an element scales down slightly and instantly when pressed.

Long Press Feedback

●●○Customize

A visual indicator (like a filling ring or background) that shows the progress of a long-press action before it executes.

Pull-to-Refresh

●●●Requires Setup

A gesture-driven reveal of a loading indicator when a user scrolls past the top edge of a content area, triggering a data refresh.

Swipe Gesture Hint

●●●Requires Setup

A subtle, bouncing horizontal nudge on a list item indicating that it can be swiped to reveal hidden actions (like delete or archive).

Toggle Switch Animation

●○○Ready to Use

A sliding thumb across a pill-shaped track, communicating a change in binary state (on/off) with color transitions.

Like / Heart Animation

●●○Customize

An expressive animation heavily scaling and expanding a heart or star icon, sometimes accompanied by mini confetti or a splash ring.

npm install framer-motion

Copy Confirmation Flash

●○○Ready to Use

A rapid, transient background color change (usually to green or a brand color) on an element that was just copied to the clipboard, providing unmistakable visual confirmation.

Drag & Drop Ghost

●●○Customize

When dragging an item, the original item remains lowered in opacity as a "placeholder", while a slightly scaled-up, shadowed "ghost" follows the cursor.

Hover Lift Effect

●○○Ready to Use

A card or button smoothly translates upwards by a few pixels and increases its shadow cast, creating the illusion of moving closer to the user on hover.

List
Map

Slide Transition

●○○Ready to Use

A view or component enters the screen by sliding linearly from an edge, providing spatial context about where the user is navigating to.

Modal Enter / Exit

●○○Ready to Use

Choose modal motion when the interaction should pause the page without feeling like a new page.

Stagger List Reveal

●●○Customize

When opening a dropdown menu or a list, the items appear sequentially from top to bottom, drawing the eye down the list.

Checkmark Draw Animation

●●○Customize

An SVG checkmark that progressively draws itself from left to right inside a circle, confirming a successful action.

Tooltip Fade & Nudge

●○○Ready to Use

A tiny popover label that slides exactly 4-8px outwards from its anchor element while fading in. Used to label icon-only buttons.

Mountain Retreat

Escape to nature

Sunny Beach

Relax by the ocean

City Lights

Urban exploration

Shared Element Transition

●●●Requires Setup

An element (like an image or card) seamlessly animates from its position in a list view into its final position in a detail view, bridging the context between two states.

Dashboard

Click the menu icon in the top left or the button below to open the sidebar drawer.

Drawer / Sidebar Slide

●○○Ready to Use

A panel that slides in from the left or right edge of the screen, pushing content or overlapping it with a dark backdrop.

Tab Underline Slide

●○○Ready to Use

A highlighting background or underline that smoothly glides from the currently selected tab to the newly clicked tab, reinforcing spatial relationship.

Framer Motion is a production-ready motion library for React that makes creating animations incredibly simple and declarative.

Accordion Expand

●○○Ready to Use

A panel that smoothly grows in height to reveal hidden content, pushing the elements below it smoothly downwards.

Mountain Landscape

Explore

Scroll to reveal

01
Depth

Parallax Effect

Different scroll speeds create the illusion of depth. Foreground moves fast, background moves slow.

Parallax Scroll

●●●Requires Setup

Background elements move at a different speed than foreground elements while scrolling, creating an illusion of 3D depth and immersion.

No projects found

Start by creating a new one to organize your work.

Empty State Illustration

●○○Ready to Use

A softly animated graphic (like a floating ghost or swaying box) accompanied by friendly text suggesting the next action when a list or dashboard is empty.

404
404
404

Page not found

The item you're looking for couldn't be located.

404 Animation

●●○Customize

A playful loop or glitch effect applied to a 404 number or illustration to reduce the frustration of hitting a dead end.

Welcome! 👋

Your first step is to connect a data source so we can start analyzing.

First Run Onboarding Pulse

●○○Ready to Use

A glowing, pulsating ring around a specific UI element intended to draw a brand new user's attention to the first action they should take.

Application Area

Toggle the offline state below to see how the application reacts to a loss of connectivity.

Offline State Indicator

●○○Ready to Use

A bar or toast that slides down from the top of the interface natively indicating the application has lost internet connection, remaining fixed until connection is restored.

Type something to search

No Search Results Animation

●○○Ready to Use

An animation (often a magnifying glass looking back and forth) that plays when a search query returns zero results, softening the frustrating dead end.

Connection Failed

We couldn't reach the server. Please check your internet connection or try again later.

Connection Error Shake

●○○Ready to Use

A more aggressive, persistent pulsing or shaking error state specifically denoting that a system failure or timeout occurred.

Subscribe

Enter your email to join our newsletter.

Form Validation Error

●○○Ready to Use

Small red helper text that gracefully slides down from underneath an input field the moment the user tabs away with an invalid entry.

Goal Achieved!

You've successfully completed all your assigned tasks for the day.

Confetti Burst

●●●Requires Setup

A joyful explosion of colorful particles from the center or edges of the screen to celebrate a major user milestone.

Error Cross Draw

●●○Customize

The inverse of a checkmark draw; a red X SVG that sharply draws its two crossing lines to confirm a failure or rejection.

Badge Count Animation

●○○Ready to Use

When a notification badge value increments, the number scales up and down bouncy, and occasionally the badge itself pulses.

0%

Uploading file...

Progress Ring

●○○Ready to Use

A circular SVG ring that visually fills its stroke perimeter based on a percentage value, moving smoothly as progress updates.

Payment Details

Success Screen Transition

●●○Customize

A dramatic transition where, upon completing a major flow, the entire screen or container slides over or fades into a dedicated success view.

Indeterminate Progress Bar

●○○Ready to Use

A loading bar where the indicator continually bounces back and forth or cycles infinitely, showing that a process is working but the exact completion time is unknown.

Loading...
Abstract art

Image Lazy Load Fade

●○○Ready to Use

Images load as low-res blurs or empty blocks and gently crossfade into their full high-resolution versions instead of popping in jarringly line-by-line.

Image Placeholder

Content Placeholder

●○○Ready to Use

Static, non-animated geometric shapes representing where text or images will render. Simpler than a skeleton screen, often used on lower-end devices or ultra-fast loads.

Custom Vector Loop (Lottie Approx.)

Lottie Loading Loop

●●○Customize

A highly customized, vector-based animation (often exported from After Effects via Lottie) that serves as a branded loading state.

Launching In

00Min
:
10Sec

Countdown Timer

●○○Ready to Use

Numbers that accurately count down to zero, building anticipation or imposing a limit.

Movie scene

Buffering Animation

●○○Ready to Use

Often an overlapping circle array or a dotted spinner indicating that a media stream has paused to download more data.

Skeleton Wave

●○○Ready to Use

Similar to a shimmer loader, but animates a soft gradient wave that sweeps diagonally across multiple skeleton blocks sequentially.

M
T
W
T
F
S
S

Chart Bar Growth

●○○Ready to Use

Bar charts that animate from a height of zero up to their final data value upon entering the screen, making the data feel impactful.

Active UsersLive Interpolation

Data Tweening

●●○Customize

When filtering or changing datasets, SVG lines or pie slices seamlessly morph from one shape to the next instead of snapping instantly.

React95
Vue72
Svelte48
Angular36

Racing Bar Chart

●●○Customize

A horizontal bar chart representing timeseries data where the bars continually sort themselves on the Y-axis as their X-values increase/decrease over time.

Hero Parallax

Hero Section

The background image scrolls slightly slower than this foreground text, creating depth.

Content Block

This grounds the scrolling experience by moving at normal speed.

Parallax Background

●○○Ready to Use

A background image or layer that moves vertically at a slower rate than the foreground content as the user scrolls, creating a 3D depth effect.

A
A
Apple
A
Apricot
A
Avocado
B
B
Banana
B
Blackberry
B
Blueberry
C
C
Cherry
C
Coconut
C
Cranberry

Sticky Heading

●○○Ready to Use

As the user scrolls down a list, the category header sticks to the top of the viewport until pushed out by the next category header.

Scroll down
Animationbreatheslifeintostaticinterfaces,transformingclicksintoexperiences.

Text Reveal Pipeline

●●○Customize

Large typographic paragraphs where the text color or opacity transitions from faded to solid exactly mapped to the user's scroll position.

Scroll Down ↓
Gallery Item 1Horizontal scroll
Gallery Item 2Horizontal scroll
Gallery Item 3Horizontal scroll
Gallery Item 4Horizontal scroll
Gallery Item 5Horizontal scroll
End of Gallery

Horizontal Scroll Gallery

●●○Customize

A section of the page where vertical scrolling temporarily translates into horizontal scrolling to reveal a gallery of cards or images, before continuing vertically.

Cancel
New Feature

Spotlight / Coach Mark

●●○Customize

The entire screen dims with a dark overlay, except for a highlighted "cutout" over a specific UI element, paired with an explanatory tooltip.

Setup Progress0%
Create account
Verify email
Set up profile

Progressive Checklist Fill

●○○Ready to Use

As a user completes onboarding tasks, list items animate a strikethrough, a checkmark draws itself, and the entire item fades into a completed state, often filling a master progress bar.

Premium Feature

Hover to reveal the radiant spotlight effect.

Spotlight Glare Card

●●○Customize

A glossy card element where a soft, radial gradient spotlight perfectly tracks the user's mouse position over the surface, creating a physical "glare" effect.

Hover to intensify the glow

Animated Gradient Border

●●○Customize

A button or card where a vibrant gradient beam continuously travels around its perimeter, similar to a meteor running along a track.

Magnetic Snapping

Magnetic Snap Button

●●○Customize

When the mouse gets close to this button, the entire button (and its text) physically pulls towards the cursor, as if magnetized. It snaps back playfully when the mouse leaves.

Cypher / Matrix Text Reveal

●●○Customize

Text does not simply fade in; instead, it aggressively scrambles through random characters or numbers before locking into the intended legible English phrase.

Vibe Generation

Mesmerizing blurred fields.

Aurora / Mesh Gradient

●●○Customize

A deeply blurred, slow-moving set of vibrant gradient blobs (mesh gradient) that simulates the aurora borealis or viscous fluid, often set behind text or empty states.

Navigation Node

Tracing Beam Scroll

As you scroll down the container, the vibrant cyan and indigo gradient beam physical traces your path down the guide rail on the left.

Tracing Beam Scroll

●●○Customize

A side navigation or progress bar where a glowing "beam" of light physically traces a curved SVG path downwards as the user scrolls, matching their vertical progression.

Premium Pass

3D Tilt Parallax Card

●●○Customize

Cards that literally tilt on their X and Y axes in response to mouse movement. Internal elements (like a logo or image) often move at a faster rate to simulate true 3D depth.

A

Light View

Click anywhere to trigger the wave.

Liquid / Wave Transition

●●○Customize

A full page transition that begins as a small circle at the user's click coordinate, rapidly expanding outward like a liquid ripple to overtake the screen and reveal the new view.

System Active

Dynamic Island Expand

●●○Customize

A top-anchored capsule that fluidly morphs into a larger notification card, accommodating new UI controls, and smoothly reverts to a resting pill shape.

Portfolio Image

left edge detection

Directional Hover Card

●●○Customize

A picture or content card that detects the exact edge (top, right, bottom, left) the mouse cursor enters from, and slides an information overlay in from that specific direction. It exits out the same edge the mouse leaves.

Animated Floating Label

●○○Ready to Use

A modernized input field where the placeholder text gracefully shrinks, changes color, and floats to the top edge of the input boundary when focused or filled.

SecurityEnter password

Fluid Password Strength Gauge

●○○Ready to Use

A smooth, interpolating bar that physically stretches and continuously shifts color from red (weak) to yellow (fair) to green (strong) as the user types.

Expandable Search Input

●●○Customize

Initially just a circular search magnifying glass icon. Upon interaction, it elastically unravels horizontally into a full active text input field.

Morphing SVG Icon

●●○Customize

A seamless vertex-to-vertex transformation between two distinct icons (e.g., Play -> Pause, Menu -> Close), fluidly shifting shapes rather than just a hard cut swap.

Pro Plan

Click to view features

Features Included:

  • Unlimited Projects
  • 24/7 Support
  • Custom Domain

180° 3D Card Flip

●○○Ready to Use

A card that physically turns around in 3D space along its Y or X axis to reveal content on its "back" side, like a flashcard or a playing card.

Design Sync

10:30 AM

Swipe me left to reveal the delete action permanently.

Fluid Swipe-to-Action

●●○Customize

A list item that can be dragged horizontally with high elasticity. Dropping it reveals under-the-fold action buttons (like Delete/Archive) with an elastic rubber-band snap.

Selected mode

Overview

The moving pill shows continuity while the content below updates.

Active Pill Slide

●○○Ready to Use

Use Active Pill Slide when the selected container itself should move; use Tab Underline Slide when only navigation emphasis should move.