About Animation Patterns

What this site is

Animation Patterns (animationpatterns.art) is a reference gallery for reusable web animation patterns. Each entry is a self-contained, copy-ready example built on standard web technologies — CSS keyframes, transitions, the View Transitions API, scroll-driven animations, SVG path drawing, and modern motion primitives — with no proprietary frameworks or external animation libraries required to run them.

The catalog currently includes 65 patterns across categories such as pulse and glow, gooey blob, shimmer skeletons, marquee tickers, scroll reveal, modal and layout transitions, text animation, loaders, micro interactions, SVG path draw and morph, 3D and perspective effects, page transitions, and ambient backgrounds.

Why it exists

Most animation references live as scattered CodePens, Stack Overflow snippets, or single-purpose blog posts. They're great for inspiration, but they're inconsistent in quality, often tied to a specific framework, and frequently rely on licensed assets that can't be reused.

Animation Patterns exists to consolidate the modern motion vocabulary in one place: every pattern is implemented from first principles, every demo is interactive, and every piece of code can be lifted directly into a real product. The aim is to give designers, frontend engineers, and prototypers a single starting point for production-ready motion.

How patterns are created

All animations on this site are reimplemented from scratch. External references are used only for research and technique discovery; no external SVG, GIF, Lottie JSON, brand asset, or third-party animation library is committed or shipped with the site.

• Specs over snippets — implementations are based on official MDN and W3C documentation rather than copy-pasted examples.
• Accessibility-aware — patterns respect prefers-reduced-motion, keyboard focus, and semantic markup wherever applicable.
• License-clean — every component is original code under the site's own terms; you can read, learn from, and adapt it freely.
• Static delivery — the site is a fully static export, so demos load fast and run without server-side runtime.

Categories

The catalog is organized into the following pattern groups:

• Pulse, glow, and breathing animations
• Gooey blob and metaball effects
• Shimmer skeletons and loading placeholders
• Marquee, ticker, and infinite scroll
• Scroll reveal and scroll-driven animations
• Modal, dialog, and side sheet transitions
• Layout transitions and View Transitions API
• Text animation (typewriter, glitch, scramble, gradient sweep)
• Loaders and progress indicators
• Micro interactions (hover, focus, ripple, toggle)
• SVG path drawing and morphing
• 3D and perspective effects
• Page transitions
• Backgrounds and ambient motion
• Theme transitions and dark-mode crossfades
• Feedback (toast, shake, badge, ripple)
• Data visualization animations

Stack

Animation Patterns is built with Next.js (App Router, static export), TypeScript, and plain CSS. Demos are pure HTML, CSS, and SVG — no animation framework required. The site is hosted on Cloudflare Pages.

Support the project

Status: cat owns me. I just pay rent in churu.

This site is free — no paywalls, no gated patterns. But my cat's churu habit is wrecking my grocery budget faster than I can ship new patterns, and she shows zero remorse. If something here saved you time on a real project, throw a churu her way. She has expensive taste.

(I don't eat any of it. I just sign the receipts.)

🐟 Send a churu →

FAQ

Are these animation patterns free to use?

Yes. Every pattern is published under Creative Commons Attribution 4.0 (CC BY 4.0) — copy the HTML, CSS, JS, and SVG snippets directly into commercial or personal projects with attribution.

Why CSS and SVG instead of an animation framework?

Animation frameworks ship a runtime that has to load, parse, and execute on every page that uses them. CSS keyframes and the View Transitions API run in the browser's native compositor with zero runtime cost — smaller bundle sizes, faster Largest Contentful Paint, better battery life on mobile.

Do these patterns respect prefers-reduced-motion?

Yes. Every pattern includes an explicit @media (prefers-reduced-motion: reduce) block that either freezes the animation at a stable rest state or replaces it with a static visual equivalent. The fallback is documented inside each pattern's inspector.

Which browsers do the patterns support?

All patterns target Chromium, Safari (including iOS), and Firefox using web-standard CSS and SVG. View Transitions and :has()-based patterns include progressive-enhancement fallbacks for browsers that don't yet support those features.

Can I use these patterns in commercial work?

Yes — CC BY 4.0 explicitly allows commercial use. Attribution is required (a credit line linking back to animationpatterns.art in your project's README or about page). Each pattern's inspector also ships a Prompt tab you can paste into an LLM to regenerate the pattern in your own coding style.

How do I make a gooey blob effect in CSS?

A gooey blob needs two ingredients: overlapping shapes (divs or SVG circles) and an SVG filter that blurs the alpha channel then thresholds it back to a hard edge. The filter is feGaussianBlur (stdDeviation ~9) followed by feColorMatrix that multiplies alpha by ~18 and subtracts ~7 — this fuses the blurred halos into a single silhouette. See gooey-blob-construction and gooey-blob-metaball-filter for working source.

What's the difference between View Transitions API and CSS transitions?

CSS transitions interpolate one element's property change in place. The View Transitions API interpolates state across navigations or DOM swaps — you give two elements the same view-transition-name and the browser cross-fades, morphs size, and translates between them automatically. CSS transitions are for in-page state changes; View Transitions are for shared-element morphs between page states or routes. See shared-element-layout-transition for a progressive-enhancement implementation.

Can CSS animations replace GSAP or Framer Motion?

For the majority of UI motion (transitions, loaders, hover states, reveals, layout morphs, marquees, parallax) — yes. CSS keyframes plus the View Transitions API plus Web Animations API element.animate() cover almost every effect those libraries do, with zero runtime cost and native compositor performance. JS libraries still win for true spring physics, scroll-driven choreography with many keyframes per pixel, or timeline-style sequencing across dozens of elements. Every pattern here ships the first 90% of common UI motion with pure CSS.

How many patterns are included, and what categories?

65 patterns across categories like pulse and glow, gooey blob and metaball, shimmer skeletons, marquee tickers, scroll reveal and snapping, modal and side-sheet transitions, layout transitions (View Transitions + shared element), text animation (typewriter, glitch, scramble, gradient sweep, variable font morph), loaders and progress bars, micro-interactions (hover, focus, ripple, toggle), SVG path drawing and morphing, 3D and perspective, page transitions, ambient backgrounds, theme transitions and dark-mode crossfades, feedback (toast, shake, badge, ripple), and data visualization animations.

Do the patterns work with React, Vue, Svelte, or Next.js?

Yes — every pattern is framework-agnostic. The CSS keyframes and SVG markup don't depend on any runtime. The HTML tab in each pattern's inspector emits vanilla DOM markup (class=, plain attributes for events) that pastes into any framework. JS-driven patterns (toast push, ripple click, success-check replay) use only the DOM standard API — no jQuery, no React-specific hooks, no framework wrappers.

Contact

Questions, corrections, or suggestions for new patterns are welcome. Reach out at jeongyuseck@gmail.com or visit the contact page for the longer version.

For information about how this site handles data and advertising, see the Privacy Policy.