Make Your Website Interactive and Fun with Velocity.js (No jQuery)
Special thanks from me go to James Hibbard and the developers behind Velocity for reviewing this article. Also to users and developers who contribute and have contributed to Velocity over the years.
In this article I introduce Velocity.js, a fast and high-powered JavaScript animation engine by Julian Shapiro. By the time you go through all the demos, you’ll be able to use Velocity.js to create your own animations and make your website more interactive and user-friendly. All of this without using jQuery, just vanilla JavaScript.
This is the third article in the series Beyond CSS: Dynamic DOM Animation Libraries.
Here’s what I have already covered:
- Animating the DOM with Anime.js touches on how best to use animation on the web and when you could consider using a JavaScript animation library instead of CSS-only animation. It then focuses on Anime.js, a free and lightweight JavaScript animation library
- Fun Animation Effects with KUTE.js introduces you to KUTE.js, a free and feature-rich JavaScript animation library.
What You Can Animate with Velocity.js
Velocity.js is a powerful library, which puts the DOM at your fingertips! It lets you animate:
- Numeric values of CSS animatable properties, including colors
- Transforms
- SVG properties
- Scroll events, both relative to the page or to a container element inside the page
- Fade and slide animations.
In general, Velocity animates one numeric property value at a time. For instance, if you want to translate an element along both X and Y coordinates, you can’t use something like translate['10px', '15px']. Rather, you should accompany the translate property with its corresponding axis, like this: translateX: '10px', translateY: '15px'. There is one feature called forcefeeding, which Velocity makes available to let you specify two values at the same time. I’m going to introduce forcefeeding later in this article.
Options
Velocity’s options object gives you quite a bit of flexibility in crafting your animations.
Here’s a list of the options you’ll see in the demos for this article:
- Duration: how long each animation lasts. The unit of measurement for duration is milliseconds
- Easing: Velocity supports most jQuery UI easing types, CSS3 easings, i.e., “ease”, “ease-in”, “ease-out”, and “ease-in-out”, bezier curves, step easing, and even cool spring physics. You can play with this demo to see the spring physics option in action
-
Loop: how many times the animation should be repeated. If you set this option to
true, it will run indefinitely - Delay: how long to wait before the start of an animation.
A full list of options, is available on Velocity’s docs page.
Syntax
If you’re a jQuery user, Velocity.js makes things easy for you. In fact, Velocity has the same API as jQuery. To get started:
Download Velocity, include it on your page, and replace all instances of jQuery’s
$.animate()with$.velocity().
However, you don’t need jQuery to work with Velocity, and you are not going to use jQuery for the demos in this article. The syntax will be a bit different from what you would use if jQuery were included. Here’s what it looks like:
[code language=”js”]
Velocity(element, {property: value}, {option: optionValue});
[/code]
To chain another animation on the same element, just add another Velocity call after the previous one:
[code language=”js”]
Velocity(element1, {property: value}, {option: optionValue});
Velocity(element1, {property: value}, {option: optionValue});
[/code]
To apply an animation to multiple elements at the same time, just cache all of the elements into a variable and call Velocity on that variable, no need to write your own loop. For instance:
[code language=”js”]
const elements = document.querySelectorAll(‘<div>’);
Velocity(elements, {property: value}, {option: optionValue});
[/code]
You can use px, %, rem, em, vw/vh and deg. If you don’t add a unit, Velocity assumes an appropriate unit for you, usually px.
Velocity also supports operations with +, –, * and /, as well as relative math operations by adding an equal (=) sign after each operator, e.g., '+=3em'
Velocity.js Forcefeeding: Passing Initial Values
Instead of letting Velocity.js query the DOM to get an element’s initial value, you can set it yourself using this syntax:
[code language=”js”]
Velocity(element, {
translateX: [endValue, startValue],
backgroundColor: [endValue, easing, startValue]
}, {
//options here
});
[/code]
In this case, you pass an array of two, optionally three, items:
- The first item is a value for the final state of your animation
- The second, optional, item is an easing option applied to that specific property
- The starting state of your tween, that is, the values you explicitly set for that specific property at the beginning of the animation, is the the last item in the array.
You can read more on forcefeeding on Velocity’s docs.
Taking Control of Velocity.js Animations
You can stop, pause, reverse and resume all Velocity calls on an element using this syntax:
- To stop:
Velocity(elem, 'stop'); - To pause:
Velocity(elem, 'pause'); - To reverse:
Velocity(elem, 'reverse'); - To resume:
Velocity(elem, 'resume');
Armed with these basic instructions, you can start diving into some practical examples.
Demo: Falling Ball
Start with a simple ball falling from the top of the page.
Continue reading %Make Your Website Interactive and Fun with Velocity.js (No jQuery)%
LEAVE A REPLY
You must be logged in to post a comment.