Velocity.js

Velocity is a cross-platform JavaScript library designed to simplify the client-side scripting of website animation. Velocity’s syntax is designed to make it easier to create complex animations for HTML and CSS elements. Velocity to be used for sophisticated animation programming that can be integrated into both web and mobile applications.

Library

<script src="velocity.min.js"></script>
<script src="//cdn.jsdelivr.net/velocity/1.2.3/velocity.min.js"></script>

Usage

// Animate an element's width to 100px and its left property to 200px
$element.velocity({ width: "100px", left: "200px" });
// Animate an element's width to 100px over a 1000ms duration after pausing for a 100s delay.
$element.velocity({ width: "100px" }, { duration: 1000, delay: 100 });

Chaining

//Creating a series of consecutive animation calls in Velocity consists of placing velocity() calls back-to-back on the target jQuery element object.
$element
    .velocity({ height: 300 }, { duration: 1000 })
    // Continue on to this animation once the previous one has completed
    .velocity({ top: 200 }, { duration: 600 })
   // And once more...
    .velocity({ opacity: 0 }, { duration: 200 });

Scrolling

// Scroll with a duration of 750ms
$element.velocity("scroll", { duration: 750 });

Reversal

// Reverse the previous animation; animate back to the element's original height using the previous duration
$element.velocity("reverse");

Features

  • Browser window and element scrolling.
  • Independence from the jQuery framework.
  • Animation reversal and animation looping.
  • RGB and hex color animation.
  • CSS’s transform property animation.
  • Pre-created animation effects via Velocity’s UI Pack.
  • Physics-based motion via the spring easing type.
  • Promises integration.
  • Supports low-powered devices.

04 Jul 2016 by @poojapauskar