I am trying to make a portfolio. My intro has a dom like this

        <div className={clsx("inline-flex", "items-center",
          "space-x-4")}>
          <div id="logo" className={"flex"}>
            <LoaderIcon isOnLoader={true}/>
          </div>
          <div className={"flex flex-col"} id={"title_container"}>
            <div id="subtitle" className={"text-neon-violet"}>
              {descriptionSmall}
            </div>
            <div id={"title"} className={"text-neon-violet text-4xl tracking-tighter"}>
              {title}
            </div>
          </div>
        </div>

In the animation, I am shrinking the #title_container to 0 using

loader.add({
        targets: "#title_container",
        duration: 800,
        easing: 'easeInOutQuart',
        scale: 0,
      })

The #title_container is going out, but the #logo stays in the same place.

I want to make the animation like the title is shrinking and the logo is coming center at the same time.

Please help me with this. Thanks