Auto-animate (FLIP state changes)

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.

Steps

1. Select the element/component whose state changes.
2. Add an Auto-animate interaction.
3. Bind it to the variant/prop or keyframes that change.
4. Set duration/ease and (optionally) indexed or loop behavior.