Monthly Archives: May 2012

Greensock & Three.js

Good news Flash fans.

You’ve switched to HTML5 & JavaScript and you want to have some control over your animations like you had before. Well, remember that awesome Greensock animation library? It has arrived for JavaScript. Complete with TweenLite, TweenMax, TimelineLite, and TimelineMax. All your favorites are there. Come on, who hasn’t thrown in a Bounce.EaseOut on an animation and called it a day? And as a bonus, the syntax is so similar you would think you were still writing in AS3. To see the power of the Greensock library we combined it with Three.js to animate some WebGL!

Getting started

First thing we need to do is setup Three.js to work with the Greensock animation library. Our main problem is that both libraries want to have their own request animation frame (rAF) loop. Luckily, Greensock comes with a tick listener that we can use to render our Three.js scene. Like so…

Now that we have our render loop setup we can start with a simple example. Let’s say we want to animate a few mesh objects within a sequence. We want each to last for 2 seconds and we want to stagger them 0.2 seconds apart.

This is starting to looking good. However, what if we want more control over our sequenced animation? Maybe we want to pause the sequence. Maybe we want to reverse it. TimelineLite is going to be our new best friend for the job.

TimelineLite

We can rewrite our previous example using a timeline. Additionally, we will listen for when the entire sequence is complete and reverse it.

A more complicated example

So, we’ve seen a pretty simple example using the timeline features of Greensock. Let’s try to expand upon this simple example and see what we can create. Hmmm… How about we add a horse model from the ROME project and see if we can make it jump over the dominoes! Normally we would use the animation loop to control the jump using a sine curve or something similar. However, for this specific example we are just learning so timelines are sufficient.

Adding a horse

First thing we need to do is load the horse JSON model. You can get that from the three.js github project.

THREE.js Github

Next, we will add the horse mesh to our scene and give it a brown material. Morph targets must be enabled if you want to have the horse to run as he’s animated. Morph targets are keyframe animation data that can be built into the JSON model. If you need more information on morph targets visit a previous blog post.

Morph Targets

Finally, we will write three tweens to create a simple jump animation. We set a total time interval of 8 seconds and script the duration and delay of each tween to be a percentage of the total time for easier adjustments. At this point (like most animations) it is a matter of fiddling with the numbers to get something desirable.

Conclusion

The Greensock animation library was an awesome resource in Flash and seems to be a solid option for JavaScript as well. I am sure that it will only get better with future releases. It is an exciting time to be a creative JavaScript developer.

Get Source

Saving battery life with CancelAnimationFrame

There are a ton of great posts out there about using RequestAnimationFrame (RAF) for your animation/game loops. These posts will quickly show you how to setup the RAF shim for cross browser support and then how to kick off the whole thing. See below

To Infinity and Beyond

The previous code will get us started with an animation loop. Unfortunately the way a RAF loop works is to create a loop that will recursively call itself forever. If that is what you are going for then great. But if you want control of RAF what we need is a way to stop the animation loop when we are no longer animating. Enter CancelAnimationFrame.

Why are we stopping?

Before we talk about CancelAnimationFrame we should back up and talk about why you would want to start and stop the animation loop. The reason is simple. If our content isn’t changing then why waste the time computing the RAF loop 🙂 This especially becomes a factor on devices that run on battery such as tablets and smartphones. Additionally, if we are using PhoneGap we will probably want to cancel the RAF loop when our app goes into the background with the “pause” event.

CancelAnimationFrame

To cancel a requestAnimationFrame we need to know the id. If you notice from our shim above the requestAnimationFrame function returns an id each time. We can easily adjust our animation loop to store this id so that we can cancel it later. We do this by passing the frame id to cancelAnimationFrame. Pretty simple.

Cancel RAF Demo

1 2