Animation

What This Skill Does

The Animation skill for OpenClaw is a powerful command-line interface utility designed to streamline the creation, management, and export of CSS and SVG animations. It bridges the gap between conceptual design and production-ready code, allowing developers to generate complex @keyframes, custom transition shorthand, and multi-step animation sequences using simple bash commands. By maintaining a local repository in a JSONL format, the skill ensures that all your animation definitions remain accessible, reusable, and chainable across different projects.

Installation

To integrate this tool into your OpenClaw environment, execute the following command in your terminal: clawhub install openclaw/skills/skills/ckchzh/animation Ensure that you have Python 3.6+ and Bash 4+ installed on your system, as these are strict prerequisites for the script execution engine.

Use Cases

• Rapid Prototyping: Quickly generate keyframe blocks for UI components like modals, buttons, or loading spinners without manually writing out CSS syntax.
• Animation Libraries: Build and store a personal library of reusable transition effects that can be exported directly into your project's stylesheets.
• Workflow Automation: Chain multiple animation states together to create sophisticated sequences or complex motion paths for SVG elements.
• Previewing: Instantly generate self-contained HTML previews to inspect animations in a browser before committing them to your codebase.

Example Prompts

1. "Create a new CSS animation named 'slideInUp' with opacity from 0 to 1 and translateY from 20px to 0 with a duration of 0.4 seconds."
2. "Chain the 'fadeIn' and 'bounce' animations together with a 0.5s delay and export the result to a file named 'effects.css'."
3. "List all my currently saved animations and then provide a preview for the 'bounce' effect in an HTML file."

Tips & Limitations

• Naming Conventions: Since sequences and chains reference animations by their names, maintain unique and descriptive names to avoid lookup errors.
• Data Integrity: The animations are stored in ~/.animation/data.jsonl. Avoid manual edits to this file unless necessary, as the command-line interface handles all state management and UUID generation.
• SVG Complexity: While the tool is excellent for CSS, SVG animations involving highly complex paths may require manual tuning of the generated XML code after export.
• Portability: Use the export command to move your animation definitions from the local data store to your actual project files to ensure they are version-controlled alongside your source code.