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');
}
}