Variant animate

Variant-animate tweens a component subtree whenever a prop or variant changes — so switching a component’s state animates instead of snapping.

Where: Right sidebar → Interact → Interactions → “+” → Morph/Standalone — Add a variant-animate interaction

Key ideas

• What it watches: componentId + propId — when that prop/variant changes, the subtree animates.
• Per-pair transitions: perPairTransitions lets specific from→to changes use their own timing.
• Timing: duration, ease, stagger, and dissolveOptions shape the tween.

Steps

1. Select the component instance.
2. Add a variant-animate interaction.
3. Bind it to the prop/variant that changes.
4. Set duration/ease and any per-pair transitions.