formkit/auto-animate

Health v2 · maintenance only

Adoption not part of the score

13908 stars · 257 forks observed · 2026-08-28

What it is AI-extracted, prompt v1, taxonomy v1, 2026-08-29, confidence not recorded

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

library · maturity stable

animation ui-components frontend-framework web-development frontend web-design browser cross-platform zero-config drop-in react vue svelte solid dom-animations typescript nodejs

Member repositories

For agents

markdown · JSON · MCP: product_card(name="formkit/auto-animate")