makepad-2.0-animation

Name: makepad-2.0-animation
Author: ZhangHanDong

743stars87forks

How to install makepad-2.0-animation?

zhanghandong/makepad-skills/makepad-2.0-animation

$npx -y skills add ZhangHanDong/makepad-skills --skill makepad-2.0-animation

Installs into the current project.

Summary

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, 动画,

Files · 1

View on GitHub

SKILL.md

1	# Makepad 2.0 Animation Skill
2
3	> Version: makepad-widgets (dev branch) \| Last Updated: 2026-03-03
4
5	## Overview
6
7	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.
8
9	## Documentation
10
11	Refer to the local files for detailed documentation:
12	- `./references/animator-reference.md` - Complete Animator API, play types, ease functions, examples
13
14	## IMPORTANT: Documentation Completeness Check
15
16	Before answering questions, Claude MUST:
17
18	1. Read the relevant reference file(s) listed above
19	2. If file read fails or file is empty:
20	- Inform user: "Reference docs incomplete. Still answering based on SKILL.md patterns."
21	- Still answer based on SKILL.md patterns + built-in knowledge
22	3. If reference file exists, incorporate its content into the answer
23
24	---
25
26	## Critical: Widget Animator Support
27
28	NOT all widgets support `animator`! Adding `animator: Animator{...}` to an unsupported widget is silently ignored - no error, no animation, nothing happens.
29
30	### Widgets that SUPPORT Animator
31	`View`, `SolidView`, `RoundedView`, `ScrollXView`, `ScrollYView`, `ScrollXYView`, `Button`, `ButtonFlat`, `ButtonFlatter`, `CheckBox`, `Toggle`, `RadioButton`, `LinkLabel`, `TextInput`
32
33	### Widgets that DO NOT Support Animator
34	`Label`, `H1`-`H4`, `P`, `TextBox`, `Image`, `Icon`, `Markdown`, `Html`, `Slider`, `DropDown`, `Splitter`, `Hr`, `Filler`
35
36	To animate a Label: Wrap it in a View with the animator:
37	```
38	View{
39	width: Fit height: Fit
40	animator: Animator{
41	hover: {
42	default: @off
43	off: AnimatorState{ from: {all: Forward {duration: 0.15}} apply: {draw_bg: {hover: 0.0}} }
44	on: AnimatorState{ from: {all: Forward {duration: 0.15}} apply: {draw_bg: {hover: 1.0}} }
45	}
46	}
47	label := Label{text: "Animated via parent"}
48	}
49	```
50
51	---
52
53	## Animator Structure
54
55	```
56	animator: Animator{
57	<group_name>: {
58	default: @<state_name>
59	<state_name>: AnimatorState{
60	from: { ... }
61	ease: <EaseFunction>
62	redraw: true
63	apply: { ... }
64	}
65	<state_name>: AnimatorState{ ... }
66	}
67	<group_name>: { ... }
68	}
69	```
70
71	---
72
73	## Groups
74
75	Each group is an independent animation track. Common groups:
76
77	\| Group \| Purpose \| Typical States \|
78	\|-------\|---------\|----------------\|
79	\| `hover` \| Mouse hover in/out \| `off`, `on` \|
80	\| `focus` \| Keyboard focus \| `off`, `on` \|
81	\| `active` \| Toggled/checked state \| `off`, `on` \|
82	\| `disabled` \| Disabled state \| `off`, `on` \|
83	\| `time` \| Continuous looping \| `off`, `on` \|
84
85	Multiple groups animate simultaneously without interfering.
86
87	---
88
89	## The `from` Block
90
91	Controls transition timing. Keys are states being transitioned FROM, or `all` as catch-all.
92
93	```
94	// From any state, animate over 0.2 seconds
95	from: {all: Forward {duration: 0.2}}
96
97	// Instant from any state
98	from: {all: Snap}
99
100	// Different timing depending on origin
101	from: {
102	all: Forward {duration: 0.1}
103	down: Forward {duration: 0.01}
104	}
105	```
106
107	---
108
109	## Play Types
110
111	\| Type \| Description \| Example \|
112	\|------\|-------------\|---------\|
113	\| `Forward {duration: 0.2}` \| One-shot forward \| Hover transitions \|
114	\| `Snap` \| Instant jump, no animation \| Default state initialization \|
115	\| `Loop {duration: 1.0}` \| Looping animation \| Loading spinners \|
116	\| `ReverseLoop {duration: 1.0}` \| Ping-pong loop \| Pulsing effects \|
117	\| `BounceLoop {duration: 1.0}` \| Bounce back and forth \| Bouncing animations \|
118
119	---
120
121	## Ease Functions
122
123	\| Function \| Description \|
124	\|----------\|-------------\|
125	\| `Linear` \| Constant speed \|
126	\| `InQuad` / `OutQuad` / `InOutQuad` \| Quadratic easing \|
127	\| `InCubic` / `OutCubic` / `InOutCubic` \| Cubic easing \|
128	\| `InQuart` / `OutQuart` / `InOutQuart` \| Quartic easing \|
129	\| `InQuint` / `OutQuint` / `InOutQuint` \| Quintic easing \|
130	\| `InSine` / `OutSine` / `InOutSine` \| Sine easing \|
131	\| `InExp` / `OutExp` / `InOutExp` \| Exponential easing \|
132	\| `InCirc` / `OutCirc` / `InOutCirc` \| Circular easing \|
133	\| `InElastic` / `OutElastic` / `InOutElastic` \| Elastic spring \|
134	\| `InBack` / `OutBack` / `InOutBack` \| Overshoot \|
135	\| `InBounce` / `OutBounce` / `InOutBounce` \| Bounce \|
136
137	Usage: `ease: OutCubic` in the AnimatorState (optional, defaults to Linear).
138
139	---
140
141	## The `apply` Block
142
143	Target values to animate TO. Structure mirrors the widget's shader properties.
144
145	```
146	// Animate single properties
147	apply: {
148	draw_bg: {hover: 1.0}
149	}
150
151	// Animate multiple properties
152	apply: {
153	draw_bg: {hover: 1.0 color: #f00}
154	draw_text: {color: #fff}
155	}
156	```
157
158	CRITICAL: Only `instance()` shad

