AutoAnimate
A small drop-in library that adds smooth animations when elements are added, removed, or moved.
- Stars
- 14k
- Forks
- 268
- Licence
- MIT
- Language
- TypeScript
- Last update
- 4 months ago
- Type
- Library
What it is
AutoAnimate is a JavaScript utility that adds motion to web interfaces with little setup. You attach it to a parent element and its children animate smoothly as they are added, removed, or reordered. The README says it works with Vue, React, Solid, or any other JavaScript app.
- Animate items appearing and disappearing in a to-do list
- Smooth transitions in a dropdown or accordion menu
- Animate reordering of items in a sortable list
Great for
- Frontend developers who want polished list or menu transitions without writing animation code
- Teams using Vue or React who want a quick UI improvement
- Projects that need simple motion rather than complex custom animation sequences
Not ideal for
- Developers who need fine-grained control over timing and keyframes, since the README presents it as a zero-config tool
- Projects that cannot add a JavaScript dependency to the frontend
How to get it
- 1
Install with a package manager
npm
npm install @formkit/auto-animateyarn
yarn add @formkit/auto-animatepnpm
pnpm add @formkit/auto-animate - 2
Run it
- Install the package with npm, yarn, or pnpm
- Import AutoAnimate into your project following the docs site instructions
- Attach it to a parent element whose children you want animated
- Add, remove, or reorder children and observe the transitions
- 3
Get the most out of it
- Read the documentation site's usage section for framework-specific setup
- Check the examples section on the docs site for patterns
- Review the plugins section on the docs site to see whether extensions fit your needs
Downloads
Strengths
- Very little code is needed to get started, per the README's one-line claim
- Works across several frameworks, including Vue, React, and Solid
- Permissively licensed under MIT and actively maintained
Trade-offs
- The README is short on details, so specific behavior and customization depend on the external docs site
- Being zero-config means less control over animation specifics
How it compares
| Project | Stars | Type | Level | Updated | Best for |
|---|---|---|---|---|---|
| auto-animate (this) | 14k | Library | beginner | 4 months ago | Frontend developers who want polished list or menu transitions without writing animation code |
| react-spring | 29.3k | Library | intermediate | 5 days ago | React developers who want fluid, physics-based animations |
| storybook | 91.4k | Dev tool | intermediate | 4 days ago | Frontend teams building a shared component library or design system |
| animated-tab-bar | 11.1k | Library | intermediate | 4.8 years ago | iOS developers who want animated tab bar icons without writing the animation logic from scratch |
| folding-cell | 10.2k | Library | intermediate | 2.5 years ago | iOS developers building list screens with expandable items |
| Material | 12k | Library | intermediate | 4.5 years ago | iOS developers who want Material Design-style components without building them from scratch |
Stats synced from GitHub. The assessment above was drafted with AI from the project's README on 2026-10-29 and may miss recent changes — check the README before relying on a command. MIT licence: free to use, modify and distribute, including commercially, as long as you keep the copyright notice.