I have a simple question I couldnt solve several times already. It's when I render an element reactive it pushes away another element (on purpose). In this example an image is centered on my page. When I now render the drawer there is less space to the right so the image realligns itself and moves to the left to be in the center again. Since I am using in and out animations for the drawer it has a perfectly fine animation flying into the screen. But the image instantly clips to the left or after I close the drawer when the animation is over it clips back to the middle of the screen. Is there a smooth and simple way to animate that position change?
I know you can use tailwind for simple things like when the container has a changing size you can easily animate that. But I never figured out how to animate an element pushed away by another element rendered in. GPT unfortunatley is only reapeating what I tried already and wont help me any further :)
<div class="flex"><div class="flex-1 flex justify-center items-center px-14"><ImageSlider {post} /></div> {#if !closed}<DrawerRight in:fly={{ duration: 300, easing: quintOut, x: 100 }} out:fly={{ duration: 300, easing: quintOut, x: 100 }} /> {/if}</div>What I already tried is using tailwind on any div with transition-all duration-300 ease-in-out
Also applying a transition to the imageSlider container or the component itself didnt help e.g.:transition:slide={{ delay: 250, duration: 300, easing: quintIn, axis: 'x' }}