Transitions.dev — Essential Transitions for Web Apps
A library of essential transitions for web apps: card resize, number pop-in, notification badge, text state swap, menu/modal/panel open-close, confetti burst, gooey plus menu, page side-by-side transitions, icon swap, success check, avatar group hover, card stack hover, error state shake, input clear dissolve, skeleton loader reveal, tab sliding, drag & drop with physics, shimmer text, tooltip, 3D tilt, accordion, toast, like button, checkbox check, spinner-to-check morph, spinning counter, and toggle. Free + Pro tiers.
Spec
Transitions.dev — Essential Transitions for Web Apps
A library of essential UI transitions for web apps. Built by Jakub Antalik. Available in CSS and React.
Transitions included (selection)
Layout & containers: Card resize (smooth), Menu dropdown (origin-aware), Modal open/close (scale), Panel reveal, Accordion (grid-rows height), Toast (fade/blur/scale).
Numbers & text: Number pop-in (digit flip with blur/stagger), Spinning counter (reel spin), Text states swap (blur), Texts reveal (offset stagger), Input clear (per-word dissolve), Shimmer text (masked gradient sweep).
Feedback: Notification badge (spring pop-in), Success check (blur+rotate), Error state shake (cubic-bezier), Like button (heart burst), Checkbox check (stroke path), Spinner to check morph.
Hover & interaction: Avatar group hover (distance-falloff lift), Card stack hover (Pro), 3D tilt (cursor glare), Image open tilt (Pro), Learn more hover (chevron), Like button.
Navigation: Page side-by-side, Tabs sliding (pill indicator), Dropdown menu morph, Tooltip open/close.
Advanced (Pro): Confetti burst, Gooey plus menu (liquid split), Drag & drop with physics, Organic shimmer, Delete with smoky dissolve, Pro gradient text.
How to use
Browse transitions.dev, click any transition to see it live, then Copy code (CSS or React) and paste into your project. Free + Pro tiers.
Learn more
For crafting UI animations, the creator recommends Emil Kowalski's course at animations.dev.
