---
name: AutoAnimate
slug: autoanimate
url: "https://dontmakeitugly.com/resources/autoanimate"
website: "https://auto-animate.formkit.com"
github: "https://github.com/formkit/auto-animate"
npm: "https://www.npmjs.com/package/@formkit/auto-animate"
type: package
categories:
  - motion
tags:
  - animation
  - lists
  - zero-config
  - react
  - vue
  - svelte
  - beginner
frameworks:
  - react
  - vue
  - svelte
  - vanilla
  - agnostic
pricing: free
license: MIT
openSource: true
agentFriendly: excellent
agentAccessMethods:
  - documentation
  - github
  - npm
installCommand: "npm install @formkit/auto-animate"
difficulty: beginner
staffPick: true
dateAdded: "2026-09-02"
lastVerified: "2026-09-02"
---

# AutoAnimate

One line of code that animates list changes for you.

- Type: Package
- Categories: Motion
- Pricing: Free · License: MIT
- Open source: yes
- Works with: React, Vue, Svelte, Vanilla JS/CSS, Framework agnostic, TypeScript

## What it is

AutoAnimate from FormKit is a zero-config utility: attach it to a parent element and any child added, removed or moved animates smoothly. Works with React, Vue, Svelte, Solid, Angular and vanilla JS. About 2kB.

## Why it's here

The highest return on effort in this whole directory. Todo lists, filters, notifications, anything that adds or removes items, instantly feels polished.

## Best for

- animating lists
- filter results
- beginners
- quick wins

## Links

- Website: https://auto-animate.formkit.com
- GitHub: https://github.com/formkit/auto-animate
- npm: https://www.npmjs.com/package/@formkit/auto-animate

## Can my agent use this?

Yes. The whole API is a single hook or function. Tell your agent to "add AutoAnimate to the list container".

Agent friendliness: Excellent. Public docs, public source or an installable package. An agent can read, install and implement this directly.
Access methods: Docs, GitHub, npm.
Install: `npm install @formkit/auto-animate`

## Prompt to hand your agent

```text
Use AutoAnimate as a design and implementation reference for this project.

What it is: One line of code that animates list changes for you.

Website: https://auto-animate.formkit.com
GitHub: https://github.com/formkit/auto-animate
npm: https://www.npmjs.com/package/@formkit/auto-animate
Install: npm install @formkit/auto-animate

Use it specifically for:
- animating lists
- filter results
- beginners
- quick wins

How you can access it: Docs, GitHub, npm.
Works with: React, Vue, Svelte, Vanilla JS/CSS, Framework agnostic.
License: MIT. Respect it.

Read the documentation before writing code, and use the current version's API. Install it properly rather than re-implementing it. Adapt the defaults to this project's existing design tokens, typography, spacing and accessibility requirements. Do not blindly copy the entire resource.
```

## Related

- [NumberFlow](https://dontmakeitugly.com/resources/number-flow.md): Animated number transitions that make counters, prices and stats feel expensive.
- [GSAP](https://dontmakeitugly.com/resources/gsap.md): The professional-grade animation toolkit, now free including all plugins.
- [Lenis](https://dontmakeitugly.com/resources/lenis.md): Smooth scrolling that doesn't fight the browser.
- [Anime.js](https://dontmakeitugly.com/resources/animejs.md): A lightweight, framework-free animation library with a beautiful API.

## In collections

- [Best resources for first-time vibe coders](https://dontmakeitugly.com/collections/first-time-vibe-coders.md)
- [Motion resources worth knowing](https://dontmakeitugly.com/collections/motion-worth-knowing.md)

AutoAnimate is an independent resource listed by Don't Make It Ugly. We link to it; we aren't affiliated with it. Pricing and licence details are as understood at the time of listing; check the official site.