Jump to content
Search Community

Will there be better performance if I re-use tweens?

al test
Moderator Tag

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

For example, I have a self-executing portion of code that creates all of the timelines and tweens I need, and then I run the .play() and .reverse() methods of the timelines in reaction to UI events.

 

I have it stuck in my head (based on nothing in particular) that for some reason since I re-use the objects it will create no more new objects each time UI events trigger.

 

Is this true?  Am I giving up something by doing it this way and getting no performance gain?

 

How can I performance test the difference in JS? Anyone know?

Link to comment
Share on other sites

Hi al,

 

Questions like these aren't really possible to answer definitively. What's best in one case for one user might not be best for someone doing something else.

 

If you're app is simple enough that you can pre-create all animations from the beginning, then I would probably recommend doing that. 

 

There is always some overhead in creating new objects "on demand" but I strongly doubt you would ever notice the impact of creating new animations onclick (or some other UI event) unless you were creating thousands of tweens. 

 

One downside to the approach taken in the tutorial you referenced is that the transition of one slide animating out can never overlap with the next slide animating in. One slide must leave before the next enters.

 

We often recommend that advanced users create animateIn() and animateOut() methods in their objects (in this case slides) so that at any time you can call one objects animateOut() sequence while calling another object's animateIn() sequence.

 

This tutorial offers a much more flexible and class-driven approach:

http://www.snorkl.tv/2011/05/real-world-benefits-of-oop-with-as3-for-the-completely-terrified-greensock-homepage-animation-case-study/

 

Although it doesn't use the same class approach this demo here shows how to glue many animations together by calling functions that return timelines:

 

http://codepen.io/GreenSock/pen/plsng

 

although this approach is used to combine many timelines into 1 timeline when the app first runs:

 

// build timeline


  tl.add("skew") // adds a new label
    .add( getSkewAnimation() ) // method returns a TimelineLite instance that gets nested at the end
    .add( getStaggerAnimation(), "stagger") //creates new label and adds animation there
    .add( getParticlesAnimation(), "particles")

you could certainly use this approach to generate overlapping transitions on multiple objects in response to user interaction

  • Like 2
Link to comment
Share on other sites

Hi Carl,

 

Thanks for your advice.  When I tried your technique I ended up with a lot of autoplaying timelines that I couldn't seem to avoid.  In the end I realized I didn't need one big timeline, it doesn't seem to buy me anything extra.

 

Here's what I ended up using, which I believe could easily support the overlapping animations you were talking about (although my UI doesn't really let that happen anyway).

 

I added all of my UI transitions to an animations object and paused them:

var Animations = {
        ShowSplashScreen:  new TimelineLite({
           ...
        }).pause(),

        HideSplashScreen: new TimelineLite({
           ...
        }).pause(),
}

Then throughout my business layer I call these as necessary.  This seems to work very well in my app.  Everything is running buttery smooth.  I also dynamically add some callbacks at some points to have the animations fire some functions when they complete that I didn't really want to mix into the animation object itself.

 

My next step will be to add in history.js support, and having the animations split out like this will be very useful so that I can reverse() things when the user presses the back button.

 

Thanks again,

Andrew

 

 

  • 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.
×
×
  • Create New...