AutoAnimate
One line on a parent element animates every child add, remove and move
Tier A · StrongAnimation LibraryToolauto-animate.formkit.com
AutoAnimate is FormKit's zero-config animation utility: you attach it to a parent element and it automatically transitions children as they are added, removed or reordered, using the Web Animations API and no CSS classes of your own. It ships first-party bindings for React and Preact (`useAutoAnimate`), Vue (`v-auto-animate` and a composable), Solid (`createAutoAnimate`), Svelte (an action), Angular (`AutoAnimateDirective`) and Marko, plus the plain `autoAnimate(el, options)` call for vanilla JS. Options cover duration and easing, and passing a function instead returns a `KeyframeEffect` for fully custom animations. It respects `prefers-reduced-motion` and disables itself automatically. MIT, ~13.9k stars.
npm install @formkit/auto-animateFor an agent
Reach for this before Motion or Framer Motion whenever the animation is just 'the list changed' — todo lists, filtered grids, form field arrays, accordions, drag-reorder results — because it is one hook on the parent instead of AnimatePresence, layout props and keys on every child. It does not do enter/exit choreography, scroll-driven timelines, gestures or shared-element transitions; the moment you need those, switch libraries rather than fighting the plugin API. Watch two traps: the animated children must be direct children of the element you attach to, and every child needs a stable key or React will destroy and recreate nodes that AutoAnimate then animates as unrelated add/remove pairs.
Why it is here. It removes the single most common motion chore in web apps with essentially zero configuration and no design decisions to make, and it honours reduced-motion without being asked.
Facts
- License
- MIT
- Pricing
- Free, Open source
- Framework
- React, Vue, Svelte, Solid, Preact, Angular, Vanilla JS
- Styling
- Not applicable
- Distribution
- npm package, GitHub repository
- Platform
- Web
- Content type
- Code
- Agent readiness
- CLI installable, Structured documentation, Readable open source
- Accessibility
- Honors reduced motion
- Maturity
- Stable
- GitHub stars
- 13,900
- Package
- @formkit/auto-animate
Components it ships
2Helps you build
2Notable for
- one-line drop-in on any parent
- bindings for 7 frameworks plus vanilla
- Web Animations API, no CSS classes
- respects prefers-reduced-motion by default
- KeyframeEffect plugin escape hatch
Provenance
Verified 2026-08-15. HTTP 200. https://auto-animate.formkit.com/, https://auto-animate.formkit.com/#usage, https://github.com/formkit/auto-animate
Also in Motion & Interaction
6- GSAP · JavaScript animation engine with 19 plugins, now free for commercial use
- Lenis · Smooth-scroll engine that keeps native scroll and honours reduced-motion
- Motion · Hybrid JS/React/Vue animation engine with springs, layout and scroll animation
- NumberFlow · Dependency-free animated number component for React, Vue, Svelte and JS
- React Bits · 234 copy-paste animated React components: text effects, cursors, WebGL backgrounds
- React Native Reanimated · UI-thread animation library for React Native, v4 on the New Architecture