Remove a TimelineMax when component destroyed

[Thomas Miller]

Hey!

I'm trying to delete a TimelineMax, once the user changes pages. I'm actually using Vue, so basically when a component gets destroyed, I want to totally remove the animations in that component.

 

However, I'm having a hard time completely removing it. It never actually gets destroyed, I'm doing something wrong.

 

Here is the pseudo-code I'm using (without the Vue stuff..):

 

// when omponent created, execute animation
animate(true);
// when component destroyed
animate(false);

function animate(x) {
  let tl = new TimelineMax({ repeat: -1 });
  // elements that I will animate
  const item1 = document.querySelector('.item1');
  const item2 = document.querySelector('.item2');
  const item3 = document.querySelector('.item3');

  // sub-timeline
  function anim(element) {
    const item = element;
    const subtimeline = new TimelineMax();
    // do the animations for one element
    subtimeline.add(() => { console.log('animating'); }, '+=0');
    subtimeline.to(item, 3, { x: '20', ease: Power4.easeInOut }, '+=0');
    // lots of animations..
    return subtimeline;
  }
  if (!x) {
    // I've tried lots of variants,
    // none of these work
    // I see the 'destroy' in the console when component is removed, but I still see the 'animating' as well, indefinitely..
    console.log('destroy');
    tl.invalidate();
    tl.invalidate().pause();
    tl.kill();
    tl = null;
  } else {
    tl.add(anim(item1), 0);
    tl.add(anim(item2), '+=1');
    tl.add(anim(item3), '+=1');
  }
}

 

[GreenSock]

When you kill() an animation, it definitely won't keep playing.

 

It looks like the problem is that you're declaring your "tl" as a local variable inside animate() but then you're expecting it to persist. So when your component is created, you call animate(true) which works fine. But then when the component is destroyed and you call animate(false), inside that function you're creating ANOTHER "tl" timeline...and immediately killing it. You're not killing the original timeline you created when the component was created. See what I mean? 

 

So you'd need to store a reference to that timeline somewhere so that you can kill() it when you need to. 

 

Make sense? 

[Thomas Miller]

Oh! That makes absolute sense... The source code I use is very different, but the problem is exactly what you explained. Thank you very much for your help, very detailed and spot-on answer!