Web Animation using JavaScript: Develop & Design (Develop and Design)

Chapter 8. Animation Demo

It’s time to get your hands dirty! This final chapter walks you through a full animation
demo powered by Velocity. In going through the demo’s source, you’ll learn how
Velocity’s core features complement one another to greatly improve UI animation
workflow. This demo will also introduce you to advanced techniques for working with
CSS’s transform properties, which are vital to web-based animation today.

In short, you’re going to put together the skills you’ve accumulated throughout this
book to make something really darn cool. Your goals in coding the demo are twofold: use
terse and expressive animation code, and ensure maximum performance.

Behavior

The demo consists of 250 circles floating in, out, and around the screen. Periodically,
you’ll zoom in, then back out to the position where the virtual camera started. The first
image presented momentarily shows a zoomed-in view.

    Note

Before  you continue    reading,    head    on  over    to  VelocityJS.org/demo.book.html

to  see a   live    preview of  the demo.   (You    can right-click anywhere    on  the page

then    choose  “View   Source” to  see the demo’s  code.)

The circle elements are simply normal divs with box-shadow and border-
radius set in CSS. There’s no WebGL or Canvas animation going on here—just pure
HTML element manipulation. (Given the volume of elements that are being animated at
once, it’s quite impressive that this demo is capable of running so smoothly in the DOM!)

Let’s break down the animation: It consists of div elements translating along the X, Y,
and Z axes. The Z-axis dictates the depth of each element’s animation, whereas X and Y
provide the general flowing, 2D movement seen across the screen. Concurrent to the
elements’ individual movements is a larger perspective shift that occurs on the element
containing all these divs. This perspective shift occurs every 3 seconds, and it creates a
periodic zooming effect that makes the viewer feel as if he’s briefly traveling through the
circles’ 3D space.

The second graphic depicts the 3D scene in its zoomed-out view. Contrast this with the
zoomed-in view shown in the first image.