vexkiddy

this is amazing @Rodrigo!! Exactly what I needed! Also thank you @mvaneijgen for your help tooo!. Just out of interest, why would using the Flip Plugin be useful for this kind of animation ?

ah i see! i would have to create instance variables for each of the parts, and then retrieve their height values onMount. Ok i'll give that a go. Many thanks!

ahh i see, so you have to hard code the values ? there's not a way for it to work dynamically with the height ? its just it probably needs to be responsive so that it adapts to screen size changes. hmmm

ok i've added GSAP to my sveltekit REPL but i still can't figure it out. i just want to animate the height of the box depending on the content that is inside it. https://svelte.dev/repl/2e81e9e7aba64e54bdbe45f7e5d193f4?version=4.2.15

ok.. i'll try and update the REPL to use GSAP

hiya.. i've shared a svelte REPL for you https://svelte.dev/repl/2e81e9e7aba64e54bdbe45f7e5d193f4?version=4.2.15

Total noob here Consider the following using sveltekit (svelte-5) and tailwindcss: <div class="flex flex-col justify-center items-center gap-8 w-[350px]" bind:this={instance}> <img src="/logo/logo-web.svg" alt="" class="max-w-[64px]" /> {#if loginUserStore.step === 'login'} <EmailPassword /> {:else if loginUserStore.step === 'reset'} <Reset /> {:else if loginUserStore.step === 'confirm'} <Confirm /> {/if} </div> When loginUserStore.step changes, the content of the modal changes. The modal height is set to auto (its not actually defined) and has a fixed width. How can I use GSAP to animate the height of the modal when the dynamic content changes ? I made a svelte REPL here: https://svelte.dev/repl/2e81e9e7aba64e54bdbe45f7e5d193f4?version=4.2.15 to show how it currently works.