Make Your Website Interactive and Fun with Velocity.js (No jQuery)

This article introduces Velocity.js, a high-performance JavaScript animation library by Julian Shapiro, demonstrating its capabilities without relying on jQuery. This is the third in a series exploring dynamic DOM animation libraries beyond CSS. Previous articles covered Anime.js and KUTE.js.

Special thanks to James Hibbard and the Velocity developers, along with community contributors, for their support.

Key Features of Velocity.js:

Velocity.js is a robust tool for animating CSS properties, transforms, SVGs, and scroll events, all within vanilla JavaScript. Its flexible API, similar to jQuery's $.animate(), offers features like looping, delays, easing options (including spring physics), and duration control. Forcefeeding allows precise definition of animation start and end values. Furthermore, it provides control over animation sequences (stopping, pausing, reversing, resuming). The Velocity UI Pack extends functionality with pre-built effects and custom animation creation.

Animatable Elements:

Velocity.js animates:

• Numeric CSS properties (including colors)
• Transforms
• SVG properties
• Scroll events (page or container)
• Fade and slide animations

Note: It typically animates one numeric property at a time. For multi-axis translations (e.g., translateX and translateY), use separate properties. Forcefeeding provides an exception, allowing simultaneous value specification.

Options:

Velocity's options object offers flexibility:

• duration (milliseconds)
• easing (jQuery UI, CSS3 easings, bezier curves, spring physics)
• loop (number of repetitions or true for infinite)
• delay (milliseconds)

Refer to the Velocity documentation for a complete options list.

Syntax:

While Velocity.js shares jQuery's API, making it easy for jQuery users to transition (replace $.animate() with $.velocity()), it functions perfectly without jQuery. The basic syntax is:

<code class="language-javascript">Velocity(element, {property: value}, {option: optionValue});</code>

Chaining animations:

<code class="language-javascript">Velocity(element1, {property: value}, {option: optionValue});
Velocity(element1, {property: value}, {option: optionValue});</code>

Animating multiple elements:

const elements = document.querySelectorAll('<div>');
Velocity(elements, {property: value}, {option: optionValue});
<p>Units (<code>px, %, rem, em, vw/vh, deg) are supported.  Velocity infers units if omitted (usually px).  Relative math ( =, -=, *=, /=) is also supported.

Forcefeeding:
Instead of relying on Velocity.js to retrieve initial values, use forcefeeding:
<code class="language-javascript">Velocity(element, {property: value}, {option: optionValue});</code>
The array contains: end value, optional easing, and start value.
Animation Control:
Control animations using:

Velocity(elem, 'stop');
Velocity(elem, 'pause');
Velocity(elem, 'reverse');
Velocity(elem, 'resume');

The article then provides several demos (falling ball, button-controlled bouncing ball, scrolling animation, SVG animation, and using the Velocity UI Pack) illustrating these concepts.  Each demo's code is available via CodePen links within the article.  Finally, the article concludes with a FAQ section addressing common Velocity.js usage questions, including its use without jQuery.  The article also includes a section on  additional resources for further learning.