Jump to content


Creating new timeline objects

Moderator Tag
Go to solution Solved by OSUblake,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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();
        .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! 

Link to comment
Share on other sites

  • Solution

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.

  • Like 1
Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

Thanks guys for getting back to me so quickly. 


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

Link to comment
Share on other sites

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.

  • Like 1
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.