A morph interaction animates one element into another — opening a card into a lightbox, or a bullet into a panel — using a FLIP transition between the source and target.
Where: Right sidebar → Interact → Interactions → “+” → Morph — Add a morph (lightbox / bullet) interaction
Key ideas
- Source & target: Pick the source and target (element / trigger / rect / container); clone keeps the original in place.
- Reversible: reversible morphs back on close; morphedClass styles the morphed state.
- Motion: animatedProps, duration, and ease control which properties tween and how.
Steps
- Select the source element.
- Add a morph interaction.
- Choose the target element/container.
- Enable reversible and set duration/ease.