The Vibeary — round-up
Best web animation libraries
Motion is the difference between an interface that works and one that feels alive, but the wrong engine makes everything harder. Timeline-based engines are unbeatable for choreographed sequences; spring-based libraries feel better for anything a user drags or dismisses; and layout-animation libraries solve the specific, painful problem of animating between two DOM states. This list separates them by what they are actually good at, so you can pick by problem rather than by GitHub stars.
What earned a place
- Respects prefers-reduced-motion or makes it easy to
- Runs animations off the main thread where possible
- Reasonable bundle size for what it does
- Documented well enough to use without reverse-engineering demos
23 picks from the library
- 01
AniJS
Declarative animation library driven entirely by HTML data attributes, letting non-JS authors wire triggers to CSS animations.
Why it made the list: Zero-JS authoring model that still works for CMS and no-code handoffs.
Animation enginesMITAniJSanijs.github.io
- 02
Animate Plus
3KB Promise-based animation module for CSS and SVG properties, using requestAnimationFrame with no dependencies or plugin system.
Why it made the list: Tiny, elegant API from a respected engineer; a fraction of GSAP's weight.
Animation enginesMITBenjamin De Cock (@bendc)github.com
- 03
Anime.js
Timeline-based animation engine covering CSS, SVG, DOM attributes and JS objects; v4 rewrote it into tree-shakeable modules.
Why it made the list: v4's modular rewrite and WAAPI adapter make it a genuine GSAP substitute, free.
Animation enginesMITJulian Garnier (@juliangarnier)animejs.com
- 04
Animista
Interactive playground for tweaking pre-made CSS animations and copying only the keyframes you configured.
Why it made the list: Tree-shaking for CSS animations before that was a phrase; still unmatched UX.
CSS animation collectionsfreeAna Travas (@ana108) & Sergej (@sergej108)animista.net
- 05
Between.js
ES6 tweening engine that interpolates numbers, colors, vectors and objects with a chainable API and no DOM assumptions.
Why it made the list: Framework-agnostic tween math you can drop into canvas, WebGL or DOM work.
Animation enginesMITAlexander Buzin (@sasha240100)github.com
- 06
bezier-easing
Tiny, dependency-free implementation of CSS cubic-bezier timing as a JS function, using Newton-Raphson with a sample table.
Why it made the list: The canonical 1KB implementation everyone silently vendors into their own engine.
Easing toolsMITGaëtan Renaudeau (@gre)github.com
- 07
Bounce.js
Tool and library for generating CSS keyframe animations from physics presets like bounce, hardbounce, sway and wobble.
Why it made the list: Physics-derived keyframes exported as static CSS — springs without a runtime.
CSS animation collectionsMITTictail (@tictail)github.com
- 08
Ceaser
Single-page cubic-bezier visualizer with named presets and live preview of the curve against a moving element.
Why it made the list: Fifteen-year-old one-pager still faster than every modern easing tool.
Easing toolsfreeMatthew Lein (@matthewlein)matthewlein.com
- 09
csshake
CSS classes producing tuneable shake, wobble and jitter motion via generated keyframes, with intensity and chunk variants.
Why it made the list: A whole grammar for one gesture; the error-state shake solved permanently.
CSS animation collectionsMITelrumordelaluzgithub.com
- 10
Easing Wizard
Editor for CSS easing that covers cubic-bezier, steps, springs, bounces and overshoots, exporting linear() output for browsers.
Why it made the list: Only easing tool that treats linear() springs as first-class; instantly copyable.
Easing toolsfreeMatthias Martin (@RoyDigerhund)easingwizard.com
- 11
Easings.net
Reference of standard easing functions with animated previews, cubic-bezier values and copyable code in several languages.
Why it made the list: The lookup table you keep open in a tab; multi-language snippets are underrated.
Easing toolsfreeAndrey Sitnik & Ivan Soloveveasings.net
- 12
Hover.css
Collection of CSS3 hover effects — 2D transitions, background sweeps, icons, curls, speech bubbles — in CSS, Sass and LESS.
Why it made the list: Ancient but timeless; still the fastest way to steal a hover state.
CSS animation collectionsMITIan Lunn (@IanLunn)ianlunn.github.io
- 13
Kinetics
153 interface animations built on spring physics rather than fixed-duration easing; tune stiffness and damping, then copy CSS, React or an AI prompt.
Why it made the list: Ships every effect three ways — CSS, React, and a prompt for your agent.
CSS animation collectionsfreeColorionkinetics.colorion.co
- 14
Linear Easing Generator
Converts a JS easing function or spring definition into an optimized CSS linear() value with adjustable point budget.
Why it made the list: Turns arbitrary JS easing math into pure CSS; the point-count slider is the trick.
Easing toolsopen-sourceJake Archibald (@jakearchibald)linear-easing-generator.netlify.app
- 15
Magic Animations
CSS animation set focused on special effects — magic, bling, perspective, foolish and rotational entrances beyond the Animate.css vocabulary.
Why it made the list: Animate.css's weirder sibling; the perspective and bling sets have no equivalent.
CSS animation collectionsMITminiMAC (@miniMAC)github.com
- 16
Mo.js
Declarative motion-graphics toolbelt for bursts, shape swirls and custom timelines; built for particle-style UI flourishes, not tweening DOM.
Why it made the list: Motion-graphics thinking on the web; nothing else does burst/swirl primitives this cleanly.
Animation enginesMITOleg Solomka (@legomushroom)github.com
- 17
Motion
Hybrid engine combining the Web Animations API with a JS spring runtime, shipping React, Vue and vanilla bindings.
Why it made the list: The Framer Motion successor; the vanilla WAAPI build is the underused half.
Animation enginesMITMatt Perry (@mattgperry)motion.dev
- 18
Motion UI
Sass library generating transition and animation classes with configurable easing, delay and chaining, extracted from Foundation.
Why it made the list: Sass mixin approach means your motion tokens live in the design system, not markup.
CSS animation collectionsMITFoundation (@foundation)github.com
- 19
Popmotion
Functional, framework-agnostic motion primitives — springs, decay, keyframes, inertia — usable as building blocks under any renderer.
Why it made the list: The low-level layer under Framer Motion; great when you want the math only.
Animation enginesMITMatt Perry (@mattgperry)popmotion.io
- 20
Snabbt.js
Minimalist animation library that only touches CSS matrix transforms and opacity, keeping every animation on the compositor thread.
Why it made the list: Deliberately refuses to animate slow properties — performance by constraint, not discipline.
Animation enginesMITDaniel Lundin (@daniel-lundin)daniel-lundin.github.io
- 21
spring-easing
Library that converts spring physics parameters into easing keyframe arrays consumable by WAAPI, GSAP, Motion or CSS.
Why it made the list: Bridges springs into engines that only accept easings — a genuinely rare adapter.
Easing toolsMITOkiki Ojo (@okikio)spring-easing.okikio.dev
- 22
transition.style
46 drop-in enter/exit transitions applied by an HTML attribute, covering wipes, circles, polygons and squares with custom-property theming.
Why it made the list: Attribute-driven API means zero class churn; from a Chrome CSS advocate.
CSS animation collectionsApache-2.0Adam Argyle (@argyleink)transition.style
- 23
Weeee.js
Sub-kilobyte tweening engine exposing a single function that animates arbitrary numeric values over time with easing.
Why it made the list: Almost zero bytes; useful when you need one tween and nothing else.
Animation enginesMITsfi0zygithub.com
Questions
- Timeline or spring animation?
- Timelines for choreographed, deterministic sequences. Springs for anything interactive, where the animation must be interruptible.
- Can I just use CSS?
- Often, yes — CSS transitions and scroll-driven animations cover a lot now. Reach for a library when you need orchestration, interruption or layout transitions.