Jump to content
Search Community

gsap animation cleanup in vuejs

ItsTimeToSleep test
Moderator Tag

Go to solution Solved by Rodrigo,

Recommended Posts

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

Link to comment
Share on other sites

Hi and welcome to the forums.

 

Indeed kill() should be enough for what you intend. Mhh I don't know if killAll made it to GSAP 3, I believe that is a v2 method of TweenMax.

 

The best approach I can think of is to use the mounted() hook to add the GSAP instance to the component:

mounted: function () {
  this.animation = gsap.to(/* GSAP config here */);
},
beforeDestroy: function () {
  // Kill the GSAP instance
  this.animation.kill();
}

That would allow to kill as many GSAP instances as you need/want, since you'll have the reference in the specific Vue instance of that component, prevent errors and memory leaks.

 

Finally from the docs:

https://greensock.com/docs/v3/GSAP/Tween/kill()

 

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.

 

Happy Tweening!!!

  • Like 3
Link to comment
Share on other sites

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.

 

Link to comment
Share on other sites

  • Solution
8 hours ago, ItsTimeToSleep said:

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

Actually no, since you're not using the instance elsewhere, also, as I said before, at that point you have to take into account what Vue will do after the component is destroyed/unmounted, which could possibly release everything to garbage collection. Honestly I don't have the slightest idea of how Vue handles garbage collection, but I'm pretty sure that is done the right way, otherwise no one would use Vue.

 

Having a reference in the code is close to mention or remember it, soto speak. I'm going to get a little grim here, sorry. Let's say that you have a plant and that plant dies, then you put it in the garbage can so is collected by the truck. If you keep talking about the plant or remembering the plant, that's a reference to the plant, so even with the plant being gone, is still there. If you never mention or remember the plant ever again in your life, is like every trace of it was erased the moment it went into the trash can.

 

This is a super simplified example of keeping a reference. We create a GSAP instance, we play it and then we don't need it again in our app, so we kill it, but if there is another method that uses the instance, even if it was killed before, there is a reference to it. In that case kill() stops the animation and releases it to garbage collection, but the browser's garbage collector won't release it because, at some point that method could be called so the instance is not released from memory. If you kill the GSAP instance and there is no longer used in the app after it, then is taken by garbage collection and released. Here is a simple explanation of how garbage collection works in JS:

https://www.geeksforgeeks.org/garbage-collection-in-javascript/

 

This code creates and completely removes the GSAP instance:

mounted: function() {
  // We create the GSAP instance, which is now allocated in memory
  this.tween = gsap.to(this.$refs.element, {/* config */});
},
methods: {
  killTween: function () {
    // Kill the tween
    this.tween.kill();
  },
}

There is no other reference to this.tween so it's released by GSAP and the garbage collector sees that and also sees that there is no other reference to it in the code, so the memory allocation is released as well.

 

This code doesn't remove the GSAP instance:

mounted: function () {
  this.tween = gsap.to(this.$refs.element, {/* config */});
},
methods: {
  killTween: function () {
    // Kills the tween
    this.tween.kill();
  },
  reuseTween: function () {
    // Here is another reference to the GSAP instance
    this.tween.restart();
  },
},

Since the instance is referenced elsewhere in the code, kill() stops the animation and releases it to garbage collection, but garbage collector sees the other reference, so it doesn't release the allocated memory even if you never call that method in the app lifetime.

 

Finally don't worry too much about garbage collection and all this stuff as is a complete universe on it's own. Seriously garbage collection in every language is something that could constitute a career in on itself, what I just explained to you here is basically everything I know on the subject, and believe me there is a lot more about this. Just be sure to not have unnecessary and unused references and/or methods in your code and you'll be fine, since Vue, GSAP and the browser will handle the rest for you.

 

Happy Tweening!!!

  • Like 3
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...