Tag Archives: Greensock

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