Suppose we want to make an interface dial, that animates around when we click a button from zero to whatever value we input. We want not only the stroke of the dial to animate in both length and color, but also the number from zero to the value we input. You can view the completed implementation in example_07-08.

So, if we entered a value of 75, and clicked animate, it would fill around to look like this:

Instead of listing out the entire JavaScript file (which is heavily commented so should make some sense to read in isolation), for brevity's sake, we'll just consider the key points.

The basic idea is that we have made a circle as an SVG <path> (rather than a <circle> element). As it's a path it means we can animate the path as if it were being drawn using the stroke-dashoffset technique. There's more info on this technique in the boxed out section below but briefly, we use JavaScript to measure the length of the path and then use the stroke-dasharray attribute to specify the length of the rendered part of the line and the length of the gap. Then we use stroke-dashoffset to change where that dasharray starts. This means you can effectively start the stroke 'off' the path and animate it in. This gives the illusion that the path is being drawn.

If the value to animate the dasharray to was a static, known value, this effect would be relatively simple to achieve with a CSS animation and a little trial and error (more on CSS animations in the next chapter).

However, besides a dynamic value, at the same time as we are 'drawing' the line we want to fade in the stroke color from one value to another and visually count up to the input value in the text node. This is an animation equivalent of patting our heads, rubbing our tummy, and counting backwards from 10,000. GreenSock makes those things trivially easy (the animation part; it won't rub your tummy or pat your head, although it can count back from 10,000 should you need to). Here are the lines of JavaScript needed to make GreenSock do all three:

// Animate the drawing of the line and color change
TweenLite.to(circlePath, 1.5, {'stroke-dashoffset': "-"+amount, stroke: strokeEndColour});
// Set a counter to zero and animate to the input value
var counter = { var: 0 };
TweenLite.to(counter, 1.5, {
    var: inputValue, 
    onUpdate: function () {
        text.textContent = Math.ceil(counter.var) + "%";
    },
    ease:Circ.easeOut
});

In essence, with the TweenLite.to() function you pass in the thing you want to animate, the time over which the animation should occur, and then the values you want to change (and what you want them to change to).

The GreenSock site has excellent documentation and support forums so if you find yourself needing to synchronize a number of animations at once, be sure to clear a day from your diary and familiarize yourself with GreenSock.