[gsap animation cleanup in vuejs]

Hi Rodrigo, thank you so much for the help with my problem also thanks for giving me some information about garbage collection, learned a new thing today

[gsap animation cleanup in vuejs]

Quote

 

The GSAP instance could persist if there is a reference elsewhere in the code, but in most cases it's released to garbage collection, which most likely will happen when the component is unmounted and Vue does it's own cleanup and garbage collection disposal.

 

 

Sorry, what you mean "The GSAP instance could persist if there is a reference elsewhere in the code"?

 

util code:

import { gsap } from "gsap";
const startAnimation(elementClass, btnElClass){
	const gsapTimeline = gasp.timeline();
  	gsapTimeline.fromTo(elementClass, {/* Some other codes */},{/* Some other codes */});
  	gsapTimeline.fromTo(elementClass, {/* Some other codes */}, {/* Some other codes */, onComplete: ()=>{
    		gsapTimeline.fromTo(btnElClass, {/* Some other codes */},{/* Some other codes */});
    	});
  	return gsapTimeline;
}

export { startAnimation };

ComponentA:

mounted: function () {
	this.componentA = startAnimation('.component-a', '.btn-a');
},
beforeDestroy: function () {
	this.componentA.kill();
}

ComponentC:

mounted: function () {
	this.componentC = startAnimation('.component-c', 'btn-b');
},
beforeDestroy: function () {
	this.componentC.kill();
}

So if I have something like this, does this count as "reference elsewhere in the code"?

 

sorry, first time using vuejs and gsap.

 

[gsap animation cleanup in vuejs]

Currently I am creating a vuejs website which is using gsap to do some animation and my problem is that I have two pages/components that is animating when a user enters, but users are able to visit other pages/components while current page/component's animation is still running so I want to stop everything and remove all the animation when users clicks away from the current animating page/component.

 

To do that, can I use gsap.timeline.kill() on beforeDestroy? is kill() going to stop and remove all the animations in that page/component? I also saw some people using killAll?

 

sorry, english is not my first language