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
- Select the component instance.
- Add a variant-animate interaction.
- Bind it to the prop/variant that changes.
- Set duration/ease and any per-pair transitions.