Velocity JS

A presentation by Praneet Rohida

What is Velocity.js?

  • Animation Engine
  • Same API as jQuery's $.animate( )
  • Best of jQuery and CSS animations combined

What can you animate?

  • Numeric values of CSS properties
  • Transform
  • Transitions
  • SVG
  • Scroll events

Who uses it?

How to use it?

With jQuery

$element.velocity({
    width: "500px",
    property2: value2
}, {
    /* Velocity's default options */
    duration: 400,
    easing: "swing",
    queue: "",
    begin: undefined,
    progress: undefined,
    complete: undefined,
    display: undefined,
    visibility: undefined,
    loop: false,
    delay: false,
    mobileHA: true
});

Without JQuery

Velocity(element,
{
    width: "500px",
    property2: value2
},
{
    duration: 400,
    easing: "swing",
    queue: "",
    begin: undefined,
    progress: undefined,
    complete: undefined,
    display: undefined,
    visibility: undefined,
    loop: false,
    delay: false,
    mobileHA: true
});

Forcefeeding

Specify initial values for animations yourself instead of letting the engine query the DOM

Velocity(element, {
  translateX: [endValue, startValue],
  backgroundColor: [endValue, easing, startValue]
}, {
  //options here
});

Take control of your animation

Velocity(elem, 'stop');


Velocity(elem, 'pause');


Velocity(elem, 'reverse');


Velocity(elem, 'resume');

Velocity UI Pack

  • A plugin to improve your animation workflow
  • Allows you to register your own animation effects
  • Provides around 24 Pre-registered effects
Made with Slides.com