Creating new timeline objects

[Virtous]

Hello GSAP community!

 

I have written a jquery plugin which includes some greensock animations. The plugin is a slider that has some elements fading in. I have no problems with the plugin itself, but the way that I use gsap makes me wonder if I'm slowing down the overall performance.

 

Consider the following,

 

Every time the slider updates, I create a new timeline like in the code example below.

	var tl = new TimelineMax();
	tl
        .to(this.$nextSlide, this.settings.speed, {opacity: 1, right: '10%', ease: this.settings.easing}, 'A')
        .to(this.$currSlide, this.settings.speed, {opacity: 0, right: '0%', ease: this.settings.easing}, 'A');

What happens to the "first" timeline when the next is created? My initial thought was that it simply gets overwritten.

 

Would reusing the "first" timeline benefit performance? 

 

 

 

Also, I have one question about including GSAP. 

 

At the moment I'm pulling in gsap like this

<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.15.1/TweenMax.min.js"></script>

If I'm only animating the opacity and the right position of DOM elements along with custom easing, which GSAP package should I include in my project? I don't want to load stuff that I don't use.

 

 

Thanks in advance! 

[OSUblake]

Hi Virtous,

 

As long as you are not storing a reference to the timeline, like in some other variable, it will go to garbage collection when ready. There is always going to be some sort of impact when you create a new object, but will it make a noticeable difference? Maybe if you are creating 20,000 of them, but not with the code you have above.

 

Are you reusing the timeline, like to replay or reverse it, or do you create a new animation every time?  If you are not using reusing it, and those are you are 2 lines of code, why don't you just use a regular tween?

 

TweenLite.to(this.$nextSlide, this.settings.speed, {opacity: 1, right: '10%', ease: this.settings.easing});
TweenLite.to(this.$currSlide, this.settings.speed, {opacity: 0, right: '0%', ease: this.settings.easing});

For the CDN, you can customize what you want by going to the GreenSock Home Page and clicking on the download button right in the middle. It sounds like you only need the lightweight setup, depending on whether or not you really need a timeline.

[Diaco]

just in addition , you just need to load TweenLite , CSSPlugin , EasePack and TimelineLite/Max (if you'r using timeline) , but i think that worth to load TweenMax.min.js :

 

- the difference's just about 3kb or less ( with CDN ) 

- minimize external HTTP requests 

- i think most of developers use TweenMax and that's mean more chanace to users cashed already in their browsers

- benefits of TweenMax : more control on tweens + TimelineMax + included all other GSAP necessary and useful plugins ...

.... ect

[Virtous]

Thanks guys for getting back to me so quickly. 

 

One follow up question about using regular tweens, do they animate at the same time?

[OSUblake]

They'll animate at the same time. Regular tweens aren't sequenced like they are in a timeline. You should watch the animation sequence video. It starts out showing a bunch of regular tweens, and why you might want to convert them into a timeline.