Is it possible to replicate Framer Motion 'layout' functionality?

[MattHeslington]

Hi,
I'd love to be able to replace Framer Motion with Motion, but I can't work out how to achieve what I'm doing with FM.

I have a simple drop-down menu consisting of a container div and three children, only one of which is ever displayed at any time. The child div dictates the size of the parent div. Clicking on different links in the nav hides and shows one of the three children. I would like to be able to animate the size/position of the parent div when the selected child changes.

This is my current code:

import { animate } from 'motion'
import { onMount } from 'svelte'

 onMount(() => {
      animate(
            '#animation-target',
            {},
            {
                duration: 1,
                easing: 'ease-in-out',
            }
        )
    })


{#if expanded}
        <div
            id="animation-target"
            class={`absolute top-12 z-10 overflow-hidden rounded-md border border-gray-400 bg-gray-100 shadow-2xl ${
                chosen === 'test3' ? 'right-0' : 'left-0'
            }`}>
            {#if chosen === 'test1'}
                <div class="h-[340px] w-[300px]">test1</div>
            {/if}
            {#if chosen === 'test2'}
                <div class="h-[400px] w-[840px]">test2</div>
            {/if}
            {#if chosen === 'test3'}
                <div class="h-[340px] w-[300px]">test3</div>
            {/if}
        </div>
    {/if}
    

Is this possible at all? In Framer Motion I would do it by adding

layout
transition={spring}

to the parent motion.div where spring is just:

export const spring = {
 type: 'spring',
 stiffness: 200,
 damping: 30,
}

Any help very much appreciated!

[MattHeslington]

Ah, looking at the feature comparison section of the website it seems layout animations aren't possible with Motion One.