I'm trying using GSDevTools on my vue3 project, with just the simplest DEMO example:
<script setup lang="ts">
import {onMounted } from "vue";
import gsap from "gsap";
import GSDevTools from "gsap/GSDevTools";
gsap.registerPlugin(GSDevTools);
onMounted(() => {
//give this tween an id
gsap.to(".grey", {
duration: 1,
x: 700,
rotation: 360,
delay: 3,
id: "grey",
});
GSDevTools.create();
});
</script>
<template>
<div class="w-12 h-12 bg-gray-500 grey"></div>
</template>
but there is only one option "global timeline" for me to choose
I've checked the documents, if I specify the animation id in GSDevTools.create(), it worked fine but only one animation can I choose.
What should I do?