back
loading skill details...
|
Zero-config animations for React, Vue, Solid, Svelte, Preact with automatic error prevention and accessibility.
Prevents 15 documented issues including React 19 StrictMode bugs, SSR import errors, conditional parent rendering, flexbox layout conflicts, and drag-and-drop animation conflicts
Automatically respects prefers-reduced-motion for accessibility; requires unique, stable keys and parent elements always in DOM
SSR-safe via dynamic imports; critical for Next.js, Nuxt 3 (v0.8.2+), and Cloudflare Workers
Includes patterns for lists, accordions, toasts, tables, and forms with explicit guidance on CSS transforms, viewport visibility, and z-index handling
AutoAnimate - Error Prevention Guide
Package: @formkit/auto-animate@0.9.0 (current)
Frameworks: React, Vue, Solid, Svelte, Preact
Last Updated: 2026-01-21
SSR-Safe Pattern (Critical for Cloudflare Workers/Next.js)
// 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);don't have the plugin yet? install it then click "run inline in claude" again.