Ensuring a Timeline has no memory leaks and all animations killed

[maimairel]

Hello, 

 

I've been working on a project using GSAP for filtering and hiding items in a grid layout (filtering like the one on the jQuery.isotope plugin).

 

The grid is put in a container that has one instance of TimelineLite that I reuse each time the filtering is triggered.

 

This is what I have:

this._timeline.progress( 1 ).kill().clear( true )
	.to( hide, 0.2, {
		autoAlpha: 0, 
		y: -30, 
		onComplete: function() {
			// my code here
		}
	})
	.staggerFromTo( 
		show, 0.2, 
		{ opacity: 0, y: -30 }, 
		{ autoAlpha: 1, y: 0, clearProps: 'visibility,opacity,y' }, 
		0.1, '+=0', 
		this.options.afterFilter, null, 
		this.options.afterFilterScope ).play();

In this code, hide are the items to be hidden and show are the items to be shown. 

 

The question is, I'm not sure whether the code I'm using on this grid is free from memory leaks, free from uncompleted animations (where an item has only say 40% opacity or hangs halfway because the y property hasn't finished animating) and that all callbacks are called when a user triggers this piece of code very quickly.

 

Here's the live example (a WordPress theme):

http://wp.youxithemes.com/helium/

 

Thank you!

[Carl]

Hi and welcome to the GreenSock forums,

 

As long as you kill() the timeline (like you are doing) you should be fine.

Nothing in your code snippet jumps out as cause for concern.

I ran your WP template while monitoring memory usage and everything looked good.

 

Here are some great resources that Jonathan recently shared that will help you do your own tests:

• https://developer.chrome.com/devtools/docs/javascript-memory-profiling
• http://blog.chromium.org/2011/05/chrome-developer-tools-put-javascript.html
• http://newsrdr.us/blog/post/2
• https://developer.chrome.com/devtools/docs/heap-profiling

 

Your template looks really nice. Very cool filtering effect.

[maimairel]

Hi Carl, 

 

Thanks for your answer

Glad to hear that the code is fine.

 

Another question just to be sure. Would progress( 1 ).kill().clear(true) ensures that the timeline completes all animations, call all complete callbacks, and reset its state to the initial state like when you create a new TimelineLite object?

 

Thank you!

[Carl]

progress() has its suppressEvents parameter set to false by default, so yes, callbacks will fire.

http://greensock.com/docs/#/HTML5/GSAP/TimelineLite/progress/

 

When you clear() a timeline, you remove the tweens from the timeline, nothing gets reset necessarily. If you rewind the timeline to time(0) or progress(0) before the clear() then the properties will remain on the tween targets as they were at time(0) / progress(0)

 

If you are using from() tweens and you find that after your timelines are cleared() that unwanted property values are still on your elements, you can remove them like so:

TweenLite.set(myElements, {clearProps:"all"});

If you run into a problem or need more help, please provide a simple CodePen demo. Thanks

[maimairel]

clearProps: 'visibility,opacity,y' 

Last thing, will the clearProps I have in my code applied to the elements if I call progress(1) before killing the timeline?

 

Thank you it's clear now