formkit/auto-animate

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

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

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

Things people build with this

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.

Tech stack

TypeScriptJavaScriptVueReactSolid

Getting 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.

In plain English

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?

Open on GitHub → Explain another repo

← formkit on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.