Sveltekit: Animate modal height with dynamic content

[vexkiddy]

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.

 

[GSAP Helper]

What have you tried already? We love to see what you can come up with, that way we can see your thought process and thus better help you understand the tools!

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best. See if you can recreate the issue with as few dependencies as possible. Start minimal and then incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen

that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

 

Using a framework/library like React, Vue, Next, etc.? 

CodePen isn't always ideal for these tools, so here are some Stackblitz starter templates that you can fork and import the gsap-trial NPM package for using any of the bonus plugins: 

• React (please read this article!)
• Next
• Svelte
• Sveltekit
• Vue
• Nuxt

 

Please share the StackBlitz link directly to the file in question (where you've put the GSAP code) so we don't need to hunt through all the files. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. ✅

[vexkiddy]

hiya.. i've shared a svelte REPL for you

https://svelte.dev/repl/2e81e9e7aba64e54bdbe45f7e5d193f4?version=4.2.15

[mvaneijgen]

Hi @vexkiddy welcome to the forum!

 

Am I missing something? I don't see any GSAP code! Again we would love to see what you can come up with that way we can better help you understand the tools, so please try to get something working then someone here will definitely point you in the right direction.

 

If you're new to GSAP check out this awesome getting started guide https://gsap.com/resources/get-started/ 

 

Hope it helps and happy tweening! 

 

[vexkiddy]

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

[vexkiddy]

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

[mvaneijgen]

I don't know how to get it with auto, I think that only works if you set the hight to 0 and then animate it to it's full hight, but you can easily get the height of the elements on page load and then add it to an array an then tween to the height of the current index. Hope it helps and happy tweening! 

 

https://svelte.dev/repl/3461a39638864bfca41e6f473dff87cf?version=4.2.15

[vexkiddy]

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 

[mvaneijgen]

3 minutes ago, vexkiddy said:

so you have to hard code the values ?

No, that is why I said:

19 minutes ago, mvaneijgen said:

you can easily get the height of the elements on page load

Everything is hard coded right now, because that is the easiest way to demonstrate how the logic works. I have no idea how Svelt works, but I would get the elements as soon as they are ready and grap their heights and then add that to the array.

[vexkiddy]

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!

[Rodrigo]

Hi,

 

The main issue here is that the height of the element is updated after the reactive property is changed, because of this the height of the element is not the correct one right after changing the value, you need to be sure that the DOM has been updated properly. For that you can use Svelte's tick method:

https://svelte.dev/docs/svelte#tick

 

Something like this:

const handleClick = async() => {
  i++
  if (i >= 3) {
    i = 0
  }
  loginUserStore = state[i]
  const height = instance.clientHeight;
  await tick();
  gsap.set(instance, { clearProps: "height" });
  gsap.from(instance, {
    height: height,
    ease: "power1.inOut",
  });
}

What that code does is to update the reactive properties, then get the current height of the element (before the DOM is updated), then wait for the DOM to be updated and finally animate the element from the height it had before the update.

 

Here is a fork of your demo:
https://svelte.dev/repl/bd10a0741c8b4aaa8664b11357a0e678?version=4.2.15

 

Finally I would suggest you to check the Flip Plugin for this, but since you're just starting it might be a good idea to get a good grasp of what that code is doing before moving onto more complex stuff.

 

Hopefully this helps.

Happy Tweening!

[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 ?