Web Animation using JavaScript: Develop and Design (2015)

---

Code structure

Let’s take a look at the code that powers this demo. It is structured as follows:

5. Animation setup: The specification of parameters used for constraining animation movement.

6. Circle creation: The generation of the div elements to be animated.

7. Container animation: The code responsible for animating the circles’ parent element.

8. Circle animation: The code responsible for animating the circle elements themselves.

Try to familiarize yourself with the broader strokes of the demo’s implementation so you can keep its full context in mind as you explore each individual code block in the upcoming sections:

/************************
Animation setup
************************/
/* Randomly generate an integer between two numbers. */
function r (min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
/* Query the window's dimensions. */
var screenWidth = window.screen.availWidth,
screenHeight = window.screen.availHeight;
/* Define the z-axis animation range. */
var translateZMin = -725,
translateZMax = 600;

/**********************
Circle creation
**********************/
var circleCount = 250,
circlesHtml = "",
$circles = "";
for (var i = 0; i < circleCount; i++) {
circlesHtml += "<div class='circle'></div>";
}
$circle = $(circlesHtml);

/******************************
Container animation
******************************/
$container
.css("perspective-origin", screenWidth/2 + "px " + screenHeight/2 + "px")
.velocity(
{
perspective: [ 215, 50 ],
opacity: [ 0.90, 0.55 ]
}, {
duration: 800,
loop: 1,
delay: 3000
});

/***************************
Circle animation
***************************/
$circles
.appendTo($container)
.velocity({
opacity: [
function() { return Math.random() },
function() { return Math.random() + 0.1 }
],
translateX: [
function() { return "+=" + r(-screenWidth/2.5, screenWidth/2.5) },
function() { return r(0, screenWidth) }
],
translateY: [
function() { return "+=" + r(-screenHeight/2.75, screenHeight/2.75) },
function() { return r(0, screenHeight) }
],
translateZ: [
function() { return "+=" + r(translateZMin, translateZMax) },
function() { return r(translateZMin, translateZMax) }
]
}, { duration: 6000 })
.velocity("reverse", { easing: "easeOutQuad" })
.velocity({ opacity: 0 }, 2000);

Code section: Animation setup

This section’s code is copied below for easy reference:

/************************
Animation setup
************************/
/* Randomly generate an integer between two numbers. */
function r (min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
/* Query the window's dimensions. */
var screenWidth = window.screen.availWidth,
screenHeight = window.screen.availHeight;
/* Define the z-axis animation range. */
var translateZMin = -725,
translateZMax = 600;

The first section, Animation setup, begins by defining a function r (abbreviated from "random") that lets you artificially constrain randomly generated integer values. This function takes min and max parameters, then outputs a random number between the min to max range (using some basic algebra). You’ll use this later when randomizing the animating elements’ CSS transform values within ranges that are predefined in the next two code blocks.

The next section queries the window object to retrieve the monitor’s dimensions. By later referencing these values, you can ensure that the circles don’t animate too far off-screen (and consequently out of view).

Animation setup concludes by defining the min and max values for the elements’ Z-axis movement. These values control how small (far away) or large (nearby) you want the circles to animate from their initial size. Specifically, it dictates that the circles can go as far as 725 pixels along the Z-axis away from the virtual camera (away from the screen), and as close as 600 pixels toward the camera. In this case, there’s no constraint of going off-screen, but the circle could become too distant to see or so close that it takes up the entire monitor. Basically, it’s a creative decision.

Code section: Circle creation

/**********************
Circle creation
**********************/
var circleCount = 250,
circlesHtml = "",
$circles = "";
for (var i = 0; i < circleCount; i++) {
circlesHtml += "<div class='circle'></div>";
}
$circle = $(circlesHtml);

The demo’s second section, Circle creation, generates the primary div elements to be animated. Here, it first defines the desired number of circles as circleCount. Then, it defines a circlesHtml string to contain the circles’ collated HTML.

Next, it iterates up to the circleCount number to generate the circles’ HTML. Notice that it uses the performance best practice of batching DOM additions, as detailed in Chapter 7, “Animation Performance.” It collates the markup for each div element onto a master circlesHtmlstring that’s later inserted into the DOM in a single action. (If you were to insert the div elements into the DOM one at a time, the negative performance impact would be significant: UI interaction in the browser would be frozen until the relatively slow element insertion process completed.)

Finally, it wraps the circle elements in a jQuery element object so they can be easily manipulated as a group in the upcoming Circle animation section.

Code section: Container animation

/******************************
Container animation
******************************/
$container
.css("perspective-origin", screenWidth/2 + "px " + screenHeight/2 + "px")
.velocity(
{
perspective: [ 215, 50 ],
opacity: [ 0.90, 0.55 ]
}, {
duration: 800,
loop: 1,
delay: 3000
});

3D CSS primer

Let’s begin the first of the two animation sections of the codebase by focusing on the element that contains the circle elements. Before diving into the code, however, here’s a primer on how 3D animation works in the browser:

In order for 3D transforms to work (for example, translateZ, rotateX, rotateY), the CSS specification requires that the perspective CSS property be set on the element’s parent. In this case, that’s what the $container element is for.

The greater the value that perspective is set to, the less distance Z-axis translations (via CSS’s translateZ) appear to move relative to their origin. In other words, if you want more exaggerated depth in your 3D animations, set the parent element’s perspective property to something low, such as 50px, which is in fact the value that the container element is set to in the demo’s CSS. In contrast, a higher perspective value, such as 250px, would result in less visible movement from the origin point for every pixel that the element’s translateZ property is incremented by.

A separate and complementary CSS property is prospective-origin, which defines the angle at which the virtual camera is positioned. The virtual camera is the peephole through which the viewer sees 3D animation unfold in the browser. This section’s code block uses jQuery’s$.css() function to set a perspective-origin value on the container element that results in the camera being positioned at the center of the page, creating a perpendicular view of the 3D animation. This perpendicular view results in the appearance of circles flying directly toward and away from the viewer.

Specifically, this code section sets perspective-origin to the point on the page that’s at half the browser’s height and half its width—the center point of the page. This leverages the window dimensions queried in the Animation setup section.

With that context out of the way, let’s explore this section’s code.

Properties

This section’s code, reproduced below for easy reference, creates the demo’s zooming in and out effect:

$container
.css("perspective-origin", screenWidth/2 + "px " + screenHeight/2 + "px")
.velocity(
{
perspective: [ 215, 50 ],
opacity: [ 0.90, 0.55 ]
}, {
duration: 800,
loop: 1,
delay: 3250
});

While the prospective-origin property is set once on the container element and thereafter left alone, the prospective property is being animated by Velocity. This is necessary because the intended effect of the demo is to keep the vantage point into the scene stationary (perpendicular), but to exaggerate then de-exaggerate the distance of the elements from the virtual camera, which is where the perspective property’s animation comes in.

Specifically, this section uses Velocity to animate the perspective CSS property to a final value of 215px from a starting value of 50px.

By passing in an array as an animation property’s value, you’re forcefully specifying the final value to animate the property toward (215px, in the case above) as well as the initial value to animate from (50px, in the case above). While you certainly could have passed the property a single integer value as is typically expected by Velocity, the force-feeding syntax provides increased control over the property’s complete animation path.

You might be wondering, isn’t force-feeding unnecessary since Velocity knows how to retrieve a CSS property’s starting value on its own? While that is Velocity’s standard behavior when an integer is passed in as a value instead of an array, this isn’t always a desirable behavior due to the performance drawbacks inherent to querying the DOM for a property’s starting value. What the force-feeding syntax allows you to do is explicitly pass in a starting value so that Velocity can avoid querying the DOM for a property whose starting value you already know. In other words, the 50px starting value used in the perspective code above is the same value you initially set the container element’s perspective property to in the CSS stylesheet. You’re simply repeating the value here. Notice that this same force-feeding technique is used on the element’sopacity property as well: it’s animated to a final value of 0.90 from a starting value of 0.55 since that’s what the property was set to in the CSS.

As discussed thoroughly in Chapter 7, “Animation Performance,” DOM queries are indeed the Achilles’ heel of performant animation: the browser performs resource-intensive calculations to determine the visual state of an element. While it’s not important to the demo’s performance that you include this performance optimization, since the associated Velocity animation isn’t being triggered repeatedly inside a loop, it’s included nonetheless to contrast force-feeding’s secondary use, which you’ll learn about later in this chapter.

The net effect of animating the perspective and opacity is that all of the container’s circle elements appear to zoom in closer to the virtual camera while animating to an increased brightness (opacity goes from 0.55 to 0.90). The opacity boost mimics the way that light behaves in the real world: the closer the viewer is to the objects, the brighter they appear!

Options

The final section of Container animation code includes the options being passed into Velocity: duration, which is self explanatory; delay, which inserts a time-out at the start of the animation, and loop, which loops an animation back and forth between the values defined in the properties map and the element’s values prior to the animation occurring. Specifically, by setting loop to 2, you’re telling Velocity to animate to the values in properties map, back to where they were before, then to repeat this full loop iteration once more after a 3000ms delay.