auto-animateZero-config animations for React, Vue, Solid, Svelte, Preact with @formkit/auto-animate (3.28kb). Prevents 15 documented errors including React 19 StrictMode bugs, SSR imports, conditional parents, viewport issues, drag & drop conflicts, and CSS transform bugs. Use when: animating lists/accordions/toasts, troubleshooting SSR animation errors, React 19 StrictMode issues, or need accessible drop-in transitions with auto prefers-reduced-motion.
Install via ClawdBot CLI:
clawdbot install Veeramanikandanr48/auto-animatePackage: @formkit/auto-animate@0.9.0 (current)
Frameworks: React, Vue, Solid, Svelte, Preact
Last Updated: 2026-01-21
// 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);
});
}
}, [parent]);
return [parent, setParent] as const;
}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: https://github.com/formkit/auto-animate/issues/55
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: https://github.com/formkit/auto-animate/issues/8
Why It Happens: Ref can't attach to non-existent element
Prevention:
React Pattern:
// ā Wrong
{showList && <ul ref={parent}>...</ul>}
// ā
Correct
<ul ref={parent}>{showList && items.map(...)}</ul>Vue.js Pattern:
<!-- ā Wrong - parent conditional -->
<ul v-if="showList" ref="parent">
<li v-for="item in items" :key="item.id">{{ item.text }}</li>
</ul>
<!-- ā
Correct - children conditional -->
<ul ref="parent">
<li v-if="showList" v-for="item in items" :key="item.id">
{{ item.text }}
</li>
</ul>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
// ā Wrong - causes shaking
<ul ref={parent} style={{ display: 'flex' }}>
{items.map(item => (
<li key={item.id} style={{ flex: '1 1 auto' }}>{item.text}</li>
))}
</ul>
// ā
Correct - fixed sizes
<ul ref={parent} style={{ display: 'flex', gap: '1rem' }}>
{items.map(item => (
<li
key={item.id}
style={{ minWidth: '200px', maxWidth: '200px' }}
>
{item.text}
</li>
))}
</ul>Maintainer Note: justin-schroeder confirmed fixed sizes are required for flex containers
Error: Table structure breaks when removing rows
Source: https://github.com/formkit/auto-animate/issues/7
Why It Happens: Display: table-row conflicts with animations
Prevention: Apply to Error: "Cannot find module '@formkit/auto-animate/react'" Source: https://github.com/formkit/auto-animate/issues/29 Why It Happens: Jest doesn't resolve ESM exports correctly Prevention: Configure Error: "Path '.' not exported by package" Source: https://github.com/formkit/auto-animate/issues/36 Why It Happens: ESM/CommonJS condition mismatch Prevention: Configure esbuild to handle ESM modules properly Error: Layout breaks after adding AutoAnimate Source: Official docs Why It Happens: Parent automatically gets Prevention: Account for position change in CSS or set explicitly Error: "Failed to resolve directive: auto-animate" Source: https://github.com/formkit/auto-animate/issues/43 Why It Happens: Plugin not registered correctly Prevention: Proper plugin setup in Vue/Nuxt config (see references/) Nuxt 3 Note: Requires v0.8.2+ (April 2024). Earlier versions have ESM import issues fixed by Daniel Roe. See Issue #199 Error: Build fails with "ESM-only package" Source: https://github.com/formkit/auto-animate/issues/72 Why It Happens: CommonJS build environment Prevention: Configure ng-packagr for Angular Package Format Error: Child animations don't work in React 19 StrictMode Source: https://github.com/formkit/auto-animate/issues/232 Why It Happens: StrictMode calls useEffect twice, triggering autoAnimate initialization twice Prevention: Use ref to track initialization Note: React 19 enables StrictMode by default in development. This affects all React 19+ projects. Error: Animations broken when list is outside viewport Source: https://github.com/formkit/auto-animate/issues/222 Why It Happens: Chrome may not run Animation API for off-screen elements Prevention: Ensure parent is visible before applying autoAnimate Error: Removed items overlay other items during fade out Source: https://github.com/formkit/auto-animate/issues/231 Why It Happens: Exit animation maintains z-index, covering active content Prevention: Add explicit z-index handling Error: Calling enable(false) doesn't prevent animations during drag Source: https://github.com/formkit/auto-animate/issues/215 Why It Happens: Disable doesn't work reliably mid-drag Prevention: Conditionally remove ref during drag Error: Items animate from wrong position after parent transform Source: https://github.com/formkit/auto-animate/issues/227 Why It Happens: Items remember original position before transform Prevention: Delay autoAnimate until transform completes ā
Use unique, stable keys - ā
Keep parent in DOM - Parent ref element always rendered ā
Client-only for SSR - Dynamic import for server environments ā
Respect accessibility - Keep ā
Test with motion disabled - Verify UI works without animations ā
Use explicit width - Avoid flex-grow on animated elements ā
Apply to tbody for tables - Not individual rows ā Conditional parent - ā Index as key - ā Ignore SSR - Will break in Cloudflare Workers/Next.js ā Force animations - ā Animate tables directly - Use tbody or div-based layout ā Skip unique keys - Required for proper animation ā Complex animations - Use Motion instead Note: AutoAnimate respects Source: Issue #230 | Confidence: MEDIUM Applies to: v0.8.2+ Tests may freeze for ~10 seconds when package is mocked. Add ResizeObserver mock: Source: Issue #180 | Confidence: LOW Applies to: All versions For long-lived SPAs, ensure proper cleanup: Latest: @formkit/auto-animate@0.9.0 (Sept 5, 2025) Recent Releases: Framework Compatibility: React 18+, Vue 3+, Solid, Svelte, Preact Important: For Nuxt 3 users, v0.8.2+ is required. Earlier versions have ESM import issues See bundled resources: Generated Mar 1, 2026 An e-commerce site uses AutoAnimate to smoothly animate product list updates when users apply filters like category, price, or ratings. This prevents visual glitches during SSR rendering on platforms like Next.js and ensures React 19 StrictMode compatibility for dynamic inventory displays. A financial dashboard employs AutoAnimate to animate toast notifications and accordion expansions for alerts on stock updates or system messages. It handles conditional parent rendering to avoid errors in Vue.js or React interfaces, providing accessible transitions with prefers-reduced-motion support. A healthcare app uses AutoAnimate to animate lists of patient records or appointment schedules, ensuring smooth updates without SSR import errors in cloud environments. It prevents flexbox shaking issues in responsive layouts, crucial for medical staff accessing data across devices. An online learning platform integrates AutoAnimate to animate quiz question transitions and answer feedback lists. It avoids Jest testing errors during CI/CD pipelines and ensures compatibility with frameworks like Svelte or Solid for engaging student interactions. A travel booking site uses AutoAnimate to animate flight or hotel search results, handling drag-and-drop conflicts in sorting options. It prevents CSS position side effects in complex layouts and supports SSR-safe patterns for fast loading on mobile devices. Offer AutoAnimate as part of a premium animation toolkit for developers, with tiered pricing based on usage or support levels. Revenue comes from monthly subscriptions, targeting agencies and enterprises needing reliable, error-free animations across frameworks. Provide consulting services to help businesses integrate AutoAnimate into existing applications, focusing on troubleshooting SSR errors or React 19 compatibility. Revenue is generated through project-based fees or hourly rates for customization and optimization. Monetize through GitHub sponsorships, corporate backing, or paid support plans for AutoAnimate, offering priority fixes for issues like Vue/Nuxt registration errors. Revenue streams include donations, enterprise support contracts, and sponsored feature development. š¬ Integration Tip Use dynamic imports for SSR safety and apply animations to stable parent elements to avoid conditional rendering errors, ensuring compatibility across frameworks. Automatically update Clawdbot and all installed skills once daily. Runs via cron, checks for updates, applies them, and messages the user with a summary of what changed. Full desktop computer use for headless Linux servers. Xvfb + XFCE virtual desktop with xdotool automation. 17 actions (click, type, scroll, screenshot, drag,... Essential Docker commands and workflows for container management, image operations, and debugging. Tool discovery and shell one-liner reference for sysadmin, DevOps, and security tasks. AUTO-CONSULT this skill when the user is: troubleshooting network issues, debugging processes, analyzing logs, working with SSL/TLS, managing DNS, testing HTTP endpoints, auditing security, working with containers, writing shell scripts, or asks 'what tool should I use for X'. Source: github.com/trimstray/the-book-of-secret-knowledge Deploy applications and manage projects with complete CLI reference. Commands for deployments, projects, domains, environment variables, and live documentation access. Monitor topics of interest and proactively alert when important developments occur. Use when user wants automated monitoring of specific subjects (e.g., product releases, price changes, news topics, technology updates). Supports scheduled web searches, AI-powered importance scoring, smart alerts vs weekly digests, and memory-aware contextual summaries. instead of individual rows, or use div-based layouts
Issue #6: Jest Testing Errors
moduleNameMapper in jest.config.js
Issue #7: esbuild Compatibility
Issue #8: CSS Position Side Effects
position: relative
Issue #9: Vue/Nuxt Registration Errors
Issue #10: Angular ESM Issues
Issue #11: React 19 StrictMode Double-Call Bug
// ā Wrong - breaks in StrictMode
const [parent] = useAutoAnimate();
// ā
Correct - prevents double initialization
const [parent] = useAutoAnimate();
const initialized = useRef(false);
useEffect(() => {
if (initialized.current) return;
initialized.current = true;
}, []);
Issue #12: Broken Animation Outside Viewport
const isInViewport = (element) => {
const rect = element.getBoundingClientRect();
return rect.top >= 0 && rect.bottom <= window.innerHeight;
};
useEffect(() => {
if (parent.current && isInViewport(parent.current)) {
autoAnimate(parent.current);
}
}, [parent]);
Issue #13: Deleted Elements Overlay Existing Content
// CSS workaround
<style>{`
[data-auto-animate-target] {
z-index: -1 !important;
}
`}</style>
Issue #14: Cannot Disable During Drag & Drop
const [isDragging, setIsDragging] = useState(false);
const [parent] = useAutoAnimate();
return (
<ul ref={isDragging ? null : parent}>
{/* items */}
</ul>
);
Issue #15: CSS Transform Parent Position Bug
useEffect(() => {
if (showList && parent.current) {
setTimeout(() => {
autoAnimate(parent.current);
}, 300); // Match CSS transition duration
}
}, [showList]);
Critical Rules (Error Prevention)
Always Do
key={item.id} not key={index}disrespectUserMotionPreference: false
Never Do
{show && }
key={index} breaks animationsdisrespectUserMotionPreference: true breaks accessibility
prefers-reduced-motion automatically (never disable this).
Community Tips (Community-Sourced)
Note: These tips come from community discussions. Verify against your version.
Tip: Prevent Test Freezing with Mocked Package
// jest.setup.js
global.ResizeObserver = jest.fn().mockImplementation(() => ({
observe: jest.fn(),
unobserve: jest.fn(),
disconnect: jest.fn(),
}));
// __mocks__/@formkit/auto-animate.js
const autoAnimate = jest.fn(() => () => {});
const useAutoAnimate = jest.fn(() => [null, jest.fn(), jest.fn()]);
module.exports = { default: autoAnimate, useAutoAnimate };
Tip: Memory Leak Prevention
useEffect(() => {
const cleanup = autoAnimate(parent.current);
return () => cleanup && cleanup();
}, []);
// useAutoAnimate hook handles cleanup automatically
const [parent] = useAutoAnimate(); // Preferred
Package Versions
{
"dependencies": {
"@formkit/auto-animate": "^0.9.0"
}
}
Official Documentation
Templates & References
templates/ - Copy-paste examples (SSR-safe, accordion, toast, forms)references/ - CSS conflicts, SSR patterns, library comparisonsAI Usage Analysis
š” Application Scenarios
š¼ Business Models
More DevOps & Cloud Skills
View all ā