<template>
  <div class="bg-slate-100 w-screen h-screen">
    <div id="logo-container">
      ...
    </div>
  </div>
</template>

<script setup>
import { gsap } from 'gsap'
import { onMounted } from 'vue'
onMounted(() => {
  const tl = gsap.timeline({ defaults: { ease: "power2.out " } });

  // B2 -> x: 95, y: 75
  tl.to("#B2", { x: 95, y: 75 });
  // B3 -> x: 115, y: 55
  tl.to("#B3", { x: 115, y: 55 });
});
</script>

<style>
#logo-container {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transform-origin: top left;
  z-index: 1000;
}

#logo-vb .bar {
  opacity: 0;
  transform: translateY(20px);
}
</style>
