velocity-animate

Velocity 1.5.2

Docs

http://VelocityJS.org

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.

Similar packages

Other packages similar to velocity-animate

animejs

Anime.js is a lightweight JavaScript animation library with a simple, yet powerful API. It supports a wide range of animations, including CSS properties, SVG, DOM attributes, and JavaScript objects. Compared to velocity-animate, Anime.js offers more flexibility and a more modern API, but may not be as performant for very complex animations.

gsap

GSAP (GreenSock Animation Platform) is a robust JavaScript library for creating high-performance animations. It is widely used in the industry and offers a comprehensive set of features, including timeline management, advanced easing, and plugin support. GSAP is known for its performance and ease of use, making it a strong competitor to velocity-animate.

popmotion

Popmotion is a functional, flexible JavaScript animation library. It provides a range of tools for creating animations, including physics-based animations, keyframes, and timelines. Popmotion's API is highly modular, allowing developers to pick and choose the parts they need. While it offers similar capabilities to velocity-animate, it is designed with a more functional programming approach.