# formkit/auto-animate

A zero-config, drop-in animation utility that adds smooth transitions to your web app. You can use it with React, Vue, or any other JavaScript application.

Repository: https://github.com/formkit/auto-animate
Canonical: https://ross.abutalabs.com/products/auto-animate
Homepage: https://auto-animate.formkit.com
Language: TypeScript
License: MIT
License Family: permissive
Topics: animation, javascript, react, ui, vue
Last push: 2026-07-10T16:08:00+00:00

## Health v2 (maintenance only)
Score: 82/100 (v2, computed 2026-09-03T02:20:16.233290+00:00)
- activity 91, release rhythm 60, longevity 100
- inputs: {"age_days": 1575, "days_push": 54, "days_rel": 54, "gap_med": null, "n_releases_24m": 1}
- flags: none
- formula: round(0.45*activity + 0.35*rhythm + 0.20*longevity); archived -> min(score, 10)

## Adoption (not part of the score)
Stars 13908, forks 257 (observed 2026-08-28T04:11:05.026324+00:00)

## What it is
AutoAnimate is a zero-config, drop-in animation utility that adds smooth transitions to web apps with a single line of code. It works with React, Vue, Solid, Svelte, Angular, or any plain JavaScript application by animating DOM children when they are added, removed, or moved.

## Use cases
- animate list items when adding or removing entries
- add smooth transitions to a react app without config
- animate dom elements in a vue application
- retrofit animations onto existing or third-party markup
- improve ux of sortable lists with motion
- add micro-interactions to a javascript web app with one line of code

## When to choose
- you want automatic animations with zero configuration
- you need framework-agnostic animation that works with react, vue, svelte, or solid
- you want to animate existing markup retroactively, including third-party components
- you need simple add/remove/move transitions for lists and grids

## When to avoid
- you need complex, choreographed or timeline-based animations
- you require fine-grained control over keyframes and easing curves
- you need scroll-driven or physics-based animation
- your project uses a non-DOM rendering target without a parent element hook

## Facets
- artifact type: library
- maturity: stable
- function: animation, ui-components, frontend-framework
- domain: web-development, frontend, web-design
- platform: browser, cross-platform
- tags: zero-config, drop-in, react, vue, svelte, solid, dom-animations, typescript, nodejs

## Member repositories
- formkit/auto-animate (main) score 82

## Provenance
- Observed fields: from GitHub, fetched 2026-08-28T04:11:05.026324+00:00.
- Health v2: computed from the inputs above; adoption is never an input.
- Inferred fields (summary, facets, guidance): AI-extracted, prompt v1, taxonomy v1, on 2026-08-29T17:12:57.948403+00:00, confidence not recorded.
  - readme: https://github.com/formkit/auto-animate (fetched 2026-08-28T04:11:05.026324+00:00, sha 3f4162aa7b48)
  - homepage: https://auto-animate.formkit.com (fetched 2026-08-29T08:07:16.417961+00:00, sha fafcf85e9f77)
- Data as of 2026-08-30T08:39:29.467469+00:00.