TipTo preview the behavior of the popular easing types, visit http://easings.net.When the reverse animation completes, a final Velocity call fades the elements out of
view by transitioning their opacity values to 0 over a duration of 2000ms. This
completes the demo by leaving the browser’s canvas in the same visual state it began in:
clean and empty! Your work here is done.
Wrapping up
From force-feeding, to value functions, to reverse, this walkthrough has illustrated the
power of the Velocity animation engine. Hopefully, this chapter has convinced you that
this book’s focus on Velocity was worthwhile. In fewer than 75 lines of terse, legible, and
performant code, you’ve created a rich 3D scene unlike anything you’ve seen before in
pure HTML.
Let this demo serve as a concrete example of just how simple intricate-looking
animations can actually be—especially when you use the right tools and employ best
practices. My hope is that this book has distilled the beautiful animation work you’ve seen
across the web into a set of tenets that are easy to grasp and follow in pursuit of your own
motion design.
Now, go and design some beautiful websites and apps! Once you’ve put together
something cool, show me on Twitter: twitter.com/shapiro.