Category · 22 tools
Libraries for motion on the web — from tiny stagger effects to scroll-driven storytelling.
22 shown
A cross-browser library of ready-to-use, just-add-a-class CSS animations like bounce, fade and zoom.
The classic just-add-a-class CSS animation library. Ancient by web standards and still handy for a quick attention cue.
Visit ↗A lightweight JavaScript animation engine for CSS, SVG, the DOM and JS objects.
The sweet spot between hand-rolled CSS and a heavy motion framework — tiny, framework-agnostic and a joy for staggered, timeline-based motion. If you are not on React, this is my first reach.
Deep dive →A web playground to tweak ready-made CSS animations and copy only the CSS you use.
Tweak ready-made CSS animations in the browser and copy only the keyframes you use. Great for grabbing a one-off effect without adding a dependency.
Visit ↗A composable CSS animation toolkit driven by custom properties, with Vue, React, SCSS and plain-CSS bindings.
Compose CSS animations from utility attributes without writing keyframes — a neat mental model. Tiny, but development is quiet, so weigh maturity.
Visit ↗A lightweight library for animating elements with data attributes as they scroll into view.
Animate-on-scroll with nothing but data attributes — the lazy, effective way to fade things in. Maintenance is quiet, but it still does the job in two minutes.
Visit ↗A zero-config utility that animates elements as they are added, removed or moved in the DOM.
Drop one function on a parent and added, removed and moved elements animate themselves — 2kB, reduced-motion aware. The 'Prettier for motion' tagline is earned.
Visit ↗A small library for fluid page transitions on multi-page sites using PJAX.
Smooth, app-like transitions between pages on a classic multi-page site. The trick behind a lot of those seamless agency-site navigations.
Visit ↗The industry-standard JavaScript animation platform, including ScrollTrigger and all plugins.
The heavyweight for production motion and scroll-driven storytelling — and as of 2024 every plugin is free thanks to Webflow. If you have seen an award-winning site animate, it was probably this.
Deep dive →A collection of CSS3 hover effects to apply with a single class.
Copy-paste CSS hover effects — grows, floats, shadows, you name it. Dated, but handy for grabbing one tasteful hover without writing keyframes.
Visit ↗A browser-based visual editor with a timeline for building CSS @keyframes animations.
A timeline editor for hand-building CSS @keyframes, more powerful than preset pickers. Open it when you actually need custom keyframes.
Visit ↗A lightweight smooth-scroll library that wraps native scroll while preserving accessibility and sticky positioning.
The smooth-scroll library on every award-winning site, and for good reason — silky, accessible, and it plays nicely with GSAP ScrollTrigger. My default for that buttery scroll feel.
Visit ↗A smooth-scrolling and in-viewport detection library with parallax support; v5 is built on Lenis.
Smooth scroll with parallax baked in; v5 is now a layer on top of Lenis. Use it for the parallax helpers; otherwise reach for Lenis directly.
Visit ↗An open JSON-based animation format with web players, plus the LottieFiles platform to create and host them.
JSON animations a designer exports and you ship with one player — the standard for vector motion on web and apps. The format is open; LottieFiles is the platform around it.
Visit ↗The animation library formerly known as Framer Motion — declarative motion for React and vanilla JS.
The default for React animation: spring physics, layout animations and gestures with a clean declarative API. The core is free and open source; only the Motion+ extras cost money.
Visit ↗A spring-physics animation library for React, supporting react-dom and react-three-fiber.
Spring-physics animation that feels alive and stays interruptible. Steeper than declarative libs, but the best at natural, gesture-driven motion — and it pairs with R3F.
Visit ↗A low-level set of React components that manage enter/exit transition stages and CSS classes.
A low-level primitive for mount/unmount transitions where you bring the CSS. Useful but legacy-feeling now; most reach for Motion or AutoAnimate instead.
Visit ↗A real-time interactive design and animation tool with open-source runtimes for apps, games and the web.
Interactive animation with state machines, so a button can react instead of just loop. The editor's freemium, but the runtimes are free — a step beyond Lottie when motion needs logic.
Visit ↗A JavaScript library that animates elements as they enter and leave the viewport on scroll.
Dead-simple scroll-reveal animations. Note the license — GPL for open use, paid if you need to keep your source closed.
Visit ↗A library that splits text into characters, words and lines for granular animation.
Splits text into spans so you can animate per letter or word — the basis of a lot of fancy heading reveals. Pair it with CSS or GSAP and go wild.
Visit ↗A no-code editor for creating animated SVGs and exporting them as CSS/JS, Lottie, GIF or video.
No-code, timeline-based SVG animation with export to CSS/JS or Lottie. For designers who want animated SVGs without hand-coding them.
Visit ↗A CSS-first collection of Tailwind v4 utilities for enter/exit and keyframe animations.
CSS-first Tailwind v4 animation utilities — the successor shadcn/ui ships by default. If you're on Tailwind v4, this replaces the old tailwindcss-animate plugin.
Visit ↗A library that animates text as if it is being typed out.
The typewriter effect in a tiny package — that 'we build ___' rotating headline you've seen everywhere. One job, done well.
Visit ↗