solidjs-motion

Shared element (layoutId)

Thumbnail ↔ hero share `layoutId='card'`. Donor's onCleanup donates rect; consumer's createMotion FLIPs from there. Wrapped in Presence — exit + FLIP run in parallel.

Click. The thumbnail and the hero share layoutId="card"; the consumer's FLIP animates between the donor's position and its own. Both wrapped in <Presence> so the exit runs in parallel with the FLIP.

thumb