Jump to content
Search Community

Reaching TweenMax from local scope.

Fusion2222 test
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

Hi everyone! Lately i had a discussion with one of my coworkers about this issue:

 

I have object named MyObject with method named launch. On every launch method call, method searches for TweenMax at global scope. Normally i would do:

MyObject.launch = function(){
     var domName = "#dom-" + String(Math.round(Math.random()*100));
     TweenMax.to(domName,1,{x:200});
}

Problem begins, when this method fires on every user scroll, which can be A LOT (especially in Firefox). My question is this: Isnt better to create an instance of TweenMax as a property of MyObject like this to reach better performance? 

MyObject.TweenMax = TweenMax;
MyObject.Math = Math; 
MyObject.launch = function(){ // Fires VERY often
     var Math = this.Math, 
     TweenMax = this.TweenMax,
     domName = "#dom-" + String(Math.round(Math.random()*100));
     MyObject.TweenMax.to(domName,1,{x:200});
}

In this scenario i would completely avoid of any global scope reaches. Please keep in mind performance-friendliness. However i still have a bad feeling, that this is not a good approach, but I dont know why. Any of your comments are deeply appreciated.

 

 

Link to comment
Share on other sites

  • Solution

Are you creating multiple instances of MyObject? If you are, adding methods to the prototype would be faster.  And yes, using TweenMax as property would be faster, TweenLite would be even faster, but I doubt any of that's really going to make a noticeable improvement.

 

If you are scrolling, throttle your updates to 16ms or use the TweenLite ticker to do the updates. Using the ticker is better because it keeps everything synced with the engine. This is what Draggable does to prevent constant updating during mouse/touch move events. 

TweenLite.ticker.addEventListener("tick", myFunction);
TweenLite.ticker.removeEventListener("tick", myFunction);

function myFunction() {
  // Do something
}
  • Like 2
Link to comment
Share on other sites

Yep, Blake is exactly right. To be clear, the main idea is to avoid running any significant code in a "scroll" listener because those can be fired MANY TIMES between screen refreshes, so it's utterly wasteful to execute visual-related code in there (like animations). Draggable does this by adding a "scroll" listener but inside that handler, we merely set a flag that says "we scrolled...on the next tick let's do stuff". It's super cheap to set that flag (like dirty = true) so if it happens multiple times during the scroll, it's no problem. Maybe it gets set 5 times in a row super fast before the next tick, but then on that next tick is when we execute the "real" code, like firing off tweens or whatever. 

 

Even though it's technically faster to reference TweenMax as a property of your object (avoiding global scope), I highly doubt you're going to actually notice any real-world difference unless you're doing that many thousands of times on each tick. Focus your energy on things that can deliver the most "bang for the buck" performance-wise which would certainly be throttling the scroll updates in this case. 

 

Good luck!

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