What problem does it solve? Adding animations to React UIs typically requires heavy libraries like Motion (22 KB) with complex configuration, and developers frequently hit SSR errors, broken table layouts, flexbox width snapping, and accessibility violations when wiring animations manually. ## Core Features & Use Cases - Zero-Config Drop-In Animations: Attach a single useAutoAnimate ref to a parent element to animate add, remove, and reorder operations in lists, accordions, toasts, and form validation messages with only 3.28 KB gzipped. - Known-Issue Prevention: Built-in guidance prevents 10+ documented pitfalls including SSR/Next.js import errors, conditional parent rendering, missing unique keys, flexbox width snapping, table-row display conflicts, and Jest/esbuild module resolution failures. - SSR-Safe Patterns: Provides dynamic-import hooks and Vite configuration for Cloudflare Workers, Next.js, Remix, Nuxt, SvelteKit, Astro, and Gatsby so animations never break server rendering. - Use Case: You are building a filterable product list in a React + Vite + Cloudflare Workers app. Use the SSR-safe hook and the filter-sort template to get smooth add/remove/sort animations without touching Motion or writing keyframes. ## Quick Start Install @formkit/auto-animate, then ask the assistant to add the useAutoAnimate ref to your list component using the react-basic template, or run the init-auto-animate.sh script for automated setup.
