makepad-animation

CRITICAL: Use for Makepad animation system. Triggers on: makepad animation, makepad animator, makepad hover, makepad state, makepad transition, "from: { all: Forward", makepad pressed, makepad 动画, makepad 状态, makepad 过渡, makepad 悬停效果

Quality

70%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

Securityby

Passed

No findings from the security scan

Fix and improve this skill with Tessl

tessl review fix ./plugins/AI-Agents-Safe-Coding-Skills-claude/skills/makepad-animation/SKILL.md

The canonical home for this skill is makepad-animation in administrakt0r/AI-Agents-Safe-Coding-Skills

Makepad Animation Skill

Name: makepad-animation
Rating: 60 (1 reviews)
Author: administrakt0r

Version: makepad-widgets (dev branch) | Last Updated: 2026-01-19

Check for updates: https://crates.io/crates/makepad-widgets

You are an expert at Makepad animations. Help users by:

Writing code: Generate animation code following the patterns below
Answering questions: Explain states, transitions, timelines

Documentation

Refer to the local files for detailed documentation:

./references/animation-system.md - Complete animation reference

Advanced Patterns

For production-ready animation patterns, see the _base/ directory:

Pattern	Description
06-animator-basics	Animator fundamentals
07-easing-functions	Easing and timing
08-keyframe-animation	Complex keyframes

IMPORTANT: Documentation Completeness Check

Before answering questions, Claude MUST:

Read the relevant reference file(s) listed above
If file read fails or file is empty:
- Inform user: "本地文档不完整，建议运行 /sync-crate-skills makepad --force 更新文档"
- Still answer based on SKILL.md patterns + built-in knowledge
If reference file exists, incorporate its content into the answer

Key Patterns

1. Basic Hover Animation

