Skip to content

Velocity

A JavaScript library for smooth, fast animations of web page elements, as a jQuery-style alternative.

Stars
17.2k
Forks
1.5k
Licence
MIT
Language
JavaScript
Last update
6.0 years ago
Type
Library

No commits in over a year — check for forks or alternatives before adopting.

What it is

Velocity is a JavaScript library that animates elements on a web page, such as moving, fading, or resizing them. It is designed as a standalone alternative to jQuery's $.animate(), offering more features for motion design. The README describes it as fast and feature-rich, and says it can be used with or without jQuery.

  • Animate page elements with custom easing curves and durations
  • Pause, resume, or stop element animations per element or globally (added in version 1.4)
  • Create custom tweens for animating values beyond standard CSS properties (added in version 1.2)
  • Use the .velocity() chained method alongside jQuery or Zepto after loading Velocity

Great for

  • Front-end developers who want more control over JavaScript animations than jQuery's $.animate() provides
  • Developers maintaining existing sites that already use Velocity
  • Designers and developers working on interface motion who want features like pause/resume and custom easings

Not ideal for

  • Projects that only need simple hover or fade effects; the README says CSS transitions are meant for simple interface flourishes
  • Anyone looking for current documentation, since the README warns the velocityjs.org docs refer to V1, not the V2 beta
  • Teams that need actively maintained software, since the last push was in October 2020 and the README labels the project beta
Step-by-step guide: how to use VelocityInstall, first run, examples, tips and FAQs

How to get it

  1. 1

    Install with a package manager

    Install the beta from npm

    npm install velocity-animate@beta
  2. 2

    Run it

    • Install the package with npm install velocity-animate@beta, or add one of the CDN script tags from the README to your HTML.
    • Load Velocity after jQuery or Zepto if you plan to use the .velocity() chained function.
    • Call Velocity on an element to start an animation, following the wiki documentation for the current V2 API.
    • Consult the GitHub wiki rather than velocityjs.org for up-to-date usage.
  3. 3

    Get the most out of it

    • Use the Velocity.patch() method, described in the README's advanced wiki page, to add chaining to libraries loaded later
    • Use the wiki's documentation for the latest V2 features rather than the older velocityjs.org site
    • Add custom tweens and custom easings for effects beyond the built-in options (features from versions 1.2 and later)
    • Use pause and resume to control animations per element or globally (added in version 1.4)

Downloads

Strengths

  • Positioned in the README as a faster standalone alternative to jQuery's $.animate()
  • Includes pause/resume, custom tweens, custom easings, and a finish command
  • Available via npm and CDN, and released under the permissive MIT license

Trade-offs

  • The README labels the project beta, and the docs site refers to an older version, so documentation is split between the wiki and the website
  • The last push was 2020-10-24, so ongoing maintenance is unclear from the README
  • The README is truncated and does not list browser support in detail beyond a mention of IE9 fixes in version 1.5

Stats synced from GitHub. The assessment above was drafted with AI from the project's README on 2026-10-29 and may miss recent changes — check the README before relying on a command. MIT licence: free to use, modify and distribute, including commercially, as long as you keep the copyright notice.