Hover, click & focus animations

Pointer-triggered interactions animate an element on hover, click, or focus — for buttons, cards, and inputs.

Where: Right sidebar → Interact → Interactions → “+” → Pointer — Add a hover / click / focus interaction

Key ideas

• Triggers: Hover, Click, and Focus each fire the animation on that pointer/keyboard event.
• Reverse & yoyo: Click can reverseOnClickOutside; hover/click/focus support yoyo to play back on release.

Steps

1. Select the element.
2. Add a hover, click, or focus interaction.
3. Define the to-state animation.
4. Enable yoyo or reverse-on-click-outside if you want it to undo.