People who liked this also viewed

6 picks

Type

makepad-2.0-animation

743stars87forks

View on GitHub

How to install makepad-2.0-animation?

zhanghandong/makepad-skills/makepad-2.0-animation

$npx -y skills add ZhangHanDong/makepad-skills --skill makepad-2.0-animation

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Makepad 2.0 Animation Skill
2
3	> Version: makepad-widgets (dev branch) \| Last Updated: 2026-03-03
4
5	## Overview
6
7	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.
8
9	## Documentation
10
11	Refer to the local files for detailed documentation:
12	- `./references/animator-reference.md` - Complete Animator API, play types, ease functions, examples
13
14	## IMPORTANT: Documentation Completeness Check
15
16	Before answering questions, Claude MUST:
17
18	1. Read the relevant reference file(s) listed above
19	2. If file read fails or file is empty:
20	- Inform user: "Reference docs incomplete. Still answering based on SKILL.md patterns."
21	- Still answer based on SKILL.md patterns + built-in knowledge
22	3. If reference file exists, incorporate its content into the answer
23
24	---
25
26	## Critical: Widget Animator Support
27
28	NOT all widgets support `animator`! Adding `animator: Animator{...}` to an unsupported widget is silently ignored - no error, no animation, nothing happens.
29
30	### Widgets that SUPPORT Animator
31	`View`, `SolidView`, `RoundedView`, `ScrollXView`, `ScrollYView`, `ScrollXYView`, `Button`, `ButtonFlat`, `ButtonFlatter`, `CheckBox`, `Toggle`, `RadioButton`, `LinkLabel`, `TextInput`
32
33	### Widgets that DO NOT Support Animator
34	`Label`, `H1`-`H4`, `P`, `TextBox`, `Image`, `Icon`, `Markdown`, `Html`, `Slider`, `DropDown`, `Splitter`, `Hr`, `Filler`
35
36	To animate a Label: Wrap it in a View with the animator:
37	```
38	View{
39	width: Fit height: Fit
40	animator: Animator{
41	hover: {
42	default: @off
43	off: AnimatorState{ from: {all: Forward {duration: 0.15}} apply: {draw_bg: {hover: 0.0}} }
44	on: AnimatorState{ from: {all: Forward {duration: 0.15}} apply: {draw_bg: {hover: 1.0}} }
45	}
46	}
47	label := Label{text: "Animated via parent"}
48	}
49	```
50
51	---
52
53	## Animator Structure
54
55	```
56	animator: Animator{
57	<group_name>: {
58	default: @<state_name>
59	<state_name>: AnimatorState{
60	from: { ... }
61	ease: <EaseFunction>
62	redraw: true
63	apply: { ... }
64	}
65	<state_name>: AnimatorState{ ... }
66	}
67	<group_name>: { ... }
68	}
69	```
70
71	---
72
73	## Groups
74
75	Each group is an independent animation track. Common groups:
76
77	\| Group \| Purpose \| Typical States \|
78	\|-------\|---------\|----------------\|
79	\| `hover` \| Mouse hover in/out \| `off`, `on` \|
80	\| `focus` \| Keyboard focus \| `off`, `on` \|
81	\| `active` \| Toggled/checked state \| `off`, `on` \|
82	\| `disabled` \| Disabled state \| `off`, `on` \|
83	\| `time` \| Continuous looping \| `off`, `on` \|
84
85	Multiple groups animate simultaneously without interfering.
86
87	---
88
89	## The `from` Block
90
91	Controls transition timing. Keys are states being transitioned FROM, or `all` as catch-all.
92
93	```
94	// From any state, animate over 0.2 seconds
95	from: {all: Forward {duration: 0.2}}
96
97	// Instant from any state
98	from: {all: Snap}
99
100	// Different timing depending on origin
101	from: {
102	all: Forward {duration: 0.1}
103	down: Forward {duration: 0.01}
104	}
105	```
106
107	---
108
109	## Play Types
110
111	\| Type \| Description \| Example \|
112	\|------\|-------------\|---------\|
113	\| `Forward {duration: 0.2}` \| One-shot forward \| Hover transitions \|
114	\| `Snap` \| Instant jump, no animation \| Default state initialization \|
115	\| `Loop {duration: 1.0}` \| Looping animation \| Loading spinners \|
116	\| `ReverseLoop {duration: 1.0}` \| Ping-pong loop \| Pulsing effects \|
117	\| `BounceLoop {duration: 1.0}` \| Bounce back and forth \| Bouncing animations \|
118
119	---
120
121	## Ease Functions
122
123	\| Function \| Description \|
124	\|----------\|-------------\|
125	\| `Linear` \| Constant speed \|
126	\| `InQuad` / `OutQuad` / `InOutQuad` \| Quadratic easing \|
127	\| `InCubic` / `OutCubic` / `InOutCubic` \| Cubic easing \|
128	\| `InQuart` / `OutQuart` / `InOutQuart` \| Quartic easing \|
129	\| `InQuint` / `OutQuint` / `InOutQuint` \| Quintic easing \|
130	\| `InSine` / `OutSine` / `InOutSine` \| Sine easing \|
131	\| `InExp` / `OutExp` / `InOutExp` \| Exponential easing \|
132	\| `InCirc` / `OutCirc` / `InOutCirc` \| Circular easing \|
133	\| `InElastic` / `OutElastic` / `InOutElastic` \| Elastic spring \|
134	\| `InBack` / `OutBack` / `InOutBack` \| Overshoot \|
135	\| `InBounce` / `OutBounce` / `InOutBounce` \| Bounce \|
136
137	Usage: `ease: OutCubic` in the AnimatorState (optional, defaults to Linear).
138
139	---
140
141	## The `apply` Block
142
143	Target values to animate TO. Structure mirrors the widget's shader properties.
144
145	```
146	// Animate single properties
147	apply: {
148	draw_bg: {hover: 1.0}
149	}
150
151	// Animate multiple properties
152	apply: {
153	draw_bg: {hover: 1.0 color: #f00}
154	draw_text: {color: #fff}
155	}
156	```
157
158	CRITICAL: Only `instance()` shad

People who liked this also viewed

6 picks

Type