Package - velocity-animate

# Velocity 1.5.2

Docs

News

WhatsApp, Tumblr, Windows, Samsung, Uber, and thousands of other companies rely on Velocity. Visit Libscore.com to see which sites use Velocity on their homepage.

React Plugin

Announcement: https://fabric.io/blog/introducing-the-velocityreact-library
Repo: https://github.com/twitter-fabric/velocity-react
NPM: https://www.npmjs.com/package/velocity-react

Quickstart

Velocity (CDN, choose one of them):

<script src="//cdn.jsdelivr.net/npm/velocity-animate@1.5/velocity.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/velocity/1.5.2/velocity.min.js"></script>

Velocity UI pack (CDN, choose one of them):

<script src="//cdn.jsdelivr.net/npm/velocity-animate@1.5/velocity.ui.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/velocity/1.5.2/velocity.ui.min.js"></script>

Please note that JSDelivr will automatically supply the latest release, while CloudFlare needs to ask for a specific version.

Package managers:

npm: npm install velocity-animate
bower: bower install velocity

Questions or Problems?

Ask on StackOverflow (make sure you add the [velocity.js] and [javascript] tags).

Updates

1.5: Bugfixes, IE9 compatibility fixes.
1.4: Pause / Resume (per element or global).
Forcefed string animation (just have matching number spaces) including unit conversions and colour names (ie background:["rgba(red,0.1)", "blue"]). High resolution timers (animations should be slightly smoother).
Various fixes including ticker (loading Velocity in a background window) and color handling.
1.3: Code cleanup - no breaking changes known.
1.2: Custom tweens. Custom easings. "Finish" command.
1.0: File name changed to velocity.js. Read VelocityJS.org/#dependencies.
0.1: stop now stops animations immediately (instead of only clearing the remainder of the animation queue). No other backwards-incompatible changes were made.

Learn

Motion design: smashingmagazine.com/2014/06/18/faster-ui-animations-with-velocity-js
Animating without jQuery: smashingmagazine.com/2014/09/04/animating-without-jquery
Performance comparisons: davidwalsh.name/css-js-animation
Workflow: css-tricks.com/improving-ui-animation-workflow-velocity-js

Comparisons

CSS transitions are meant for simple interface flourishes.
jQuery's $.animate() is slow and poorly-equipped for motion design.
Velocity is a fast, feature-rich standalone alternative to jQuery's $.animate().

====

MIT License. © Julian Shapiro (http://twitter.com/shapiro).
Stripe sponsors Velocity's development.
BrowserStack provides testing services.

Current Tags

2.0.6 ... beta (5 years ago)
1.5.2 ... latest (7 years ago)

4 Versions

2.0.6 ... 5 years ago
1.5.2 ... 7 years ago
1.3.2 ... 9 years ago
1.2.3 ... 10 years ago