What triggers the Makepad Animation skill?

It triggers when you mention Makepad animations, transitions, hovers, or specific DSL patterns like 'makepad state' or 'from: { all: Forward }'.

Can I animate any property in Makepad?

Most shader uniforms can be animated, including colors, border sizes, scales, rotations, and opacity within draw calls like draw_bg or draw_text.

Does it support custom easing functions?

Yes, it supports standard functions like InOutQuad as well as custom Bezier, Power, and Exponential Decay functions for precise motion control.

How does it handle Rust API integration?

The skill generates Rust code using the AnimatorImpl trait, allowing you to trigger states using animator_play() and the id!() macro within event handlers.

Makepad Animation

Name: Makepad Animation
Author: ZhangHanDong

byZhangHanDong

•

699

•

设计工具

Simplifies the creation of complex, high-performance UI animations and state transitions within the Makepad framework.

The Makepad Animation skill empowers developers to build fluid, interactive user interfaces using the Makepad animation system. It provides comprehensive support for defining hover, pressed, and focus states, configuring transition timelines (Forward, Snap, Loop), and applying advanced easing functions like InOutQuad or Bezier. By automating the generation of both DSL code and Rust API implementations, it streamlines the development of responsive, production-ready widgets and custom shader animations, ensuring a professional look and feel for cross-platform applications.

主要功能

01Multi-state animator configuration for hover, pressed, focus, and disabled states

02Automatic generation of Rust AnimatorImpl logic for seamless event handling

03Advanced timeline management with Forward, Snap, Loop, and Bounce animations

04699 GitHub stars

05Shader uniform animation support for colors, scales, transforms, and opacity

06Comprehensive easing library including Quadratic, Elastic, and Custom Bezier curves

使用场景

01Developing complex looping background or loading animations using keyframes and easing

02Creating interactive button hover and click effects with smooth color and scale transitions

03Implementing focus states for text inputs with animated borders and shadows

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add zhanghandong/makepad-skills makepad-animation

For use in Claude.ai and ChatGPT

Download Skill