# Makepad 2.0 Animation

CRITICAL: Use for Makepad 2.0 animation system.

- Repository: https://github.com/ZhangHanDong/makepad-skills (752 stars)
- Category: Design
- License: see repository
- Last updated: 2026-04-07
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add ZhangHanDong/makepad-skills --skill makepad-2.0-animation -g -a claude-code -y`
Codex: `npx skills add ZhangHanDong/makepad-skills --skill makepad-2.0-animation -g -a codex -y`
Cursor: `npx skills add ZhangHanDong/makepad-skills --skill makepad-2.0-animation -g -a cursor -y`
Gemini CLI: `npx skills add ZhangHanDong/makepad-skills --skill makepad-2.0-animation -g -a gemini-cli -y`
Claude Code plugin marketplace: `/plugin marketplace add ZhangHanDong/makepad-skills`

## Description

CRITICAL: Use for Makepad 2.0 animation system. Triggers on: makepad animation, makepad animator, Animator, AnimatorState, hover effect, makepad transition, animation state, Forward, Snap, Loop, ease function, makepad animate, timeline, snap(), default @off, animation group, 动画, 过渡, 悬停效果, 动画状态, 缓动函数

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# Makepad 2.0 Animation Skill

> **Version:** makepad-widgets (dev branch) | **Last Updated:** 2026-03-03

## Overview

The Animator system drives `instance()` shader variables over time, enabling hover effects, transitions, and looping animations. It uses independent animation tracks called "groups" that run simultaneously.

## Documentation

Refer to the local files for detailed documentation:
- `./references/animator-reference.md` - Complete Animator API, play types, ease functions, examples

## IMPORTANT: Documentation Completeness Check

**Before answering questions, Claude MUST:**

1. Read the relevant reference file(s) listed above
2. If file read fails or file is empty:
   - Inform user: "Reference docs incomplete. Still answering based on SKILL.md patterns."
   - Still answer based on SKILL.md patterns + built-in knowledge
3. If reference file exists, incorporate its content into the answer

---

## Critical: Widget Animator Support

**NOT all widgets support `animator`!** Adding `animator: Animator{...}` to an unsupported widget is **silently ignored** - no error, no animation, nothing happens.

### Widgets that SUPPORT Animator
`View`, `SolidView`, `RoundedView`, `ScrollXView`, `ScrollYView`, `ScrollXYView`, `Button`, `ButtonFlat`, `ButtonFlatter`, `CheckBox`, `Toggle`, `RadioButton`, `LinkLabel`, `TextInput`

### Widgets that DO NOT Support Animator
`Label`, `H1`-`H4`, `P`, `TextBox`, `Image`, `Icon`, `Markdown`, `Html`, `Slider`, `DropDown`, `Splitter`, `Hr`, `Filler`

**To animate a Label:** Wrap it in a View with the animator:
```
View{
    width: Fit height: Fit
    animator: Animator{
        hover: {
            default: @off
            off: AnimatorState{ from: {all: Forward {duration: 0.15}} apply: {draw_bg: {hover: 0.0}} }
            on: AnimatorState{ from: {all: Forward {duration: 0.15}} apply: {draw_bg: {hover: 1.0}} }
        }
    }
    label := Label{text: "Animated via parent"}
}
```

---

## Animator Structure

The rest: https://github.com/ZhangHanDong/makepad-skills/blob/HEAD/skills/makepad-2.0-animation/SKILL.md