This is more of a showcase than a demo as it assembles multiple techniques discussed in other blogs.

The demo first uses a 'camera' to zoom and pan around quotes from Mohandas Karamchand Gandhi. This uses the camera utility described in a different blog entry.

After the camera has lingered on each quote long enough for the viewer to read through it, the final dot is displayed. When all quotes have been read, the camera zooms out, the quotes roll out and fade out but the dots stay and morph in a set of pebbles in the center of the screen. These pebbles in turn morph into Gandhi's stylized portrait.

All the animation effects are implemented using YUI 3 with specific SVG extensions, in particular to allow the animation of the transform attribute and the animation of the d attribute on the <path> element for morphing animations.

Gandhi's portrait was created in Illustrator from a scan of a drawing made by a friend.

The audio track is a guitar arrangement created specially for this demo by a another friend (who prefers anonymity).

Gandhi's quotes were found on The Quotations Page web site.

The font used for the text is GoodDog.

Running the demo

Click on the "Start SVG Demo" at the top of this page. Wait for the audio to load, then click the 'play' button when it appears.

Running the demo

Click on the "Start SVG Demo" at the top of this page. After the loading message disappears, click in the display area to start the demo.

Using the camera metaphore to script zoom and pan

Sometimes, we only think of animation as moving objects, changing their sizes, positions or other properties. This demo shows that we can also create animation effects by moving a 'camera' around.

The camera effect is created by animating the transform on a target <g> in the SVG content, which creates the illusion of a camera moving over the group of elements contained in the target group.

Camera utility

The demo uses a small utility camera.js which makes it easy to create this type of effect.

Following is a sample of how to instantiate, configure and start the camera with the action method.

var cameraTarget = Y.one('#cameraTarget'), // Uses YUI 3.0 for DOM access.
    Easing = Y.Easing;
var defaultInterpolators = {
    zoom: Easing.easeNone,
    direction: Easing.easeBothStrong ,
    position: Easing.easeBothStrong
};
var camera = new sw.tools.Camera({
    target: cameraTarget, // The element containing the content to navigate over
    viewport: {width: 800, height: 600}, // The camera's viewport
    frameLength: 10,  // Controls the camera's movement speed.
    position: {x: 243, y: 68}, // The camera's initial position
    direction: 90, // The camera angle
    zoom: 7 // The camera's zoom level.
    });

    camera.addTravelSegments([{
        name: "wherever",
        position: {x: 243, y: 384},
        direction: 90,
        zoom: 7,
        runLength: 1000,
        interpolators: defaultInterpolators
    }, {
        name: "you",
        position: {x: 440, y: 368},
        direction: 180,
        zoom: 1.6,
        runLength: 2000,
        interpolators: defaultInterpolators
    }, ... // More camera positions
});

camera.action();

The following figure illustrates how the zoom level, direction and position specify the successive positions of the camera over the composition.

Attributions

Many thanks to Roger Kidd for creating this demo's rythmic arrangment.

This example illustrates the use of the following features:

• Depending on the implementation, SVG or HTML 5 <audio> in a <foreignObject>
• Web fonts
• Text on a path
• Scripted animation

Note that the demo uses setTimer to synchronize the lyrics with the audio because the new audio timeupdate event is not supported in all the browsers yet. However, as explained on Silvia Pfeiffer's site it would be a better way to synchronize the lyrics in a pure HTML5 context.

See attributions about the song and fonts used in this demo (also showing at the end of the demo). The code leverages the YUI library with an extension to allow animation of SVG transform attributes.

Running the demo

Click on the "Start SVG Demo" at the top of this page. When the demo has loaded, click in the center of the image. Then, once the menu has settled, click on the "ancient sun" item.