makepad-animation_skill

Overview

This skill generates and explains Makepad animation code for the Makepad animation system. It helps create hover, pressed, focus, disabled and multi-state animations, and explains animator structure, timelines and easing patterns. It uses the provided key patterns and animator API to produce practical, production-ready snippets.

How this skill works

The skill inspects requested animation scenarios and returns Rust-style Makepad Live code that follows the animator patterns: state definitions, default values, from (timeline) and apply (properties). If local reference files cannot be read, it will inform you that local documentation is incomplete and recommend: "Local documentation is incomplete; please run /sync-crate-skills makepad --force to update documentation." Answers are produced from the supplied patterns and built-in Makepad animation knowledge.

When to use it

• Create button hover, pressed or disabled visual states with smooth transitions
• Animate focus outlines and input field borders for accessibility cues
• Build looping or attention-grabbing micro-animations (Loop/BounceLoop)
• Compose multi-state widgets that combine hover + pressed + selected
• Generate code examples and explain easing/timeline choices for UI teams

Best practices

• Always set a default: value for each animator state to avoid visual jumps
• Use Forward with short durations (0.1–0.3s) for responsive UI feel
• Use Snap for instant changes such as disabled or initial snaps
• Animate shader uniforms in draw_bg / draw_text; prefer colors, opacity, scale
• Prefer Ease with InOutQuad or InOutCubic for natural motion unless a special curve is needed

Example use cases

• A nav button that darkens on hover and scales on press using hover and pressed animators
• Text input that increases border size and changes border_color on focus
• Disabled button that snaps to muted colors with Snap timeline
• Animated loader using Loop timeline and opacity/rotation transforms
• Composite widget that plays hover and pressed states independently and simultaneously