.velocity(“reverse”, { easing: “easeOutQuad” })
.velocity({ opacity: 0 }, 2000);It’s time to examine the translate animations, which individually translate the circle
elements’ positions within the demo’s 3D space. All three axes are animating from a
randomized start value toward a randomized end value. The value operator, which consists
of the plus sign followed by the equals sign (+=), tells the animation engine to animate
properties incrementally from their starting values. In other words, the += value operator
instructs the animation engine to treat the ending value as a relative value. In contrast, the
default behavior of an animation engine is to interpret an end value in absolute terms.
As with opacity, this code section leverages force-feeding and value functions for
their expressivity and performance benefits. In particular, the circles’ movement is
constrained within ranges relative to the screen dimensions for the X and Y axes, and
relative to the predefined min and max depth values for the Z-axis. (As a reminder, these
values were set in the Animation setup section.) In the case of the X and Y axes, there’s an
arbitrary fudge factor (notice the division by 2.75) to reduce how spread out the elements
animate. This value is simply a creative decision; tweak it to suit your aesthetic
preference.
Finally, the options object specifies that this entire animation should occur over a
duration of 6000ms.
Reverse command
After the primary Velocity animation call, the chain continues with a call to Velocity’s
reverse command. Reverse does exactly what it sounds like it: it animates the target
elements back to their initial values prior to the previous Velocity call taking place. In this
unique case, since start values have been force-fed into the previous Velocity call, those
are the start values that reverse will animate back toward.
One of my reasons for including the reverse command in this demo is to extend the
demo’s overall animation duration with a single line of maintainable and expressive code.
(While you could double the duration of the animation from 6000ms to 12000ms, this
would result in slowing down the movement of the circles.) The convenience of the
reverse command is avoiding having to respecify—by hand—all of the animation start
values. It would have been a huge mess to accomplish this manually since you would have
had to first store all of the randomly generated start values into memory so you could
animate back to them. Hence, reverse is yet another great Velocity feature that allows the
demo to accomplish a lot with just a few lines of code.
Velocity’s reverse command defaults to the options object used in the previous Velocity
call—including its duration, easing, and so on. In this case, since the previous call
used a duration of 6000ms, so will the reverse call. The reverse command also lets you
specify a new options object to extend onto the previous one. This demo uses a new easing
type of easeOutQuad for added motion design flair in the animation’s reverse direction.