Web Animation using JavaScript: Develop & Design (Develop and Design)

(Joyce) #1

value you want to use:


Click here to view code image
// Multiply all animation timing by 5
$.Velocity.mock = 5;
// All animations are now time-adjusted
// The duration below effectively becomes 5000ms
$element.velocity({ opacity: 1 }, { duration: 1000 });
Velocity’s mock feature also accepts a Boolean value: setting mock to true sets all
durations and delays to 0ms, which forces all animations to complete within a single
browser timing tick, which occurs every few milliseconds. This is a powerful shortcut for
quickly turning off all animations when they’re getting in the way of your UI development
and testing.


Use Velocity Motion Designer


Velocity Motion Designer (VMD) was crafted with the sole purpose of helping developers
streamline the creation phase of motion design. VMD is a bookmarklet that you load onto
a page in order to design animations in real time. It allows you to double-click elements to
open a modal that lets you specify animation properties and options for that element. You
then hit Enter on your keyboard to watch the animation play out immediately—without a
page refresh.


    Note

Get Velocity    Motion  Designer    at  http://velocityjs.org/#vmd.
Free download pdf