Makepad 2 0 Animation

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:

• Read the relevant reference file(s) listed above
• 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
• 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

animator: Animator{
    <group_name>: {
        default: @<state_name>
        <state_name>: AnimatorState{
            from: { ... }
            ease: <EaseFunction>
            redraw: true
            apply: { ... }
        }
        <state_name>: AnimatorState{ ... }
    }
    <group_name>: { ... }
}

Groups

Each group is an independent animation track. Common groups:

| Group | Purpose | Typical States |

|-------|---------|----------------|

| hover | Mouse hover in/out | off, on |

| focus | Keyboard focus | off, on |

| active | Toggled/checked state | off, on |

| disabled | Disabled state | off, on |

| time | Continuous looping | off, on |

Multiple groups animate simultaneously without interfering.

The from Block

Controls transition timing. Keys are states being transitioned FROM, or all as catch-all.

// From any state, animate over 0.2 seconds
from: {all: Forward {duration: 0.2}}

// Instant from any state
from: {all: Snap}

// Different timing depending on origin
from: {
    all: Forward {duration: 0.1}
    down: Forward {duration: 0.01}
}

Play Types

| Type | Description | Example |

|------|-------------|---------|

| Forward {duration: 0.2} | One-shot forward | Hover transitions |

| Snap | Instant jump, no animation | Default state initialization |

| Loop {duration: 1.0} | Looping animation | Loading spinners |

| ReverseLoop {duration: 1.0} | Ping-pong loop | Pulsing effects |

| BounceLoop {duration: 1.0} | Bounce back and forth | Bouncing animations |

Ease Functions

| Function | Description |

|----------|-------------|

| Linear | Constant speed |

| InQuad / OutQuad / InOutQuad | Quadratic easing |

| InCubic / OutCubic / InOutCubic | Cubic easing |

| InQuart / OutQuart / InOutQuart | Quartic easing |

| InQuint / OutQuint / InOutQuint | Quintic easing |

| InSine / OutSine / InOutSine | Sine easing |

| InExp / OutExp / InOutExp | Exponential easing |

| InCirc / OutCirc / InOutCirc | Circular easing |

| InElastic / OutElastic / InOutElastic | Elastic spring |

| InBack / OutBack / InOutBack | Overshoot |

| InBounce / OutBounce / InOutBounce | Bounce |

Usage: ease: OutCubic in the AnimatorState (optional, defaults to Linear).

The apply Block

Target values to animate TO. Structure mirrors the widget's shader properties.

// Animate single properties
apply: {
    draw_bg: {hover: 1.0}
}

// Animate multiple properties
apply: {
    draw_bg: {hover: 1.0 color: #f00}
    draw_text: {color: #fff}
}

CRITICAL: Only instance() shader variables can be animated. uniform() variables cannot.

Complete Hover Button Example

use mod.prelude.widgets.*

let HoverCard = RoundedView{
    width: Fill height: Fit
    padding: 16
    new_batch: true
    cursor: Hand
    draw_bg +: {
        instance hover: 0.0
        color: mix(#2a2a3d, #3a3a5d, self.hover)
        border_radius: 8.0
    }
    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}}
            }
        }
    }
    title := Label{text: "Hover me" draw_text.color: #fff}
}

Key points:

• new_batch: true is REQUIRED for hoverable items with backgrounds
• cursor: Hand shows pointer cursor on hover
• instance hover: 0.0 declares the animatable variable
• mix(color1, color2, self.hover) interpolates between colors

Timeline Animation (Keyframes)

For multi-step animations use timeline():

animator: Animator{
    time: {
        default: @off
        on: AnimatorState{
            from: {all: Loop {duration: 2.0}}
            apply: {
                draw_bg: {
                    rotation: timeline(){
                        snap(0.0)
                        snap(6.28)
                    }
                }
            }
        }
    }
}

Loading Spinner Pattern

let Spinner = View{
    width: 40 height: 40
    draw_bg +: {
        instance rotation: 0.0
        pixel: fn() {
            let sdf = Sdf2d.viewport(self.pos * self.rect_size)
            let cx = self.rect_size.x * 0.5
            let cy = self.rect_size.y * 0.5
            let r = min(cx, cy) * 0.8
            sdf.arc(cx, cy, r, self.rotation, self.rotation + 4.5, 3.0)
            sdf.stroke(#4488ff, 2.5)
            return sdf.result
        }
    }
    animator: Animator{
        time: {
            default: @on
            on: AnimatorState{
                from: {all: Loop {duration: 1.0}}
                apply: {
                    draw_bg: {
                        rotation: timeline(){
                            snap(0.0)
                            snap(6.28318)
                        }
                    }
                }
            }
        }
    }
}

Animator vs Vector Tween

Makepad has two separate animation systems:

| Feature | Animator (this skill) | Tween (see makepad-2.0-vector) |

|---------|------------------------|----------------------------------|

| Target | Widget shader instance vars | SVG shape properties (fill, cx, opacity...) |

| Syntax | animator: Animator{...} block | Property value: opacity:Tween{...} |

| Triggers | State transitions (hover, focus) | Automatic on render |

| Loop | Loop {duration: 1.0} in from | loop_:true (bool, NOT string!) |

| Use for | UI interactions (hover, click) | SVG/Vector graphic animations |

Use Animator for: Button hover effects, toggle states, loading spinners (shader-based)

Use Vector Tween for: SVG path animations, pulsing indicators, moving dots, color transitions

See the makepad-2.0-vector skill for Tween details.

Best Practices

• Always add new_batch: true to Views with backgrounds that have hover animations
• Use instance variables for anything you want to animate
• Match group names to semantic purposes (hover, focus, active)
• Use Forward for transitions, Snap for instant state changes
• Set default: @off for states that start inactive
• Label cannot animate - wrap in View if you need animation on text
• Keep durations short (0.1-0.3s) for hover, longer (0.5-2.0s) for time-based