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’s opacity 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.
NoteWhen delay is set alongside loop, the delay occurs between each of the
loop’s alternations. Using delay creates a pleasant pause so that the zoom-in
and zoom-out effect doesn’t zigzag back and forth abruptly.