An auto-animate interaction tweens an element (or component) smoothly between states or variants using a FLIP transition — so toggling a layout, list order, or variant animates instead of snapping.
Where: Right sidebar → Interact → Interactions → “+” → Standalone — Add an Auto-animate interaction
Key ideas
- FLIP between states: It captures before/after and tweens position/size/opacity — great for reordering, expanding, or swapping variants.
- Variant / keyframe driven: Bind it to a componentId + propId, or to keyframes[] with a stateKey; indexed mode animates by item index (e.g. swipe-to-advance).
- Loop & dissolve: loopAtEnds and dissolveOptions tune what happens at the ends and how non-movers cross-fade.
- Component inheritance: Auto-animate authored once on a component is inherited by placed instances, with a separate measured timeline for each matched root.
Steps
- Select the element/component whose state changes.
- Add an Auto-animate interaction.
- Bind it to the variant/prop or keyframes that change.
- Set duration/ease and (optionally) indexed or loop behavior.
Narrower FLIP targets
Only nodes whose geometry or tracked properties change are animated, and absolute positioning is limited to relocating targets. This avoids leaving stray fixed dimensions/positioning on instances after a transition.