AutoAnimate — Zero-Config Drop-In Animation Utility

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/