Jump to content
Search Community

Couple of questions about performance

caffrey75 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

Hi there,

 

Just got a couple of questions about possible performance, maybe a bit obvious for the first one, but I've come pretty much directly from a Flash BG so I'm not really much of an expert with animations that aren't built in it.

 

First question relates to animating in and out of a stage. Although I've got the stage css set to "overflow: hidden", I set up a function whereby each object that finishes its "out" animation would also also have its visibility then set to "hidden" and also its display set to "none". Is this good practice and will it help processing, especially where we have many different objects animating?

 

Second question relates to the number of properties of an object I want to tween. Let's say I have just two main TweenMax instances: var TweenIn = TweenMax.fromTo ( etc ) and var TweenOut = TweenMax.fromTo ( etc ). The animation of objects is based on user-choice, they might want to animate its scale, position rotation, opacity etc - or maybe just a combination of a couple of properties.

 

Can this potentially cause a hit on processing if I were to animate just the opacity, for example, but none of the other properties, so all of them would essentially be animating from: CurrentValue to CurrentValue. I haven't noticed any problems, but I'm running quite a fast system. Does that question make sense?

 

Many thanks and - I'll probably always say this when posting - this product is just fantastic! :)

Link to comment
Share on other sites

Yes, setting visibility to "hidden" and/or display to "none" does help the browser render things faster, so it's a good practice.

 

As far as tweening properties that don't really change their values, I wouldn't worry much about that although I suppose omitting those would technically be better/faster. In an early version of CSSPlugin, I actually had logic in place to sense when the values weren't changing and those would be completely ignored (to improve performance) but I realized that there were some cases where that behavior would be undesirable, like if a tween ran and then you altered those [non-tweening, ignored] properties and then maybe restarted or jumped to a mid-spot in your tween, those values wouldn't get re-set to what you specified in your tween. Again, a very rare and unlikely scenario, but possible nonetheless and it's imperative for me to make sure the platform honors what you specifically tell it to, so I removed the conditional logic that ignored non-tweening properties. Instead, they simply get set directly on each update which really shouldn't take much time at all.

 

In summary, I doubt you'd ever notice a performance difference by omitting a few non-changing properties from the tween but if you want the absolute best performance possible, yes, remove those properties.

 

Does that answer your question(s)?

Link to comment
Share on other sites

Thanks so much for the swift reply, Jack. Definitely answers the questions. I know some get a bit fussy about absolutely maxing out performance, but that's probably more coding-headache than I can be doing with and if the performance is neglible than no worries.

 

Sorry, I've got another question to ask regarding TimelineLite/Max and if you feel it merits another thread, please move it.

 

I was wondering if it was possible to build a dynamic Timeline on the fly? Let's say we've got an arbitrary bunch of objects, all with various properties relating to x/y/opacity/starting point and stuff...

 

Is there any way of appending those into a New Timeline with tl.append() or something

and being able to control it? Or is that a bit too much to ask? :)

Link to comment
Share on other sites

I was wondering if it was possible to build a dynamic Timeline on the fly? Let's say we've got an arbitrary bunch of objects, all with various properties relating to x/y/opacity/starting point and stuff...

 

Is there any way of appending those into a New Timeline with tl.append() or something

and being able to control it? Or is that a bit too much to ask? :)

Absolutely! The whole platform is built to be extremely dynamic. You can append() things anytime to a TimelineLite/Max instance and control it however you please. You can even create new TimelineLite/Max instances and nest those inside another TimelineLite/Max (as deep as you want). I'm curious what might have given you the impression that this wouldn't be a good thing to do. Maybe the docs are doing a poor job somewhere? If so, please help us identify that so that we can do a better job.

Link to comment
Share on other sites

I'm curious what might have given you the impression that this wouldn't be a good thing to do. Maybe the docs are doing a poor job somewhere? If so, please help us identify that so that we can do a better job.

 

