A lightweight, zero-config animation utility that provides drop-in transitions for modern web frameworks while preventing 15 common implementation errors.
Install & Download
1. ClawHub CLI
The fastest way to install a skill directly from the registry.
npx clawhub@latest install auto-animate
2. Manual Installation
Copy the skill folder to one of these locations
~/.openclaw/skills/ <project>/skills/ Priority: Workspace > Local > Bundled
3. Prompt Installation
Copy this prompt to OpenClaw to install it automatically.
Help me install auto-animate using Clawhub. If Clawhub is not installed, install it first (npm i -g clawhub).
Prefer to download?
Get the raw skill files in a ZIP archive.
What is AutoAnimate?
AutoAnimate is a high-performance utility (3.28kb) by FormKit designed to add automatic transitions to web applications with zero configuration. It supports React, Vue, Solid, Svelte, and Preact, making it an essential tool for developers looking to enhance UI fluidity without complex keyframe management. This tool is particularly powerful because it handles the edge cases that often break transitions in production environments.
By following the best practices in this Openclaw Skills resource, developers can implement animations that are SSR-safe and compatible with React 19 StrictMode. The skill focuses on error prevention, ensuring that animations for lists, accordions, and toasts don't conflict with flexbox layouts, table structures, or user accessibility settings like prefers-reduced-motion.
AutoAnimate Use Cases
- Animating dynamic lists, accordions, and toast notifications without manual CSS.
- Preventing SSR import errors in Next.js, Nuxt 3, or Cloudflare Workers.
- Fixing layout shaking in flexbox containers during item removal.
- Resolving initialization bugs in React 19 StrictMode environments.
- Implementing accessible transitions that automatically respect system motion preferences.
How AutoAnimate Works
- The developer identifies a parent container in the DOM that will house dynamic child elements.
- Using the provided Openclaw Skills patterns, a reference (Ref) is attached to the parent element.
- The autoAnimate function is initialized, either via a hook or a direct function call, observing the parent.
- When the framework updates the DOM (adding, removing, or reordering children), AutoAnimate detects the change.
- The library calculates the delta between the old and new positions and applies smooth transitions automatically.
AutoAnimate Setup
To get started, install the package via npm:
npm install @formkit/auto-animate
For React applications, use the provided hook for basic implementation:
import { useAutoAnimate } from "@formkit/auto-animate/react";
function MyList() {
const [parent] = useAutoAnimate();
return (
<ul ref={parent}>
{/* Your dynamic items here */}
</ul>
);
}
AutoAnimate Data Schema & Taxonomy
AutoAnimate relies on specific DOM configurations and metadata to ensure stable transitions as detailed in this Openclaw Skills entry:
| Configuration | Requirement | Purpose |
|---|---|---|
| Unique Keys | item.id (Stable) | Essential for the engine to track element identity across renders. |
| Parent Element | Persistent Ref | The container must remain in the DOM; only children should be conditional. |
| CSS Positioning | position: relative | Automatically applied to the parent to manage absolute-positioned animating children. |
| Target Attribute | [data-auto-animate-target] | Injected attribute used to manage z-index and transition states. |
AutoAnimate Advanced Features
- SSR-Safe dynamic imports to prevent server-side DOM API errors in Next.js and Nuxt.
- Manual cleanup logic for long-lived single-page applications to prevent memory leaks.
- Conditional Ref attachment to disable animations during active Drag & Drop operations.
- Viewport-aware initialization to ensure animations only fire when elements are visible to the user.
- React 19 StrictMode guards to prevent double-initialization bugs.
SKILL.md
Loading
Related Openclaw Skills
Architecture Designer
A principal-level AI architect skill for designing scalable systems, documenting ADRs, and evaluating technical trade-offs.
API Designer
A specialized architectural skill for designing professional-grade REST and GraphQL APIs with comprehensive OpenAPI 3.1 documentation.
Angular Architect
A senior-level AI skill for building scalable Angular 17+ applications using standalone components and signals.
AI SDK UI - Frontend React Hooks
A professional toolkit for building high-performance AI chat interfaces and managing complex UI states using Vercel AI SDK v6 React hooks.
Azure Auth: Microsoft Entra ID for React & Cloudflare Workers
A full-stack authentication pattern for Microsoft Entra ID using MSAL.js in React and JWT validation via the jose library in Cloudflare Workers.
Backtest Expert
A systematic framework for stress-testing and validating quantitative trading strategies to ensure real-world robustness.
Featured*
