Layout / FLIP

Reorder or resize with layout={true} and watch elements FLIP into place.

Reorder
1
2
3
4
5
6
Expand / collapse (siblings reflow)
Panel
Sibling
Sibling
Generated HEEx
<.motion
  :for={item <- @items}
  id={"item-#{item.id}"}
  layout={true}
  class="rounded-box ..."
>
  {item.label}
</.motion>