Please turn on JavaScript. To find out how to do this visit the WebWise JavaScript guide.

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. By itself, this class does very little, but it becomes very powerful once you add events to it.

Usually you will want to animate a CSS value, 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.

The most common animations are fades or reveals. To make these as easy as possible there are several animation helpers that take away all the complexity and allow you to run the animation with a single, simple line of code.

Animating CSS Values with glow.anim.css

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

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, and must explicitly be started.

Here's how to fade an element out using glow.anim.css (of course you could also use glow.anim.fadeOut):

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

Animation Helpers

glow.anim provides the following animation helpers.

  • fadeIn
  • fadeOut
  • fadeTo
  • highlight
  • slideDown
  • slideToggle
  • slideUp

They all work in a similar fashion. So, for instance, to easily fade an element out, just call glow.anim.fadeOut. This will created the required Animation and automatically start it.

// fades the element out over half a second, starting immediately.
glow.anim.fadeOut("div.fadeMe", 0.5);

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

Motion makes the world go round

- +

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

BBC © 2014 The BBC is not responsible for the content of external sites. Read more.

This page is best viewed in an up-to-date web browser with style sheets (CSS) enabled. While you will be able to view the content of this page in your current browser, you will not be able to get the full visual experience. Please consider upgrading your browser software or enabling style sheets (CSS) if you are able to do so.