Version 1.0Animation in Glow

Overview

glow.anim.Animation is Glow's animation class. It produces a value which changes over time. You can listen to events on this object and react to this change in value.

The most common kind of animation involves changing a CSS value over time, so we have created a shortcut method for that: glow.anim.css, which generates Animation objects with events pre-attached to achieve the animation. Almost all animation can be created with this function rather using glow.anim.Animation directly.

Animating CSS Values with glow.anim.css

This method lets you specify CSS values to animate to and returns an Animation object which you can then attach events to, or simply start.

Because glow.anim.css returns an instance of glow.anim.Animation, animations created using glow.anim.css have the same properties and events as glow.anim.Animation.

Here's how to fade an element out:

var myAnimation = glow.anim.css("#demoNode", 5, { "opacity": {to:0}
});
myAnimation.start();

Show example in demo area

The parameters of glow.anim.css are explained in detail in the API. The above makes the element with ID "demoNode" fade out over 5 seconds.

Multiple properties can be animated at once, which makes moving elements around easy.

var myAnimation = glow.anim.css("#demoNode", 5, { "top": {to:200}, "left": {from: "10px", to: "50%"} }, { tween: glow.tweens.easeBoth() }
);
myAnimation.start();

Show example in demo area

In this example two CSS properites are changing at the same time, units are mixed, and a tween function is used.

When a number is provided as a 'to' or 'from' value, it is assumed to be pixels unless the property doesn't require units (opacity for instance). If units are mixed, the 'from' value is converted into the units of the 'to' value before the animation begins.

The 4th parameter of glow.anim.css is an options object, this uses the same options as glow.anim.Animation so you can set your animation to use a particular tween or run for a set number of frames rather than seconds. In the example above, glow.tweens.easeBoth() is used to provide tweening for animation, making it accelerate at the beginning and decelerate towards the end.

Here is a more complex example, which makes all divs with class "collapseMe" collapse when they're clicked. This example combines glow.dom, glow.events and glow.anim.

glow.dom.get("div.collapseMe").each(function() { this.style.overflow = "hidden"; glow.events.addListener(this, "click", function() { glow.anim.css(this, 1.5, { "height": {to:0}, "padding-top": {to:0}, "padding-bottom": {to:0} }, { tween: glow.tweens.bounceOut() }).start(); });
});

In the example above, all divs with class name "collapseMe" are given a click event. When the event fires an animation is created and started which changes the element's height to zero.

View the collapsing animation in the demo area

Adding events to animations

An instance of glow.anim.Animation is returned when you use glow.anim.css, you can also create instances manually.

Animations use a central interval and events to control animation. An Animation's 'frame' event is fired every time the value of the animation is calculated. When listening to the 'frame' event you can read the Animation's value and adjust properties accordingly. glow.anim.css creates an glow.anim.Animation instance and generates a 'frame' listener to change css values.

Once you've created your animation using glow.anim.css, you may want to attach listeners to other events.

var myAnimation = glow.anim.css("#testElement", 5, { "opacity": {to:0}
});
glow.events.addListener(myAnimation, "complete", function() { glow.dom.get("#testElement").remove();
});
myAnimation.start();

In the example above, a listener is added to the animation's "complete" event to remove the element from the DOM when the animation has finished. If you want to string multiple animations together, you may find glow.anim.Timeline easier than chaining them using "complete" events.

There are a number of other events you can listen to on an Animation. You can also stop, resume, or move the animation to another position.

Demo

/* code for the last executed animation will appear here */