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
Velocity JS
By praneet123
