Guides
Real examples of web animation and motion design, each labelled with what it is best for, with live demos you can copy.
UI animation examples
- 10 Hamburger Menu Animation Examples, From Apple's Two-Line Morph to Full Libraries
Hamburger menu animation examples from Apple.com, Jonathan Suh's Hamburgers, hamburger-react and Android, with exact timings, accessibility notes and CSS demos.
- 10 Like Button Animations, From the X Heart Burst to YouTube's Themed Likes
Like button animation examples from X, Instagram, YouTube, Facebook and Medium, what each one teaches, and copy-paste CSS heart, thumbs and clap buttons.
- 10 Logo Loading Animation Ideas, and the Platform Rules That Decide Which Ones Work
Logo loading animation ideas from Google, Android, Apple, Lottie and Framer, with real splash screen timing rules, live demos and when a logo loader hurts.
- 11 3D Hover Effect Examples, From Apple TV Parallax to Holo Cards
3D hover effect examples: Apple TV parallax, vanilla-tilt.js, Atropos, holo cards and pure-CSS tilts and flips, with live demos, licenses and traps.
- 11 Animated 404 Page Examples That Are Still Live (and Why They Work)
404 page examples with real animation, from Kualo's playable Space Invaders to Airbnb and Lyft, each checked live, plus copyable CSS 404 animations.
- 11 Animated Background Examples: Auroras, Particles, Grids, Starfields and Shaders
Animated background examples from Aceternity, Magic UI, Vanta, tsParticles and Paper Shaders, with what each costs, live CSS versions to copy, and the traps.
- 11 Animated Gradient Examples, From Stripe's WebGL Mesh to One Line of CSS
Animated gradient examples from Stripe, Josh Comeau, CSS-Tricks, web.dev and ShaderGradient, with the technique behind each and live CSS versions you can copy.
- 11 Border Animation Examples, From Spinning Gradients to Border Beams
Border animation examples: conic gradient borders, border beams, marching ants and self-drawing SVG outlines, with live CSS demos and performance traps.
- 11 Checkbox Animation Examples, From a 120ms Tick to a To-Do Strike-Through
Checkbox animation examples from TodoMVC, Modern CSS, Sara Soueidan, Material and W3C, with the technique behind each and live pure-CSS checkboxes to copy.
- 11 Hero Section Animation Examples: Globes, Light Beams, 3D Scenes and Headlines That Move
Hero section animation examples from GitHub's globe to Spline, Rive and Aceternity, with how each is built, what it costs to load, and live CSS demos to copy.
- 11 Landing Page Animation Examples, and Exactly What Each One Animates
Landing page animation examples from Vercel, Linear, Shopify, tinyPod, GitBook and Igloo, with what each animates, how it is built, and live CSS demos to copy.
- 11 Neon Effect CSS Examples That Glow Without Melting the GPU
Neon effect CSS examples for text, borders and buttons, from CSS-Tricks and SynthWave '84 to Tailwind and neon fonts, with live demos and the flicker rules.
- 11 Number Counter Animation Examples, From CountUp.js to Pure CSS
Number counter animation examples: CountUp.js, Odometer, NumberFlow, Motion, SwiftUI and pure-CSS @property counters, with live demos, defaults and caveats.
- 11 Success Animation Examples, From a Quiet Checkmark to Full Confetti
Success animation examples from Duolingo, Apple Pay, react-hot-toast and canvas-confetti, with exact timings, honest caveats and live CSS checkmarks to copy.
- 11 Text Reveal Animation Examples: Lines, Words, Letters and Scroll
Text reveal animation examples with GSAP SplitText, Splitting.js, anime.js, Motion and scroll-driven CSS, with live demos, accessibility notes and real caveats.
- 11 Toggle Switch Design Examples, From the iOS Switch to Liquid Glass
Toggle switch design examples from iOS, Liquid Glass, Material 3, Windows 11 and HTML's new switch, with the rules each follows and live CSS switches to copy.
- 12 AI Thinking Animations: How Claude, ChatGPT, Gemini and Siri Show a Model at Work (With CSS)
AI thinking animation examples from Claude, ChatGPT, Gemini, Siri and the main chat UI kits, with live pure-CSS versions to copy and what each one gets right.
- 12 Animated Icon Examples and Libraries, Sorted by What the Motion Means
Animated icon examples from SF Symbols, Material Symbols, Lordicon, useAnimations and lucide-animated, with live CSS demos, formats, licenses and what to avoid.
- 12 Button Hover Effect Examples From Real Sites, With the Timings They Actually Use
Button hover effect examples from Stripe, Linear, shadcn/ui, Codrops and Hover.css, with the real timings, what each is best for and live CSS demos to copy.
- 12 Card Hover Effect Examples That Make a Grid Feel Clickable
Card hover effect examples from real libraries, Codrops and CodePen, each with what it is best for, the stack it needs, the catch, and a live CSS demo to copy.
- 12 Chatbot UI Animation Examples That Make a Reply Feel Alive
Chatbot UI animation examples from iMessage, Telegram, Vercel and open source chat kits: typing dots, streaming text, tool states, with live CSS demos.
- 12 CSS Animation Examples From the People Who Push CSS Furthest (With Live Demos)
The best pure CSS animation examples by category, from Temani Afif's loaders to Jhey Tompkins' 3D toggle and Adam Argyle's transitions, with live demos to copy.
- 12 Empty State Examples That Turn "Nothing Here" Into a Next Step
Empty state examples from Datadog, GitHub, Atlassian, Carbon, Apple and Material, with what each gets right, where motion helps, and live CSS demos to copy.
- 12 Glassmorphism Examples, From Liquid Glass to Fluent Acrylic, That Stay Readable
Glassmorphism examples from Apple Liquid Glass, Microsoft Acrylic and Mica, Josh Comeau and Hype4, with live CSS demos, real readability rules and fallbacks.
- 12 Loading Animation Examples From Real Design Systems and CSS Libraries (With Live Demos)
Loading animation examples from GitHub, Atlassian, Vercel, Material and top CSS loader libraries, each with a live demo, its best use and the trap to avoid.
- 12 Login Page Animation Ideas That Make Signing In Feel Friendly
Login page animation ideas from the Yeti avatar to Material floating labels, error shakes and password reveals, each with a live CSS demo or a real source.
- 12 Modal Animation Examples That Open Fast and Close Even Faster
Modal animation examples from native dialog, Radix, Headless UI, React Aria, Vaul and Codrops, with live CSS demos, real timings and the traps to avoid.
- 12 Navbar Hover Effects From Real Sites and CSS Classics, With Live Demos
12 navbar hover effects, from Stripe-style dropdowns to sliding pills and underlines, with what each suits, live CSS demos to copy and the traps to avoid.
- 12 Onboarding Animation Examples That Teach Without Slowing People Down
Onboarding animation examples from Duolingo, Material Design, Apple TipKit and tour libraries, with real timing specs, honest caveats and live CSS demos.
- 12 Page Transition Examples, From One Line of CSS to Award-Site Wipes
Page transition examples using View Transitions, Astro, SvelteKit, React, Barba.js, swup and Taxi.js, with browser support, live demos and the traps to avoid.
- 12 Portfolio Website Animation Examples That Get Remembered (and What Each Costs to Build)
Portfolio website animation examples from Bruno Simon, Lynn Fisher, Brittany Chiang and more: what each animates, the stack behind it and what to copy.
- 12 Scroll Animation Examples, From CSS-Only Reveals to Pinned Scroll Stories
12 scroll animation examples, from CSS scroll-driven reveals on real stores to GSAP pinning and scrollytelling, with live demos, tools and honest caveats.
- 12 Tooltip Animation Examples That Help Without Getting in the Way
Tooltip animation examples from Radix, Tippy.js, Floating UI, Codrops and native popover=hint, each with what it is best for, live CSS demos and real caveats.
- 12 Typewriter Effect Examples, From One Line of CSS to Full Libraries
Typewriter effect examples from Typed.js, TypeIt, GSAP, VHS and pure CSS, with live demos, licence facts and the screen reader traps to avoid.
- 13 Button Click Animation Examples That Make Every Press Feel Real
Button click animation examples: press scale, 3D push, ripple, loading to success, bursts and confetti, with real timings, live CSS demos and the traps.
- 13 Dark Mode Toggle Examples, From One-Click Icons to Full-Page Reveals
Dark mode toggle examples from GitHub, Vercel, Josh Comeau and more, with the code pattern behind each, live CSS demos and the bugs that ruin theme switches.
- 13 Ecommerce Animation Examples That Help People Buy (Not Just Look Nice)
Ecommerce animation examples from Shopify's Horizon theme, Nykaa and proven libraries: add to cart, wishlist, zoom, page transitions, live demos and the traps.
- 13 Image Hover Effect Examples, From Shop Grids to Codrops Classics
Image hover effect examples from Shopify, YouTube, Codrops and open-source libraries, each with what it is best for, the catch, and a live CSS demo to copy.
- 13 Micro-Interaction Examples From Apps You Use Every Day (and What Each One Teaches)
Micro-interaction examples from iOS, Asana, Duolingo, Google Home, Sonner and more, each broken into trigger and feedback, with live CSS versions you can copy.
- 13 Skeleton Screen Examples From Real Apps (and When a Spinner Wins)
Skeleton screen examples from Facebook, YouTube, Airbnb, Uber, eBay and the big UI kits, with live CSS demos to copy and research on when they backfire.
- 13 SVG Animation Examples, and the Technique Behind Each One
SVG animation examples grouped by technique: line drawing, morphing, goo filters, SMIL and Lottie, each with what it is best for, live demos and the traps.
- 13 Tailwind Animation Examples, From the Four Built-ins to Full Component Kits
Tailwind animation examples for v4: the built-in animate classes, custom @theme keyframes, tw-animate-css and component kits, with live demos and caveats.
- 13 Website Loading Screen Examples, and When a Preloader Hurts More Than It Helps
Website loading screen examples from Slack, Awwwards studios, Three.js, Unity, Godot and Next.js, with live CSS demos and the LCP traps preloaders hit.
- 14 Progress Bar Animation Examples, From Top Loading Bars to Wavy Material Indicators
Progress bar animation examples from YouTube, NProgress, Turbo, Material 3 and Bootstrap, with live CSS demos to copy and the honest trap behind each one.
- 14 SaaS Website Animation Examples, Explained by the Teams Who Built Them
SaaS website animation examples from Stripe, GitHub, Vercel, Figma, Intercom and Dropbox: what each animates, how it was built and what to copy.
- 14 Text Animation Examples for Websites (That Stay Readable)
Text animation examples from GSAP, Splitting.js, Rough Notation, Josh Comeau and more, each with live CSS demos, what it suits and the accessibility traps.
- Glitch Effect CSS: 12 Examples, From the Original Pen to WebGL (and the Safety Rule Most Skip)
Glitch effect CSS examples: the classic RGB-split pen, Codrops image glitch, PowerGlitch, CRT and VHS looks, WebGL glitch, live demos and the flash safety rule.
- Gradient Text CSS: 12 Real Examples, Read Straight From Stripe, Apple and Vercel's Stylesheets
Gradient text CSS from the live stylesheets of Stripe, Apple, Vercel, Linear and Raycast, plus the base technique, shimmer effects, live demos and the traps.
- How to Make a Scroll Animation Like Apple: 13 Techniques, Recreations and Demos
How Apple-style scroll animations work: image sequences on canvas, pinned sections, GSAP and pure-CSS scroll timelines, with recreations, live demos and costs.
Motion design and video
- 11 Data Visualization Animation Examples That Make Numbers Land
Data visualization animation examples from Hans Rosling, Neil Halloran, Periscopic, The Pudding and Nadieh Bremer, plus bar chart race tools and live versions.
- 12 App Promo Video Examples, Plus the App Store and Google Play Rules That Shape Them
App promo video examples from Duolingo, Strava, Calm, Monzo and Airbnb, plus App Store and Google Play preview rules, so your video plays where installs happen.
- 12 Isometric Animation Examples, From Zaxxon to Monument Valley (Plus Copyable CSS)
Isometric animation examples from Zaxxon, Knight Lore, SimCity 2000, Monument Valley and Hades, with what each teaches and live isometric CSS you can copy.
- 12 Kinetic Typography Examples, From Saul Bass to Stranger Things (and How to Make Your Own)
Kinetic typography examples from film titles, music videos, brand studios and the web, with credits, what each one teaches and a live CSS version to copy.
- 12 Logo Animation Examples, From Pixar's Lamp to Logos Made With AI, and What Each Teaches
Logo animation examples from Pixar, DreamWorks, MGM, Google, Netflix and Intel to AI-made reveals, each with the lesson to steal and the trap to avoid.
- 12 Product Launch Video Examples From 2024 to 2026, and the Format Behind Each
Product launch video examples from Apple, Anthropic, Notion, Linear, Arc, Raycast and Coinbase, with length, format, what lands first and the catch.
- 13 Motion Graphics Examples From Studios at the Top of Their Game (2026)
Motion graphics examples from BUCK, Oddfellows, Giant Ant, Golden Wolf, Imaginary Forces and more, each with what it does best, a watch link and the catch.
- 13 SaaS Demo Video Examples, and Exactly How Each One Is Cut
SaaS demo video examples from Linear, Figma, Notion, Raycast, Cursor and Dia, with the length, the format, where the hook lands and what to copy for your own.
- 13 YouTube Intro Ideas From Channels That Get Watched, Plus Ones You Can Make Tonight
YouTube intro ideas drawn from MrBeast, Kurzgesagt, MTV and MKBHD plus intros made with AI, each with a video preview, the channel it suits and the trap.
- 14 Explainer Video Examples, From 30 Seconds to 11 Minutes (and What Each Gets Right)
Explainer video examples from Dropbox, Slack, Google, GitHub, GoFundMe and TED, with the length, the studio, what each gets right and the mistake to avoid.
- 14 Motion Design Portfolio Examples That Get You Booked (and Why Each Works)
Motion design portfolio examples from working animators, directors and studios, each labelled with who it suits, what it gets right and the trap to avoid.
- 14 Social Media Motion Graphics Examples, From Spotify Wrapped to Posts Made in Five Minutes
Social media motion graphics examples: Spotify Wrapped, Duolingo and real posts made with Claude, each with the format it suits, a preview and the catch.
- Motion Design Trends 2026: 12 Real Shifts, Each Backed by a Launch or a Piece of Work (Plus 2 Ways to Try Them)
Motion design trends for 2026, each tied to a dated 2025 or 2026 source: Liquid Glass, springy Material motion, scroll-driven CSS, AI video and code-made film.
- Motion Design With Claude Code: 14 Real Examples and the Skills That Made Them
Motion design with Claude Code: 14 real films, promos and skills people made, credited and linked, with the engine each used and the catch to know first.
Tools, libraries and comparisons
- 10 Best AI CSS Generators in 2026, and How to Tell if Their CSS Is Any Good
The best AI CSS generators in 2026: Claude, ChatGPT, Gemini, v0, Copilot, CodePen AI, Figma Motion and more, with what each is best at and the checks to run.
- 12 Framer Motion Alternatives in 2026, From GSAP to Plain CSS
Framer Motion alternatives for 2026: GSAP, React Spring, AutoAnimate, Anime.js, React ViewTransition, CSS and more, with when each beats Motion and the catch.
- 12 Lottie Alternatives for 2026, Matched to Why You Are Leaving Lottie
Lottie alternatives for 2026: Rive, dotLottie, SVGator, Jitter, CSS, video and more, each with what it is best for, real pricing models and the catch.
- 12 UI Animation Tools for 2026, From First Prototype to Production Code
The best UI animation tools in 2026: Figma Motion, ProtoPie, Principle, Origami, Rive, Jitter, Framer, Motion and more, sorted by stage, with honest caveats.
- 13 After Effects Alternatives for Web Animation, Sorted by What a Browser Can Play
After Effects alternatives for web animation: Jitter, Rive, Cavalry, Figma Motion, Remotion, Motion Canvas and more, sorted by what each exports for browsers.
- 13 Best AI Animation Tools in 2026, Sorted by What They Actually Make
The best AI animation tools in 2026, split by output: generated video (Runway, Kling, Veo), AI in motion editors (Jitter, Figma, Rive) and code-built motion.
- 13 Best CSS Animation Libraries in 2026, With Licenses and Maintenance Checked
The best CSS animation libraries in 2026, from Animate.css and Animista to Open Props and AnimXYZ, compared on license, size, reduced motion and upkeep.
- 13 Best Motion Design Websites for Inspiration in 2026, for Film and the Web
The best motion design websites for inspiration in 2026: Awwwards, Codrops, Motionographer, Stash, Mobbin and more, each with what it is best for and the catch.
- Claude vs ChatGPT for Animation: 13 Jobs, and Which One to Hand Each To (2026)
Claude vs ChatGPT for animation in 2026: CSS, SVG, 3D, video and After Effects jobs compared with leaderboard data, outside tests and the catch for each.
- CSS Animation vs GSAP: 10 Jobs, Which Tool Wins Each, and Why
CSS animation vs GSAP, decided job by job: hover, loaders, scroll scenes, timelines, SplitText, SVG morphing, FLIP and reduced motion, with live demos.
- CSS Animation vs Transition: 10 Real UI Cases and Which One Each Needs
CSS animation vs transition, settled with 10 real UI cases and live demos: hover, toggles, popovers, loaders, scroll reveals, plus what @starting-style changed.
- Rive vs Lottie: 10 Real Projects That Show When Each One Wins
Rive vs Lottie through 10 real projects: Duolingo, Spotify Wrapped, LinkedIn, Intercom, Uber, Lordicon and more. What each one chose, why, and where CSS fits.
Craft and technique
- 14 CSS Animation Best Practices, Each Shown With a Real Example and a Live Demo
CSS animation best practices from web.dev, MDN, Paul Lewis and Apple: what to animate, how to keep 60fps, timing, easing and reduced motion, with live demos.
- 14 CSS Keyframes Examples by Pattern, Each Running Live With the Code to Copy
CSS keyframes examples by pattern: multi-step beats, entrances, exits, ping, bounce, steps(), 3D, stagger and scroll-driven, each live with the code to copy.
- 14 Easing Function Examples, From ease-out to Real Springs, You Can Watch and Copy
Easing functions examples with live demos: ease-out, ease-in, Material and Carbon curves, overshoot, springs with linear(), steps(), each with the CSS to copy.
- 14 Prefers-Reduced-Motion Examples: How Apple, GitHub and Real Sites Tone Motion Down
Prefers reduced motion examples from Apple, GitHub, the Animal Crossing site and the best CSS and React patterns, with live demos and the mistakes to avoid.
- How Long Should UI Animations Be? 13 Duration Rules With the Real Numbers From Material, Apple and Carbon
Animation duration UX rules with the real numbers from NN/g, Material, Carbon, Apple and GitLab, each with a live demo and the trap to avoid.