makepad-animation

Author state-machine UI animations for Makepad widgets with per-state timing.

745|87|Updated Jan 10, 2026

Search Tags:#ui #animation #state #hover #transition #makepad #animator

Ready to run

npx skills add https://github.com/ZhangHanDong/makepad-skills --skill makepad-animation-zhanghandong

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: makepad-animation
Source: https://github.com/ZhangHanDong/makepad-skills/tree/main/skills/makepad-animation
Command: npx skills add https://github.com/ZhangHanDong/makepad-skills --skill makepad-animation-zhanghandong

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

The skill enables developers to author and fine-tune sophisticated Makepad UI animations using a state-driven animator, reducing manual coding and iteration cycles.

Core Features & Use Cases

Provide state-based animations (hover, pressed, focus, disabled) for interactive widgets.
Support transitions with Forward, Snap, Loop, and per-state timing, enabling dynamic UI motion.
Reuse common animation patterns (keyframes, easing, and nested apply blocks) across components like buttons and panels.
Use cases include hover feedback on buttons, panel transitions, and smooth state changes in complex interfaces.

Quick Start

Initialize a simple hover and press animation by defining hover.on and hover.off states in the animator and observe the transition effects.

Frequently Asked Questions about makepad-animation

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I create state-based UI animations in Makepad?▼

To create state-based UI animations in Makepad, author and fine-tune motion using a state-driven animator that enforces per-state timing definitions and supports Forward, Snap, Loop, and Reverse timelines for interactive widgets.

Can I animate properties like color and scale for Makepad widgets?▼

You can animate properties like color and scale for Makepad widgets by utilizing nested apply blocks within the state machine animator to dynamically apply visual changes during hover, focus, and transition states.

What is the best way to handle hover and pressed feedback for Makepad buttons?▼

The best way to handle hover and pressed feedback for Makepad buttons is defining hover.on and hover.off states in the animator, enabling smooth transitions and dynamic UI motion without extensive manual coding.

Does the Makepad animator support loop and reverse timelines?▼

The Makepad animator supports loop and reverse timelines, alongside Forward and Snap transitions, allowing developers to implement complex state changes and reuse common animation patterns like keyframes and easing across components.

How do state-machine animators reduce manual coding for Makepad transitions?▼

State-machine animators reduce manual coding for Makepad transitions by enforcing per-state timing definitions and providing reusable nested apply blocks, minimizing iteration cycles when authoring sophisticated UI motion for buttons and panels.