All Animations
33 animations — hover any card to replay
Fade In
The most fundamental UI transition. An element moves from opacity 0 to 1. Used for modals, tooltips, page transitions, and content reveals.
Slide In
An element enters by moving from outside its container boundary. Used for drawers, side panels, and notification banners.
Scale In (Pop)
An element grows from a tiny point to full size. With spring easing, this creates a satisfying "pop." Used for buttons, badges, and dialog boxes.
Fly In
Combines positional movement with opacity. The element travels AND fades in simultaneously. Popular in hero sections and onboarding screens.
Ease Out
Starts fast and decelerates to a stop — like a car braking. The default for UI entrance animations. Google Material calls this "Standard Easing."
Ease In
Starts slow and accelerates. Used primarily for EXIT animations — things leaving the screen should accelerate away.
Spring / Bounce
Overshoots the target value then snaps back. Creates organic springiness. Popularised by Framer Motion's spring physics and Apple's iOS UI kit.
Linear
Constant speed throughout — no acceleration. Feels robotic for most UI but ideal for continuous animations like spinners and rotating elements.
Pulse
A continuous rhythmic scaling animation — a "breathing" effect. Used for notification badges, live status indicators, and recording states.
Error Shake
Rapid horizontal oscillation to signal an error or invalid input. Pattern: centre → left → right → left → right → centre. Universally means "no."
Ping Beacon
An expanding ring radiates outward from an element then fades out. Used for live indicators, map pins, and notification hotspots. Made famous by Tailwind's animate-ping.
Skeleton Shimmer
A moving light gradient sweep across a placeholder. The industry standard for skeleton loading states used by Facebook, LinkedIn, and YouTube.
Spinner
The canonical indeterminate loading state. A rotating circle arc communicates the system is working but duration is unknown.
Progress Bar
A bar that fills to indicate percentage completion of a known task. Animate with scaleX() for performance — never animate width directly.
Bouncing Dots
Three dots animate vertically with staggered timing — the "typing in progress" pattern. The stagger creates a wave effect used in chat apps.
Morphing Loader
An element transforms between square and circle using border-radius animation. The smooth interpolation creates an organic loading state.
Typewriter
Text appears letter by letter using CSS steps() timing and width animation on overflow: hidden. Iconic for terminal aesthetics and hero headings.
Staggered Word Reveal
Text split into words, each animating in with a slight delay after the previous. Creates a cinematic feel for hero headings.
Gradient Text Sweep
Text rendered with background-clip: text and a moving linear-gradient. The sweeping colour creates a premium, modern feel for hero headings.
Number Counter
A number animates from start to end using requestAnimationFrame and easing. Creates momentum and achievement. Common on dashboards and stats sections.
3D Card Flip
CSS perspective and rotateY(180deg) with backface-visibility: hidden creates a card with a front and back. Used for product cards and flashcards.
Squash & Stretch
One of Disney's 12 Animation Principles. On land: squash (wider, shorter). On launch: stretch (taller, narrower). Makes UI feel physical and alive.
Motion Path
CSS offset-path allows elements to travel along an SVG path, automatically rotating to follow direction. Used for decorative elements and onboarding flows.
SVG Shape Morph
SVG path d attribute animated between two shapes with identical point counts. Used for play/pause icons, hamburger/X menus, and decorative blobs.
Scroll Fade Up
Elements animate from invisible + offset to natural position when scrolled into view via IntersectionObserver. The most common reveal on modern marketing sites.
Parallax Scroll
Background scrolls slower than foreground, creating depth illusion. Now achievable with CSS animation-timeline: scroll() without JS.
Clip-Path Reveal
clip-path defines the visible element area. Animating from inset(0 100% 0 0) to inset(0 0 0 0) creates a cinematic left-to-right wipe reveal.
Staggered List Reveal
Each list item animates in after the previous with a 50–100ms stagger, creating a waterfall cascade that guides the eye down the list.
Grid Choreography
Child elements animate in sequence with 30–60ms stagger offsets. Guides the viewer's eye through content hierarchy and prevents visual chaos.
Material Ripple
A circle spawns at exact click coordinates and expands outward while fading. Material Design's core tactile feedback — the visual originates from the action point.
Elevation Lift
Increasing shadow depth combined with translateY(-4px) simulates a surface rising toward the viewer. Material Design defines 24 elevation levels.
Ken Burns Effect
A slow cinematic zoom and pan on a static background. Named after documentary filmmaker Ken Burns. Creates depth in hero sections and portfolio headers.
Glassmorphism Shimmer
Frosted glass aesthetic: backdrop-filter blur, semi-transparent background, subtle border. A diagonal shimmer sweep finishes the premium effect used in Apple visionOS.