AutoAnimate — Zero-Config Drop-In Animations for Web Apps

Introduction

AutoAnimate watches a parent element for child additions, removals, and position changes, then applies smooth CSS transitions automatically. It works with any framework or vanilla JavaScript and requires no keyframes, classes, or animation configuration.

What AutoAnimate Does

• Detects when children are added and animates them in with opacity and scale
• Animates removal of children with a fade-out transition
• Tracks position changes and applies smooth movement transitions
• Provides framework hooks for React, Vue, Solid, Svelte, and Angular
• Supports custom animation plugins for full control over keyframes

Architecture Overview

AutoAnimate uses a MutationObserver to watch a parent element for childList changes. When mutations fire, it snapshots the previous and current positions of all children, then applies Web Animations API keyframes to transition between states. The entire logic is under 2KB gzipped with no external dependencies.

Self-Hosting & Configuration

• Install @formkit/auto-animate via npm or yarn
• For vanilla JS, call autoAnimate(parentElement) on any container
• For React, use the useAutoAnimate hook and attach the ref to the parent
• For Vue, use the v-auto-animate directive provided by the plugin
• Pass a duration number (milliseconds) or a custom animation function to override defaults

Key Features

• Single function call activates entry, exit, and move animations
• Under 2KB gzipped with zero dependencies
• Uses the Web Animations API for hardware-accelerated transitions
• Framework adapters for React, Vue, Solid, Svelte, and Angular
• Custom plugin API for defining your own keyframes and timing

Comparison with Similar Tools

• React Spring — physics-based with fine-grained control, requires explicit animation setup
• Framer Motion — layout animations and gestures, larger bundle
• FLIP technique (manual) — same underlying concept but requires manual implementation
• Vue Transition Group — Vue-specific, requires CSS classes for each state
• AnimatePresence (Motion) — handles mount/unmount but needs wrapper components

FAQ

Q: Does AutoAnimate work with any framework? A: Yes. It has adapters for React, Vue, Solid, Svelte, Angular, and works with vanilla JS.

Q: How large is the bundle? A: Under 2KB gzipped with no dependencies.

Q: Can I customize the animation? A: Yes. Pass a custom function that receives the element, action, and coordinates, then return a KeyframeEffect.

Q: Does it handle list reordering? A: Yes. It detects position changes and smoothly moves elements to their new locations.

Sources

• https://github.com/formkit/auto-animate
• https://auto-animate.formkit.com/