Introduction

In this chapter, we will look at how to bring elements on our pages to life with the use of animation. You must take a rational approach when it comes to where and when to add animation into your pages. Try to keep the use of animation only to situations where it will benefit the users' experience, and avoid bombarding them with animations that serve no purpose.

Animation can provide beneficial effects in a range of situations such as easing the transition from one element to another by fading opacity, or by changing the color of an element that requires the user's attention by gently pulsing from a light to a dark shade.

We will be using the animation capabilities built into the YUI3 library, which is included in the standard Moodle installation. The basis for all animation consists of changing the value of an element's attributes from one specific value to another, over a specified time span. For example, to fade-out an element we may change the element's opacity from 100%...