Animation reversal is a useful shorthand for undoing an element’s previous animation. By invoking the reverse command, you’re instructing an element to animate back to its values prior to its last animation. A common use for reversal is animating a modal dialogue into view, then hiding it when the user presses to close it.
An unoptimized reversal workflow consists of keeping track of the specific properties that were last animated on each element that may later be subjected to reversal. Unfortunately, keeping track of prior animation states in UI code quickly becomes unwieldy. In contrast, with the reverse command, Velocity remembers everything for you.
The utility of physics in motion design reflects the core principle of what makes for a great user experience (UX) on your site: interfaces that flow naturally from the user’s input. Put another way, interfaces pay tribute to how objects move in the real world. As a simple yet powerful introduction to physics-based motion, Velocity offers an easing type based on spring physics. (We’ll fully explore the concept of easing in the next chapter.) With typical easing options, you pass in a string corresponding to a predefined easing curve (for example, “ease” or “easeInOutSine”). The spring physics easing type, in contrast, accepts a two-item array.
Designing animation is an experimental process that requires repeated tweaking of timing and easing values to achieve a uniform feel across the page. Inevitably, just when you’ve perfected your design, a client will request significant changes. In these situations, maintainable code becomes critical.