# AutoAnimate — Zero-Config Drop-In Animation Library

> A single-function animation utility that automatically transitions DOM elements when they are added, removed, or moved, requiring no configuration and working with any JavaScript framework.

## Install

Save the content below to `.claude/skills/` or append to your `CLAUDE.md`:

# AutoAnimate — Zero-Config Drop-In Animation Library

## Quick Use
```bash
npm install @formkit/auto-animate
```
```javascript
import autoAnimate from '@formkit/auto-animate';
autoAnimate(document.getElementById('list'));
```

## Introduction
AutoAnimate adds smooth transitions to your web app with a single line of code. When child elements are added, removed, or rearranged in a parent container, AutoAnimate detects the changes and applies fluid CSS animations automatically.

## What AutoAnimate Does
- Detects when child elements are added to a parent and animates them in
- Animates removal of elements with a fade or slide out transition
- Smoothly moves elements to new positions when they are reordered
- Works with any framework (React, Vue, Svelte, Solid, Angular) or vanilla JS
- Requires no keyframes, no CSS classes, and no configuration by default

## Architecture Overview
AutoAnimate uses a MutationObserver on the parent element to detect DOM changes. When mutations are observed, it snapshots element positions before and after the change, then applies FLIP (First, Last, Invert, Play) technique using the Web Animations API. Each animation is calculated per-element to handle adds, removes, and moves independently within the same frame.

## Self-Hosting & Configuration
- Install via npm as @formkit/auto-animate
- Call autoAnimate(parentEl) on any container element
- Optionally pass a configuration object to set duration, easing, or disable specific animations
- Use framework-specific hooks: useAutoAnimate for React, v-auto-animate directive for Vue
- Total bundle size is approximately 2KB gzipped with zero dependencies

## Key Features
- True zero-config: one function call animates all child mutations automatically
- FLIP-based positioning ensures layout-shift-free smooth transitions
- Framework-agnostic core with official React, Vue, Svelte, and Angular integrations
- Custom animation plugins allow complete control over enter, leave, and move effects
- Respects prefers-reduced-motion media query out of the box

## Comparison with Similar Tools
- **Framer Motion** — powerful but React-only with a larger API surface
- **GSAP** — professional animation suite; requires explicit tween definitions per element
- **Vue Transition Group** — Vue-specific; AutoAnimate works in any framework
- **React Transition Group** — low-level, requires manual CSS classes
- **CSS transitions** — manual class toggling; no automatic detection of DOM mutations

## FAQ
**Q: Does AutoAnimate cause layout thrashing?**
A: No. It reads all positions in a single batch, then applies animations using transforms that bypass layout.

**Q: Can I customize the animation per element?**
A: Yes. Pass a custom plugin function that receives the element and returns animation keyframes.

**Q: Does it work with virtual lists?**
A: It works with any DOM mutation. For virtualized lists, apply it to the visible container.

**Q: What browsers are supported?**
A: All modern browsers supporting Web Animations API and MutationObserver (Chrome, Firefox, Safari, Edge).

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

---
Source: https://tokrepo.com/en/workflows/autoanimate-zero-config-drop-animation-library-836279fc
Author: AI Open Source