Timeline not removing all properties after .kill()

[klipartstudio]

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();

 

[OSUblake]

Hi kilpartstudio!

 

Variables just don't just disappear. Totally unrelated to GSAP.

 

You would need to clear any references to the timeline.

this.animation.kill();
this.animation = null;

 

[OSUblake]

1 hour ago, klipartstudio said:

Is there an issue with timeline animating threejs objects in Aframe? Just curious if anyone else ran into an issue like this.

 

No. Once you kill it, it shouldn't animate. If you believe this is an issue with GSAP, please make a minimal demo showing the issue.

 

[Carl]

47 minutes ago, OSUblake said:

variables just don't just disappear. Totally unrelated to GSAP.

 

You would need to clear any references to the timeline.

this.animation.kill();
this.animation = null;

 

this would be a helpful addition to the timeline.kill() docs https://greensock.com/docs/v3/GSAP/Timeline/kill() (same for tween)

 

 

[OSUblake]

9 minutes ago, Carl said:

this would be a helpful addition to the timeline.kill() docs https://greensock.com/docs/v3/GSAP/Timeline/kill() (same for tween)

 

You think? This concept applies to anything that is an object. For example, the element here doesn't disappear just because it's removed from the DOM. It's going to stay in memory until goes out of scope or you clear any references to it.

let element = document.querySelector(".foo");

element.parentNode.removeChild(element);

console.log(element);

// now it can be garbage collected
element = null;

 

[Carl]

 

 

 

22 minutes ago, OSUblake said:

You think?

yes, that's why i mentioned it. 

 

seems that over the years there's been quite a bit of confusion and effort put into explaining it 

the way the docs are written it seems that kill() magically does everything to make it disappear. 🤷‍♂️

 

https://greensock.com/forums/topic/24975-clear-and-kill/

https://greensock.com/forums/topic/21787-kill-the-animation-after-it-is-complete/

https://greensock.com/forums/topic/9347-dispose-of-a-timelinemax/

https://greensock.com/forums/topic/19192-best-practice-kill-animation/

https://greensock.com/forums/topic/21870-garbage-collection-for-repeated-animation/

[OSUblake]

28 minutes ago, Carl said:

the way the docs are written it seems that kill() magically does everything to make it disappear. 🤷‍♂️

 

Are the docs less magical now?

 

 

[Carl]

i'll only be truly happy when that gif is used in the docs  😀

saw the update for tween.kill(). I think it will save folks a bit of trouble for sure 👍