auto-animate

Package : @formkit/auto-animate@0.9.0 (current) Frameworks : React, Vue, Solid, Svelte, Preact Last Updated : 2026-01-21 Why this matters : Prevents Issue #1 (SSR/Next.js import errors). AutoAnimate uses DOM APIs not available on server. This skill prevents 15 documented issues: Error : "Can't import the named export 'useEffect' from non EcmaScript module" Source : Why It Happens : AutoAnimate uses DOM APIs not available on server Prevention : Use dynamic imports (see templates/vite-ssr-safe.tsx ) Error : Animations don't work when parent is conditional Source : Why It Happens : Ref can't attach to non-existent element Prevention : React Pattern : Vue.js Pattern : Source : React Issue #8 , Vue Issue #193 Error : Items don't animate correctly or flash Source : Official docs Why It Happens : React can't track which items changed Prevention : Always use unique, stable keys ( key={item.id} ) Error : Elements snap to width instead of animating smoothly, or container shakes on remove Source : Official docs, Issue #212 Why It Happens : flex-grow: 1 waits for surrounding content, causing timing issues Prevention : Use explicit width instead of flex-grow for animated elements Maintainer Note : justin-schroeder confirmed fixed sizes are required for flex containers Error : Table structure breaks when removing rows Source : Why It Happens : Display: table-row conflicts with animations...