# AutoAnimate — Zero-Config Drop-In Animation Utility

> A zero-configuration animation library that automatically adds smooth transitions when DOM elements are added, removed, or moved within a parent container.

## Install

Save in your project root:

# AutoAnimate — Zero-Config Drop-In Animation Utility

## Quick Use
```bash
npm install @formkit/auto-animate
```
```js
import autoAnimate from '@formkit/auto-animate';
autoAnimate(document.getElementById('list'));
```
Items added to or removed from `#list` now animate automatically.

## Introduction
AutoAnimate watches a parent element for changes to its children and applies smooth transitions automatically. When items are added, removed, or reordered, AutoAnimate handles the enter, leave, and move animations. It works with vanilla JavaScript, React, Vue, Svelte, and Angular with no configuration required.

## What AutoAnimate Does
- Animates new child elements entering a container with a fade-in and scale effect
- Animates removed child elements with a fade-out transition
- Smoothly repositions child elements when their order changes in the DOM
- Provides framework-specific hooks: useAutoAnimate for React, v-auto-animate for Vue
- Allows custom animation overrides via a plugin function

## Architecture Overview
AutoAnimate uses MutationObserver to detect when children of the target element change. On each mutation, it snapshots the current positions of all children using getBoundingClientRect, then uses the Web Animations API (WAAPI) to interpolate from old to new positions. Enter and leave animations are handled with opacity and transform keyframes. The entire system runs in a single requestAnimationFrame cycle per mutation batch.

## Self-Hosting & Configuration
- Install via npm or import from a CDN
- Call `autoAnimate(parentElement)` for instant zero-config animation
- Pass a duration number as the second argument to control speed (default 250ms)
- Use `autoAnimate(el, customPlugin)` to override the default animation behavior
- For React, use the `useAutoAnimate()` hook to get a ref callback

## Key Features
- True zero-config: one function call animates adds, removes, and reorders
- Framework adapters for React, Vue, Svelte, Angular, and SolidJS
- Tiny bundle size (~2 KB gzipped) with no dependencies
- Uses the native Web Animations API for smooth 60fps transitions
- Custom plugin system for full control over keyframes and timing

## Comparison with Similar Tools
- **Framer Motion (Motion)** — powerful React animation library with layout animations; AutoAnimate is simpler and framework-agnostic
- **Vue Transition Group** — Vue-specific with CSS class hooks; AutoAnimate requires no CSS
- **react-spring** — spring-physics animations; AutoAnimate provides instant list transitions without physics configuration
- **FLIP technique** — the underlying approach AutoAnimate uses; it automates what developers would otherwise code manually

## FAQ
**Q: Does AutoAnimate work with virtual lists?**
A: It works best with standard DOM lists. Virtualized lists that recycle DOM nodes may produce unexpected animation triggers.

**Q: Can I disable animation temporarily?**
A: Yes. The `autoAnimate()` call returns an `enable`/`disable` controller. Call `controller.disable()` to pause and `controller.enable()` to resume.

**Q: What browsers are supported?**
A: Any browser that supports MutationObserver and the Web Animations API, which includes all modern browsers.

**Q: Can I customize the animation?**
A: Yes. Pass a plugin function as the second argument. It receives the element, action (add/remove/remain), and coordinates, and returns a KeyframeEffect.

## Sources
- https://github.com/formkit/auto-animate
- https://auto-animate.formkit.com/

---
Source: https://tokrepo.com/en/workflows/asset-d9544315
Author: AI Open Source