<Button> {
    text: "Hover Me"

    animator: {
        hover = {
            default: off

            off = {
                from: { all: Forward { duration: 0.15 } }
                apply: {
                    draw_bg: { color: #333333 }
                }
            }

            on = {
                from: { all: Forward { duration: 0.15 } }
                apply: {
                    draw_bg: { color: #555555 }
                }
            }
        }
    }
}

2. Multi-State Animation

<View> {
    animator: {
        hover = {
            default: off
            off = {
                from: { all: Forward { duration: 0.2 } }
                apply: { draw_bg: { color: #222222 } }
            }
            on = {
                from: { all: Forward { duration: 0.2 } }
                apply: { draw_bg: { color: #444444 } }
            }
        }

        pressed = {
            default: off
            off = {
                from: { all: Forward { duration: 0.1 } }
                apply: { draw_bg: { scale: 1.0 } }
            }
            on = {
                from: { all: Forward { duration: 0.1 } }
                apply: { draw_bg: { scale: 0.95 } }
            }
        }
    }
}

3. Focus State Animation

<TextInput> {
    animator: {
        focus = {
            default: off

            off = {
                from: { all: Forward { duration: 0.2 } }
                apply: {
                    draw_bg: {
                        border_color: #444444
                        border_size: 1.0
                    }
                }
            }

            on = {
                from: { all: Forward { duration: 0.2 } }
                apply: {
                    draw_bg: {
                        border_color: #0066CC
                        border_size: 2.0
                    }
                }
            }
        }
    }
}

4. Disabled State

<Button> {
    animator: {
        disabled = {
            default: off

            off = {
                from: { all: Snap }
                apply: {
                    draw_bg: { color: #0066CC }
                    draw_text: { color: #FFFFFF }
                }
            }

            on = {
                from: { all: Snap }
                apply: {
                    draw_bg: { color: #333333 }
                    draw_text: { color: #666666 }
                }
            }
        }
    }
}

Animator Structure

Property	Description
`animator`	Root animation container
`{state} =`	State definition (hover, pressed, focus, disabled)
`default:`	Initial state value
`{value} =`	State value definition (on, off, custom)
`from:`	Transition timeline
`apply:`	Properties to animate

Timeline Types (Play Enum)

Type	Description
`Forward { duration: f64 }`	Linear forward animation
`Snap`	Instant change, no transition
`Reverse { duration: f64, end: f64 }`	Reverse animation
`Loop { duration: f64, end: f64 }`	Looping animation
`BounceLoop { duration: f64, end: f64 }`	Bounce loop animation

Easing Functions (Ease Enum)

// Basic
Linear

// Quadratic
InQuad, OutQuad, InOutQuad

// Cubic
InCubic, OutCubic, InOutCubic

// Quartic
InQuart, OutQuart, InOutQuart

// Quintic
InQuint, OutQuint, InOutQuint

// Sinusoidal
InSine, OutSine, InOutSine

// Exponential
InExp, OutExp, InOutExp

// Circular
InCirc, OutCirc, InOutCirc

// Elastic
InElastic, OutElastic, InOutElastic

// Back
InBack, OutBack, InOutBack

// Bounce
InBounce, OutBounce, InOutBounce

// Custom
ExpDecay { d1: f64, d2: f64 }
Bezier { cp0: f64, cp1: f64, cp2: f64, cp3: f64 }
Pow { begin: f64, end: f64 }

Using Easing

from: {
    all: Ease { duration: 0.3, ease: InOutQuad }
}

Common States

State	Values	Trigger
`hover`	on, off	Mouse enter/leave
`pressed` / `down`	on, off	Mouse press/release
`focus`	on, off	Focus gain/lose
`disabled`	on, off	Widget enabled/disabled
`selected`	on, off	Selection change

Animatable Properties

Most draw_* shader uniforms can be animated:

Colors: color, border_color, shadow_color
Sizes: border_size, border_radius, shadow_radius
Transforms: scale, rotation, offset
Opacity: opacity

When Writing Code

Always set default: for initial state
Use Forward for smooth transitions
Use Snap for instant state changes (like disabled)
Keep durations short (0.1-0.3s) for responsive feel
Animate shader uniforms in draw_bg, draw_text, etc.

Rust API (AnimatorImpl Trait)

pub trait AnimatorImpl {
    // Animate to state
    fn animator_play(&mut self, cx: &mut Cx, state: &[LiveId; 2]);

    // Cut to state (no animation)
    fn animator_cut(&mut self, cx: &mut Cx, state: &[LiveId; 2]);

    // Check current state
    fn animator_in_state(&self, cx: &Cx, state: &[LiveId; 2]) -> bool;
}

// Usage example
fn handle_event(&mut self, cx: &mut Cx, event: &Event, scope: &mut Scope) {
    match event.hits(cx, self.area()) {
        Hit::FingerHoverIn(_) => {
            self.animator_play(cx, id!(hover.on));
        }
        Hit::FingerHoverOut(_) => {
            self.animator_play(cx, id!(hover.off));
        }
        Hit::FingerDown(_) => {
            self.animator_play(cx, id!(pressed.on));
        }
        Hit::FingerUp(_) => {
            self.animator_play(cx, id!(pressed.off));
        }
        _ => {}
    }
}

When Answering Questions

States are independent - multiple can be active simultaneously
Animation applies properties when state reaches that value
from defines HOW to animate, apply defines WHAT to animate
Makepad tweens between old and new values automatically
Use id!(state.value) macro to reference animation states in Rust

Repository: administrakt0r/AI-Agents-Safe-Coding-Skills
Path: plugins/AI-Agents-Safe-Coding-Skills-claude/skills/makepad-animation/SKILL.md
Commit: 57c135b

Last updated: 4 days ago
First committed: 6 months ago

Canonical home

administrakt0r/AI-Agents-Safe-Coding-Skills

In sync

since Aug 19, 2026

Also appears in

administrakt0r/AI-Agents-Safe-Coding-Skills

In sync

since Aug 19, 2026

Is this your skill?

If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.