Hi Team,
I have a vue/aframe project I am working on and I am using gsap.timeline() to animate the 3d objects. I store the timeline in a variable called animation. After clicking on a button I want to wipe out the timeline from the object before I leave the page.
The issue I am having is that timeline doesn't kill the animation. When I console.log this.animation I still see the instance of gsap timeline with all the tween in it; also when I do a this.animation.getChildren() I see all the tween also.
To make sure I was not going crazy. I made a window.ani variable and set it to be the timeline. Manually calling the window.ani.kill() in the browser console also did not remove it.
I have never ran into this issue ever animating divs. Is there an issue with timeline animating threejs objects in Aframe? Just curious if anyone else ran into an issue like this.
setTimeout(() => {
this.animation = gsap
.timeline({ repeat: 5, repeatDelay: 5 })
.clear()
.to(this.colorObjectB.object3D.position, 0.2, {
y: 1.2,
ease: "none",
})
.to(this.colorObjectB.object3D.position, 0.1, {
y: 1,
ease: "none",
})
.to(this.colorObjectB.object3D.position, 0.2, {
y: 1.2,
ease: "none",
})
.to(this.colorObjectB.object3D.position, 0.1, {
y: 1,
ease: "none",
})
.to(this.colorObjectB.object3D.rotation, 3, {
y: 360 * (Math.PI / 180),
ease: "none",
});
window.ani = this.animation;
console.log('this.animation ', this.animation);
}, 3);
Here is the code in the function I am using to wipe the timeline
this.animation.kill();