Animations

What This Skill Does

The Animations skill empowers OpenClaw to generate high-performance, accessible, and standards-compliant web animations. It focuses on offloading processing to the GPU by prioritizing the 'transform' and 'opacity' properties, which ensures 60fps performance by avoiding heavy layout and paint cycles. The skill enforces best practices for web accessibility, specifically addressing the needs of users with vestibular disorders through automated 'prefers-reduced-motion' media query implementation. Beyond performance, it provides structured guidelines for timing, easing functions, and duration, ensuring that generated animations feel professional, responsive, and aligned with modern design systems like Material Design.

Installation

To integrate this skill into your OpenClaw environment, execute the following command in your terminal: clawhub install openclaw/skills/skills/ivangdavila/animations

Use Cases

This skill is ideal for developers and designers who need to create smooth, non-blocking UI transitions. Use it for:

• Creating interactive hover and focus states for buttons, links, and card components.
• Orchestrating complex on-load entrance sequences for page elements.
• Implementing accessible modal windows, dropdowns, and sidebars.
• Optimizing existing UI animations that currently cause layout thrashing or performance bottlenecks.
• Standardizing animation timing and easing across large-scale web applications.

Example Prompts

1. "OpenClaw, create a CSS animation for a card component that fades in and slides up by 20px over 0.4 seconds, ensuring it respects reduced-motion settings."
2. "I have a performance issue on my site. Can you refactor my current 'left' property transitions to use transform-based GPU acceleration?"
3. "Generate a custom cubic-bezier timing function for a smooth 'ease-out' transition on a navigation menu dropdown that lasts 300ms."

Tips & Limitations

• Performance First: Always favor 'transform' and 'opacity'. If you find yourself animating 'width', 'height', or 'top/left', you are risking layout thrashing. Re-evaluate your approach using 'scale' or 'translateX/Y'.
• Accessibility: Never skip the 'prefers-reduced-motion' media query. It is a critical accessibility requirement that should be treated as a standard, not an afterthought.
• Use 'will-change' Sparingly: Do not apply 'will-change' globally. It consumes significant GPU memory and should only be applied to elements during active transitions to signal the browser to prepare for the change.
• Duration Matters: Keep your durations tight. Anything exceeding 500ms will be perceived by users as sluggish or broken. Stick to the 200-300ms range for most UI interactions to maintain a snappy, high-quality user experience.