skills.rest
ZhangHanDong
ZhangHanDongCOMMUNITY
Explore all skills by this author →
GitHub

makepad-2.0-animation

Implements Makepad 2.0 Animator states, transitions, and looping shader animations.

747|87|Updated Jan 10, 2026
Search Tags:#shader#Animation#makepad#rust ui#hover effect#Animator#ease function
One-click install
npx skills add https://github.com/ZhangHanDong/makepad-skills --skill makepad-2-0-animation
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: makepad-2.0-animation
Source: https://github.com/ZhangHanDong/makepad-skills/tree/main/skills/makepad-2.0-animation
Command: npx skills add https://github.com/ZhangHanDong/makepad-skills --skill makepad-2-0-animation

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Adding hover effects, transitions, and looping animations in Makepad 2.0 requires precise Animator DSL syntax, and mistakes like animating unsupported widgets or uniform variables fail silently with no error, leaving developers debugging invisible problems.

Core Features & Use Cases

  • Animator State Machines: Define animation groups (hover, focus, active, disabled, time) with AnimatorState blocks, from transitions, and apply targets.
  • Play Types & Easing: Use Forward, Snap, Loop, ReverseLoop, and BounceLoop play types with the full set of ease functions from Linear to InOutBounce.
  • Widget Compatibility Guardrails: Know exactly which widgets support the animator field and how to wrap unsupported widgets like Label inside an animated View.
  • Use Case: Build a hoverable card that smoothly interpolates its background color on mouse-over, or a loading spinner that rotates continuously using a Loop play type with a timeline keyframe.

Quick Start

Ask the AI to add a hover animation to a Makepad 2.0 button that fades its background color over 0.15 seconds using the Animator system.

Frequently Asked Questions about makepad-2.0-animation

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

FAQPage Schema
How do I add a hover animation to a Makepad 2.0 widget?▼

Add an animator block with a hover group containing off and on AnimatorStates, each using Forward with a duration and apply targets like draw_bg hover values. Declare an instance variable such as hover in draw_bg and interpolate colors with mix based on self.hover.

Which Makepad widgets support the Animator system?▼

View, SolidView, RoundedView, scroll views, Button variants, CheckBox, Toggle, RadioButton, LinkLabel, and TextInput support animator. Label, Image, Icon, Slider, DropDown, and others do not, so wrap them in an animated View instead.

Why is my Makepad animator block not doing anything?▼

The most common cause is adding animator to a widget that does not support it, which is silently ignored with no error. Also verify you animate instance variables rather than uniform variables, since uniforms cannot be animated.

What is the difference between Animator and Vector Tween in Makepad?▼

Animator drives widget shader instance variables through state transitions like hover and focus, while Tween animates SVG shape properties such as fill and opacity automatically on render. Use Animator for UI interactions and Tween for vector graphic animations.

How do I create a looping loading spinner animation in Makepad?▼

Use the time group with a Loop play type and drive a rotation instance variable through a timeline from 0.0 to 6.28318. Draw the spinner arc in the pixel shader using Sdf2d and the animated rotation value.

Related Skills

Explore More Software Engineering Skills→
ZhangHanDongZhangHanDong
745

makepad-animation

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

Community
Advanced
duckhoa-uitduckhoa-uit
1

animated-svg-smil

Animate SVG icons with SMIL for hover and state transitions.

Community
Advanced
transporte-terrestretransporte-terrestre

angular-style

Manage global CSS styles and typography for Angular applications using CSS variables.

Official
Intermediate
stellaronestellarone

skill-creator

Iteratively improve Claude skill descriptions through trigger evaluations and structured edit loops.

Official
Advanced