Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Maelfyn

Greensock Animation Techniques

Recommended Posts

Hey all. Not sure if this sort of post is welcome here, but I made a video summarizing some of my accumulated wisdom during my time using Greensock. It's mainly focused on HTML5 game developers that want to use the DOM. I believe I have achieved very good results using Greensock and it seems there are not many pushing the envelope in this area. For example, as of late my game now runs very smoothly even on mobile devices like the iPad2 and the Kindle Fire HDX. In fact at this time I am continuing to optimize the animations further so it is exciting to see what Greensock's full potential will be.

 

  • Like 3
Link to comment
Share on other sites

Very cool - thanks for sharing some of your findings. I'm happy to hear that GSAP is performing so well for you. Yeah, coming from jQuery, I'd imagine GSAP opened up a lot of new possibilities for you. 

 

Oh, and as for the startAt:{} vs fromTo(), internally those are almost identical except that fromTo() sets immediateRender:true by default (although you can override that if you want. In other words, these are the same:

TweenLite.to(..., {startAt:{...}})
TweenLite.fromTo(..., {immediateRender:false});

So the performance difference was probably just that your startAt:{} tweens were able to skip the initial render. That's good - if you don't need an immediateRender, there's no sense incurring one. 

 

Let us know when you launch your game. 

 

Happy tweening!

Link to comment
Share on other sites

Very informative! Keep on publishing things like this please.

Link to comment
Share on other sites

Ah, interesting point about the immediateRender. I was not aware of that distinction. Also, can you elucidate what seems to make using startAt:{} so much better than positioning with javascript .style.left/top? I didn't think I would be able to optimize beyond javascript's .style.left/top. So how does Greensock position elements under the covers? It's requestAnimationFrame, right? If that's so much better, why don't they just make .style.left a one-frame animation? LOL, I just don't understand it.

Link to comment
Share on other sites

Thanks for sharing. In case you weren't aware, there's one thing I'll point out regarding your last point about onComplete and opacity:0.

 

If you want to make an element disappear at the end of a tween you could use the visibility style to toggle that. The benefit of visibility is that the element is totally hidden like opacity:0, but it also stops mouse events on the element so it may help improve performance.

 

Visibility is handled smartly so that if you tween to visibility:hidden, it's toggled at the end of the tween, and if you tween to visibility:visible, it's toggled at the start. I haven't done a performance test (I imagine it's not worse) but at least it might make for a bit cleaner code. Something like this:

TweenMax.to(foo, 1, {
  startAt: {
    left: 0
    opacity: 1,
    visibility: "visible"
  },
  left: 100,
  opacity: 0.5,
  visibility: "hidden"
});

If you're using opacity and visibilty at the same time, the autoAlpha plugin can be used to combine them into one smart property that sets visibility:hidden when opacity === 0, or visibilty:visible at all other times. e.g.

TweenMax.to(foo, 1, {
  startAt: {
    left: 0,
    autoAlpha: 1
  },
  left: 100,
  opacity: 0.5,
  visibility: "hidden"
});
  • Like 3
Link to comment
Share on other sites

Very interesting video, most of the development I have seen in HTML games is through canvas.  Here you decided to go with DOM animation and it does make sense with all the screens and text.  

Since I have been involved recently in animating HTML like if it were Flash I found your two first tips so very true:

  1. Animate objects with absolute position.
  2. Animate dom elements as images or divs with a background-image. (Perhaps because of my Flash background I find that way more natural).
  3. Pool objects: Good Choice!

I have some questions/suggestions though:

Do you truly have a file with 49k+ lines of code?

Your code seems a little bit verbose (if, else, for loops), do you use ternary operators?  I also heard/read that while loops are the way to go when doing very intense operations  (that is usually what I go for).

var i = 0, l = myArray.length;
while(l--){
console.log(myArray[i]);//so you start with 0
i++
} 

What about implementing constants for the eases (I see that you use them directly like Quad.easeIn instead of var EASE_1 = Quad.easeIn).

 

Great info, keep on posting videos,  I really want to learn about your findings!

Link to comment
Share on other sites

Yes, one of my javascript files currently has over 60k lines of code. Yes, I am weird. I have no build process. I just upload files to my website. I don't even minify because I am truly that lazy and honestly it barely matters as my site loads pretty quickly anyway. I may start minifying after 1.0 is released, though.

 

I never use ternary operators because I find them to have poor readability. My opinion.

 

Yes, that's a good point that while loops are a bit faster... about 10-15% from what I can measure. Honestly, none of my bottleneck operations in my game are performing tight loops. The longest loop I ever perform is 125 loops like when I update the images in my bank. And most of these longer loops are performed outside of combat like initializing the images of the bank. Stuff that is only run once. To even notice 1 millisecond of difference I would have to run about 10000 loops (3 vs 4 ms). This game is completely event driven and has no game loop.

 

Saving the easings to a variable isn't a bad idea to save some memory. There are a lot of performance-related optimizations that I'd like to address first. Oh yeah, and I'd like to actually release the game some day, too :)

 

If you dig in my code, you'd start to question my sanity quite a bit, but this is my first web game and I'm not a professional developer so that goes a long way toward explaining many of my bizarre practices.

  • Like 1
Link to comment
Share on other sites

TweenMax.to(foo, 1, {
  startAt: {
    left: 0,
    autoAlpha: 1
  },
  left: 100,
  opacity: 0.5,
  visibility: "hidden"
});

 

Using autoAlpha and visibility sounds like a great way to handle it. Good idea! I hate using onComplete:function(){} because it's so much typing... could we change this to something shorter... like done:function(){} ????

Link to comment
Share on other sites

After I finish up a round of optimization I think I will release a GreenSock "stress test" video to demonstrate how many elements can fly around the screen using these techniques.

  • Like 1
Link to comment
Share on other sites

Just wanted to say thanks for posting the video!

 

You should know that your sharing effort is appreciated.

 

Keep us posted!

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