Interactive animations give access to user’s mouse or touch resoponses. Whether it’s a button that or a star shape that spins when clicked, almost all interactions share the same basic building blocks.

What are Animation Clips?

Before making a shape react to a mouse click, it needs to be teached how to move. This is done using Animation Clips.

Think of a standard video: it plays continuously from start to finish. But interactive animations are different — the user controls what happens next. Because it don’t know exactly when the user will click, so it can’t just make one long video.

Instead, we chop animation up into pieces called Clips. One clip might just be a shape sitting completely still (idle). Another clip might be a 10-frame animation of the shape growing. The State Machine’s only job is to smoothly switch between these clips whenever the user does something.

How to create them: at the very top of Timeline, Dopesheet, Graph editor, above the ruler there a white empty space. Click and drag in this area to create a new colored Clip block. You can resize it by dragging the edges, move it around, and double-click it to give it a name like “Hover In” or “Idle”.

The Golden Rule of Interactions

Almost every interactive effect uses a simple 3-Step Pattern:

1. Idle: resting state (playing a still clip, waiting for the user).
2. Action: animation that plays when the user does something (like growing or spinning).
3. Return: animation that smoothly brings the object back to its resting state.

A note on “Wait for animation to finish” toggle on arrows (Transitions).

• When going into an action, you usually want this OFF so it reacts instantly.
• When returning to Idle, you usually want this ON so the animation finishes its smooth motion before stopping.

1. Hover effect

A hover effect happens when the mouse enters an object and reverses when the mouse leaves.

Animation clips:

• Idle clip: static, no movement.
• Hover In clip: animates the shape growing (scale 1 to 2).
• Hover Out clip: animates the shape shrinking (scale 2 to 1).

States: Create three states: Idle (Loop: ON), Hover In (Loop: OFF), and Hover Out (Loop: OFF).

Wiring (Arrows):

• Idle ➔ Hover In
  • Wait to finish: OFF (React instantly!)
  • Condition: hover Equal My Shape
• Hover In ➔ Hover Out
  • Wait to finish: OFF (Interrupt if they leave early!)
  • Condition: hover Not equal My Shape (Go when they are NO LONGER hovering)
• Hover Out ➔ Idle
  • Wait to finish: ON (Wait for it to finish shrinking)
  • Condition: (Leave empty)

2. Click effect

A click effect is an instant, one-time action. Think of a coin spinning when you click it, or a heart doing a quick “pulse” bump. Because a click is instantaneous, you don’t need an “Out” state!

Animation clips:

• Idle clip: static, no movement.
• Bounce clip: animates the shape popping up and settling back down.

States: Create two states: Idle (Loop: ON) and Bounce (Loop: OFF).

Wiring (Arrows):

• Idle ➔ Bounce
  • Wait to finish: OFF (React instantly!)
  • Condition: click Equal My Shape
• Bounce ➔ Idle
  • Wait to finish: ON (Wait for the bounce to finish)
  • Condition: (Leave empty)

Because the click variable only triggers for a split second, the animation will play the Bounce clip exactly once, finish it, and automatically go back to sleep.

3. Press & Hold

This is how real-world physical buttons feel. When you press down, the button squishes in and stays squished as long as you hold the mouse button. When you let go, it springs back up.

Animation clips:

• Idle clip: static, scale is 1.
• Press down clip: animates the scale from 1 down to 0.8.
• Release up clip: Animates the scale from 0.8 back to 1.

States: Create three state nodes: Idle (Loop: ON), Press Down (Loop: OFF), and Release Up (Loop: OFF).

Wiring (Arrows):

• Idle ➔ Press Down
  • Wait to finish: OFF
  • Condition: pointerdown == My Shape (Triggers the moment the mouse clicks down)
• Press Down ➔ Release Up
  • Wait to finish: OFF
  • Condition: pointerdown != My Shape (Triggers the moment they let go of the mouse button)
• Release Up ➔ Idle
  • Wait to finish: ON (Wait for the button to spring all the way back up)
  • Condition: (Leave empty)

Interaction Cheatsheet

Built-in variables automatically track the ID of the shape being interacted with. Use these in your Transition conditions:

• hover: Persistent. Returns the ID of the shape the mouse is currently over. Empty when over the background.
• click: Transient. Returns the ID for a single frame when a click is completed. Best for instant actions.
• pointerdown: Persistent. Returns the ID as long as the primary mouse button is held down.
• pointerup: Transient. Returns the ID for a single frame when the mouse button is released.

See also

• State Machine Overview
• Dope sheet