Jump to content
Fusion2222

Reaching TweenMax from local scope.

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.

 

 

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.