37 lines
653 B
Vue
37 lines
653 B
Vue
<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>
|