Auto Animate

**Judgement:** Strong, focused integration guide for @formkit/auto-animate across major frontend frameworks. It excels at preventing common, real-world issues (especially SSR and React 19 StrictMode) with practical, copy-paste patterns. Best suited for teams already using or planning to use @formkit/auto-animate. **Strengths:** - Systematically addresses 15 concrete, documented failure modes (SSR imports, conditional parents, keys, flex/table quirks, Jest/esbuild/Angular issues, React 19 StrictMode, viewport/transform edge cases, drag & drop, z-index overlays). - Multi-framework coverage (React, Vue, Svelte, Solid, Preact) plus environment-specific notes (Next.js, Nuxt 3, Cloudflare Workers, Jest, Angular), which improves real-world compatibility. - Emphasizes accessibility: respects `prefers-reduced-motion` and explicitly warns against forcing animations, making it safe for production UX. - Provides targeted code templates (SSR-safe hook, drag-and-drop disabling pattern, viewport checks, table/tbody usage, Jest mocks) that are easy to drop into apps. **Risks / Limitations:** - Highly specialized: useful mainly if you are using `@formkit/auto-animate`; it does not generalize to other animation libraries. - Some tips are version-dependent with stated confidence levels (e.g., certain Nuxt 3 and ResizeObserver behaviors, memory-leak note), so guidance might need validation against future `@formkit/auto-animate` releases. - A few workarounds (e.g., `setTimeout` tied to CSS transition duration, global z-index overrides, viewport gating) can introduce subtle behavior differences if not carefully tuned to the app’s UI. **Recommended Scenarios:** - You’re integrating or debugging `@formkit/auto-animate` in React/Vue/Svelte/Solid/Preact and hitting SSR, StrictMode, or tooling-related errors. - You need a safe, accessible, low-config way to animate lists, accordions, and toasts without large animation frameworks. - You run in SSR-heavy or edge environments (Next.js, Nuxt 3, Cloudflare Workers) and want patterns that avoid DOM-on-server crashes. - You maintain a design system or shared component library that relies on auto-animate and must be robust across different app setups and test runners.