Skip to content
Get packs

Guide · Open source

How to use AutoAnimate: install and add list transitions

Updated · written with AI from the project's own documentation and checked against our catalogue data

AutoAnimate is an open-source JavaScript utility from FormKit that adds smooth motion to web interfaces with very little setup. This guide shows you how to install it with npm, yarn or pnpm and how to attach it to a parent element so its children animate. It is aimed at frontend developers who want polished list or menu transitions without writing animation code.

AutoAnimateformkit/auto-animate · ★ 14k · MIT

Quick start

  1. 1Install the package. Run npm install @formkit/auto-animate, or use yarn add or pnpm add with the same package name.
  2. 2Open the docs. Go to https://auto-animate.formkit.com#usage to find the usage instructions for your framework.
  3. 3Pick a parent element. Choose the container whose direct children you want to animate, such as a list or menu.
  4. 4Attach AutoAnimate. Follow the single-line setup shown in the documentation for your framework.
  5. 5Test add, remove and reorder. Add, remove and reorder items in your interface to check that the transitions behave as you expect.

What AutoAnimate does

AutoAnimate is a zero-config, drop-in animation utility that adds smooth transitions to your web app. According to its README, you can use it with Vue, React, Solid or any other JavaScript application.

You attach it to a parent element, and its children animate smoothly as they are added, removed or reordered.

Install auto-animate with npm, yarn or pnpm

Install the package using your package manager of choice. The README lists the following commands. The source does not list any prerequisites for installing it.

  • npm: npm install @formkit/auto-animate
  • yarn: yarn add @formkit/auto-animate
  • pnpm: pnpm add @formkit/auto-animate
npm install @formkit/auto-animate

Attach auto-animate to a parent element

The README says you add motion with a single line of code and send readers to the documentation site for usage instructions. The exact usage code is on the docs site at https://auto-animate.formkit.com#usage, so check there for the current API in your framework.

Once attached to a parent element, the direct children animate when they are added, removed or reordered. This covers common cases such as to-do lists, menus and filtered result sets.

Know when auto-animate is the right choice

AutoAnimate suits projects that need simple motion rather than complex custom animation sequences. The README presents it as a zero-config tool, so it is not built for fine-grained control over timing and keyframes.

If your project cannot add a JavaScript dependency to the frontend, it will not fit.

  • Good fit: polished list or menu transitions, quick UI improvements in Vue or React apps
  • Poor fit: precise timing control, keyframe-based sequences, projects that cannot add frontend dependencies

Find examples, plugins and docs

The README links to the documentation site for usage, examples and plugin instructions. Those pages are the best place to find framework-specific examples and current plugin details.

  • Usage: https://auto-animate.formkit.com#usage
  • Examples: https://auto-animate.formkit.com#examples
  • Plugins: https://auto-animate.formkit.com#plugins

Alternatives to auto-animate

If you need more control, the source names several comparable projects: Framer Motion, FLIP.js, React Spring and GSAP. Those tools are better suited to custom timing and sequenced animation, though the source does not compare them in detail.

What people use it for

  • Animating items added to or removed from a to-do list
  • Adding smooth transitions to dropdown or navigation menus
  • Animating filtered or reordered result lists
  • Giving a Vue or React interface a quick visual polish

Frequently asked questions

How do I install auto-animate?

Install it with your package manager. The README lists npm install @formkit/auto-animate, yarn add @formkit/auto-animate and pnpm add @formkit/auto-animate. Then follow the usage instructions on the documentation site.

What are the requirements for auto-animate?

The README does not list any prerequisites. It states that the library works with Vue, React, Solid or any other JavaScript application, and it needs to be added as a frontend dependency.

Is auto-animate free to use?

The project is released under the MIT licence, as stated in the repository. The README also describes it as a free and open source project.

Does auto-animate work with React and Vue?

Yes. The README says it works with Vue, React, Solid or any other JavaScript application.

What are alternatives to auto-animate?

The source lists Framer Motion, FLIP.js, React Spring and GSAP as comparable projects. Choose one of these if you need fine-grained control over timing and keyframes.

Why are my animations not showing?

The source does not include troubleshooting steps. Check that the package installed correctly, that you attached it to the parent element as described in the docs, and that the children are being added, removed or reordered.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

AutoAnimate is a good choice for frontend developers in Vue, React or other JavaScript apps who want polished list and menu transitions with minimal setup. If you need precise control over timing, keyframes or complex animation sequences, pick a tool such as GSAP, Framer Motion or React Spring instead.

Install options & downloads