Layout Animations

Mercury supports layout animations, allowing elements to animate their position, size, and layout changes seamlessly. To use it you must mark elements subjective to layout change with the layout attribute.

<div class="flex {justify}" use:mercury layout>
  <div
    class="box"
    use:mercury
    onclick={() => (justify = 'justify-end')}
    layout
  ></div>
</div>

Layout IDs

By assigning the same layout value to different elements, you can create connections between them for smooth transitions.

<div layout="uniqueId"></div>

Example

In this example, Mercury animates the element when its layout changes (e.g., when the layoutState changes).

<script>
  let layoutState = 'justify-start';
</script>
<div class="flex {layoutState}" use:mercury layout>
  <div
    class="box"
    use:mercury
    onclick={() => (layoutState = 'justify-end')}
    layout="sharedId"
  ></div>
</div>