Tech News

Animating with Velocity.js

Types of JavaScript animation libraries

There are many types of JavaScript animation libraries. Some replicate physics interactions in the browser. Some make Web and Canvas animations easier to maintain. Some focus on SVG animation. Some improve UI animation—this last type is the focus.

Velocity and jQuery

Velocity functions independently of jQuery, but the two can be used in combination. It’s often preferable to do so to benefit from jQuery’s chaining capabilities: When you’ve preselected an element using jQuery, you can extend it with a call to .velocity() to animate it

Arguments

Velocity accepts multiple arguments. Its first argument is an object that maps CSS properties to their desired final values. The properties and their accepted value types correspond directly to those used in CSS (if you’re unfamiliar with basic CSS properties, pick up an introductory HTML and CSS

Tip

In JavaScript, if you’re providing a property value that contains letters (instead of only integers), put the value in quotes.

There’s also a shorthand argument syntax: Instead of passing in an options object as a second argument, you can use comma-separated argument syntax. This entails listing values for the duration (which accepts an integer value), easing (a string value), and completing (a function value) in any comma-separated order. (You’ll learn what all of these options do momentarily.)

Properties

There are two differences between CSS-based and JavaScript-based property animation. First, unlike in CSS, Velocity accepts only a single numeric value per CSS property.

Breaking up compound properties into their sub-properties for the purposes of animation gives you increased control over easing values. In CSS, you can specify only one property-wide easing type when animating multiple sub-properties within the parent padding property, for example.

Values

Velocity supports the px, em, rem, %, deg, WV, and the units. If you don’t provide a unit type with a numeric value, an appropriate one is automatically assigned based on the CSS property type. For most properties, px is the default unit, but a property that expects a rotation angle, such as rotate, for example, would be automatically assigned the deg (degree) unit

Chaining

When multiple Velocity calls are chained back-to-back on an element (or a series of elements), they automatically queue onto one another. This means that each animation begins once the preceding animation has been completed

Duration

You can specify the duration option, which dictates how long an animation call takes to complete, in milliseconds (1/1000th of a second) or as one of three shorthand durations: “slow” (equivalent to 600ms), “normal” (400ms), or “fast” (200ms). When specifying a duration value in milliseconds, provide an integer value without any unit type

Easing

Easings are the mathematical functions that define how fast or slow animations occur in different parts of an animation’s total duration. For example, an easing type of “ease[1]in-out” indicates that the animation should gradually accelerate (ease in) during the first part and then gradually decelerate (ease out) during the final part. In contrast, an easing type of “ease-in” produces an animation that accelerates up to a target speed during the first part of the animation but thereafter remains at a constant speed until the animation completes. An easing type of “ease-out” is the converse of this: the animation starts and continues at a constant speed before it gradually decelerates during the final part of the animation.

Great motion designers pay homage to organic motion because it gives the impression that the interface is responding fluidly to the user’s interaction. In mobile apps, for example, you expect a menu to quickly accelerate away from your fingers when you swipe it off-screen. If the menu were to instead move away from your fingers at a constant speed —like a robotic arm—you’d feel as if the swipe merely set off a chain of motion events that were outside your control.

Last word

The begin and complete options allow you to specify functions to be triggered at certain points in an animation: Pass the begin option a function to be called prior to the start of an animation. Conversely, pass the complete option a function to be called at the completion of an animation. With both options, the function is called once per animation call, even if multiple elements are being animated at once:

Related Articles

Leave a Reply

Your email address will not be published.

Back to top button