auto-animate

# AutoAnimate **Status**: Production Ready ✅ **Last Updated**: 2026-08-03 **Dependencies**: None (works with any React setup) **Latest Versions**: @formkit/auto-animate@0.10.0 --- ## Quick Start (2 Minutes) ### 1. Install AutoAnimate ```bash bun add @formkit/auto-animate ``` **Why this matters:** - Only 3.28 KB gzipped (vs 22 KB for Motion) - Zero dependencies - Framework-agnostic (React, Vue, Svelte, vanilla JS) ### 2. Add to Your Component ```tsx import { useAutoAnimate } from "@formkit/auto-animate/react"; export function MyList() { const [parent] = useAutoAnimate(); // 1. Get ref return ( <ul ref={parent}> {/* 2. Attach to parent */} {items.map(item => ( <li key={item.id}>{item.text}</li> {/* 3. That's it! */} ))} </ul> ); } ``` **CRITICAL:** - ✅ Always use unique, stable keys for list items - ✅ Parent element must always be rendered (not conditional) - ✅ AutoAnimate respects `prefers-reduced-motion` automatically - ✅ Works on add, remove, AND reorder operations ### 3. Use in Production (SSR-Safe) For Cloudflare Workers or Next.js: ```tsx // Use client-only import to prevent SSR errors import { useState, useEffect } from "react"; export function useAutoAnimateSafe<T extends HTMLElement>() { const [parent, setParent] = useState<T | null>(null); useEffect(() => { if (typeof window !== "undefined" && parent) { import("@formkit/auto-animate").then(({ default: autoAnimate }) => { autoAnimate(parent); ...