Hey that's great news! Totally the opposite though, regarding my impression, I just sometimes can't believe that the whole engine could be any better than it is, but it never fails to surprise me! Are there any of the examples in the download that deal specifically with this type of thing? Sorry, that's being really lazy of me isn't it, but I do get a bit lost in docs sometimes :)

Link to comment
Share on other sites

Hey there,

 

Well, had an interesting evening with TimelineLite and Max and watched quite a few tutorials. Typically I've got a bit stuck. I'm basically trying to accomplish something like Carl's BulletProof TL Max tutorial:

 

http://www.snorkl.tv...or-forward-out/

 

However, where I'm stuck is that, rather than have an animation play/reverse/do something, it needs to do this at the same time as another animation is coming on the screen. These animations are made up of multiple TweenMaxed elements. So I figure that I need to insert and control animations inside separate Timelines and then nest those in the main Timeline. The second problem that crops up is that the number of 'animation groups' to insert into separate Timelines is totally arbitrary (could be 2, could be 10). Tried all sorts of things and looked at a lot of tutorials because I think each Timeline I need to nest will have to be unique and have a unique name and I can't think of a dynamic way of going about it in javascript. Maybe I need to go back to TweenMax for this, or is there an elegant solution in TimelineMax? Sorry for asking so many questions in one day ;)

Link to comment
Share on other sites

Wow, I think I might have worked out a method using a for loop and 2 arrays.

 

var mainTL =new TimeLineMax;
var timeLineArray=[];
for (var i=0; i<=numGroups; i++){
group=groupName[i];
var tempArray=[];

for (var ii=0; ii<=group[i].numObjects; ii++){
obj=group[i].obj[ii];
var newTween=TweenMax{group[i].obj[ii] blah blah};
tempArray.push(newTween);
}
timeLineArray[i]=new TimeLineMax;
timeLineArray[i].appendMultiple(tempArray);
mainTL.append(timeLineArray[i]);
tempArray=[];
}

 

That's just a rough truncated breakdown of what I did, but it actually seems to work - bar testing. Is this on the right sort of track?

Link to comment
Share on other sites

Sure, that looks like it'd probably work, although it could be simplified to something like this:

 

var mainTL = new TimeLineMax();
for (var i = 0; i <= numGroups; i++){
   group = groupName[i];
   var insertTime = mainTL.duration();
   for (var ii = 0; ii <= group[i].numObjects; ii++){
       mainTL.insert( TweenMax.to(group[i].obj[ii] ... ), insertTime );
   }
}

Link to comment
Share on other sites

Thanks, Jack, simplifying code has never been my strong point. The more I try to simplify, the more trouble I seem to get into, although that doesn't stop me trying.

 

I'm not sure whether I've run into a bug. It's probably not, just something I've done - to do with the invalidate() call. I've currently got quite a lot of messy code going on in my project, so I recreated the error I get using the simplified example you posted above.

 

mainTL = new TimelineMax();
groupNames=[$('.as-s1'), $('.as-s2')];

for (var i = 0; i < groupNames.length; i++){
var group = groupNames[i];

var insertTime = mainTL.duration();	
mainTL.insert( TweenMax.to(group, 2,{x:100}), insertTime );

}
mainTL.invalidate();

 

Obviously I wouldn't be using invalidate() like in the above example, but I do need to have one of the Tweens revalidate some of the variables it starts with at some point. However, if I try invalidate() at any point it throws up this error in my console.

 

TypeError: g.invalidate is undefined

...)m-=parseFloat(F(k,"padding"+l[n],s,!0))||0,m-=parseFloat(F(k,"border"+l[n]+"Wid...

 

Not sure quite what this means...

Link to comment
Share on other sites

It sounds like you're trying to call invalidate() on some other object (not a TimelineMax). I just tested snippets of your code and I was able to call invalidate() fine on it. Can you post a very simple HTML page that clearly demonstrates the issue?

 

Thanks, Jack. At the moment I've gone about the whole process another way, but when I'm done I'll do what you've asked.

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...