Animated variant switches
When an instance changes variant, its children move, resize, fade and change color instead of cutting. Set the curve per switch, instance or set.
A variant switch tweens: when a card goes from collapsed to expanded, its children move and resize into place, colors blend, and parts only one variant has fade in or out. It works the same whether the switch comes from a trigger (Set variant on hover or tap) or from a switch placed on the timeline. By default it's a short spring.
What tweens
| Change between the variants | How it moves |
|---|---|
| Position, size, scale, rotation, opacity | Tweens with the transition's curve |
| The component's box (a variant with its own size) | The instance resizes along |
| Fill and border colors | Blend from one to the other (springs never overshoot a color) |
| A child only one variant shows | Fades in or out |
| Changed text, image or shape | Crossfades two copies |
| Inside an Auto Layout group | A child only one variant shows collapses in or out, a changed text shares one slot that blends between both widths, and the siblings reflow |
Switch on the timeline
To change variant at a moment of the animation, for example a toggle that switches to on at 1.2 s, place a switch at the playhead.
- Select the instance and move the playhead to the moment of the switch.
- In the inspector's Variants section, open Switch at playhead and pick the value, for example on under state.
- The switch appears in the list below as “1.2 s → state: on”. Play: the instance tweens to the variant at that moment.
- Add more switches for a sequence (on at 1.2 s, off at 2.4 s). Remove one with its ×.
A switch at the same moment for the same set replaces the old one.
Choose the transition
The curve comes from the most specific place that sets one:
| Where | How to set it | Applies to |
|---|---|---|
| A trigger or a single switch | Ask the AI, or transition on add_trigger / variant_key over MCP | That one switch |
| The instance | Transition in the instance's Variants section | Every switch of this instance |
| The variant set | In edit mode, the set's ⋯ menu in Props → Transition: … | Every instance of the component |
| Default | Short spring (0.3 s, bounce 0.1) |
| Preset | Curve |
|---|---|
| Default (instances) | Uses the variant set's transition |
| Short spring (sets) | Spring 0.3 s, bounce 0.1 |
| Quick ease | Ease out, 0.15 s |
| Smooth spring | Spring 0.45 s, no bounce |
| Bouncy spring | Spring 0.5 s, bounce 0.3 |
| Instant | No tween, like before |
| Custom | Shown when the AI or MCP set another curve |
In exports
| Export | Switches |
|---|---|
| Motion (React) | The component re-renders with Motion animate: one element tree for every look, so elements move to the new look; the entrance plays only once |
| SwiftUI | Switches inside withAnimation |
| HTML | Set variant triggers switch data attributes with per-variant CSS and transitions (springs as linear()) |
| Lottie, CSS, Web Animations, SVG | Flattened; timeline switches arrive as keyframes |
| Video, GIF, PNG | As on the stage |
Works with
- Triggers: Set variant on hover or tap.
- Variants: sets, values and box sizes.
- Easing and springs
Troubleshooting
| If this happens | Try this |
|---|---|
| The switch still cuts | The transition is Instant. Set Transition on the instance, or on the set's menu, to a spring. |
| Switch at playhead is missing | The instance's component has no variants yet. Add one in edit mode. |
| A child pops instead of moving | It only exists in one variant, so it fades. Keep one child in both variants and change its values instead. |