whatisgithub

What is auto-animate?

formkit/auto-animate — explained in plain English

Analysis updated 2026-06-24

13,820TypeScriptAudience · developerComplexity · 1/5Setup · easy

In one sentence

AutoAnimate is a tiny JavaScript utility that adds smooth animations when elements are added, removed, or reordered on a web page, no configuration needed, works with React, Vue, Solid, and plain JavaScript.

Mindmap

mindmap
  root((auto-animate))
    What it does
      Smooth animations
      Zero configuration
      Single line setup
    Framework support
      React
      Vue
      Solid
      Vanilla JS
    Installation
      npm package
      yarn
      pnpm
    Use Cases
      List add and remove
      Element reordering
      UI polish
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

What do people build with it?

USE CASE 1

Make items in a React list smoothly slide in and out when added or removed, with one line of code.

USE CASE 2

Add reorder animations to a Vue drag-and-drop list without writing any CSS transitions or keyframes.

USE CASE 3

Polish a web app's UI with smooth motion effects by pointing AutoAnimate at any container element.

What is it built with?

TypeScriptJavaScriptVueReactSolid

How does it compare?

formkit/auto-animatefengyuanchen/cropperjsbuilderio/mitosis
Stars13,82013,81813,834
LanguageTypeScriptTypeScriptTypeScript
Setup difficultyeasyeasymoderate
Complexity1/52/53/5
Audiencedeveloperdeveloperdeveloper

Figures from each repo's GitHub metadata at analysis time.

How do you get it running?

Difficulty · easy Time to first run · 5min

Single npm install, no build config changes needed. Works by wrapping an existing DOM element reference with one function call.

Free and open source, specific license terms are in the repository.

So what is it?

AutoAnimate is a small utility that adds smooth motion to a web app's interface with very little setup. The README calls it zero-config and drop-in, meaning you do not have to configure much: you add it, point it at a part of your page, and elements that get added, removed, or reordered will animate into place instead of snapping there instantly. The promise on the page is motion "with a single line of code." The tool is written in TypeScript and is meant to work across the popular ways people build web interfaces. The README says you can use it with Vue, React, Solid, or any other JavaScript application, so it is not tied to one framework. That makes it useful for a wide range of projects rather than just one ecosystem. Installing it is short. The README shows commands for three common package managers (yarn, npm, and pnpm), each a single line that adds the @formkit/auto-animate package to your project. The page is light-hearted about how quick this is, with a "Boom! Done" note. For the actual details of how to use it, the README does not include them inline. Instead it links out to the project's documentation site for usage instructions, examples, and information about plugins. So the README works as a short front door, and the real how-to lives on the linked docs site. The rest of the page covers community matters. It is a free and open source project, and the authors ask people who find it useful to consider supporting them through one-time or recurring donations via GitHub Sponsors. It also welcomes contributions, suggesting that anyone who wants to make a change first discuss it with the core team through GitHub issues or the project's Discord. In plain terms, this repository offers a lightweight, framework-agnostic way to make web pages feel more polished when their content shifts around, without the developer having to write animation code by hand.

Copy-paste prompts

Prompt 1
I have a React component where list items get added and removed dynamically. Show me how to use @formkit/auto-animate to make those changes animate smoothly.
Prompt 2
How do I add AutoAnimate to a Vue 3 component so that list reordering triggers smooth slide transitions without any CSS?
Prompt 3
I'm building a plain JavaScript app with no framework. How do I install @formkit/auto-animate and attach it to a DOM element?
Prompt 4
I installed AutoAnimate but want the animations to feel slower and use a different easing curve. How do I customize the duration and easing?

Frequently asked questions

What is auto-animate?

AutoAnimate is a tiny JavaScript utility that adds smooth animations when elements are added, removed, or reordered on a web page, no configuration needed, works with React, Vue, Solid, and plain JavaScript.

What language is auto-animate written in?

Mainly TypeScript. The stack also includes TypeScript, JavaScript, Vue.

What license does auto-animate use?

Free and open source, specific license terms are in the repository.

How hard is auto-animate to set up?

Setup difficulty is rated easy, with roughly 5min to a first successful run.

Who is auto-animate for?

Mainly developer.

Open on GitHub → Ask about another repo

This repo across BitVibe Labs

Verify against the repo before relying on details.