About Animation Patterns

A curated, hand-reimplemented catalog of CSS and SVG 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 57 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.

Contact

Questions, corrections, or suggestions for new patterns are welcome. Reach out at [email protected].

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