I wanna make a motion graph by using gsap in vue3. I met a question. here is an example below. object-type variable like tl return by data() is transform to Proxy by default. And it dose not work when I config it later. So I try to define a variable in setup() without using reactive(). And it works when I config it later.
Run this example, I find some differences exists between tl1(define in setup without reactive()) and tl2.target(define in data()). You can run it on CodePen.
Could someone tell me the reason why it dosen't work when it becomes proxy object?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app" style="width: 5rem;height: 5rem;">
<button @click="moveOrigin">actionOrigin</button>
<button @click="moveProxy">actionProxy</button>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js"></script>
<script>
const app = {
setup() {
const tl1 = gsap.timeline({ paused: true });
const flag = true;
return { tl1,flag };
},
data(){
const tl2 = gsap.timeline({ paused: true });
return {tl2};
},
methods: {
moveOrigin() {
console.log("tl1 Origin");
console.log(this.tl1);
if (this.flag) {
this.tl1.to("button", { y: "+=2rem", duration: 1 });
} else {
this.tl1.to("button", { y: "-=2rem", duration: 1 });
}
this.flag = !this.flag;
this.tl1.play();
},
moveProxy() {
console.log("tl2 Proxy");
console.log(this.tl2);
if (this.flag) {
this.tl2.to("button", { y: "+=2rem", duration: 1 });
} else {
this.tl2.to("button", { y: "-=2rem", duration: 1 });
}
this.flag = !this.flag;
this.tl2.play();
},
}
};
Vue.createApp(app).mount('#app');
</script>
</body>
</html>
