Velocity.js — Accelerated JavaScript Animation Engine

Introduction

Velocity.js is a high-performance animation engine that works as a drop-in replacement for jQuery's animate method while delivering significantly faster performance. It combines the best of CSS transitions and JavaScript animation with an expressive API for transforms, colors, SVG, and scroll operations.

What Velocity.js Does

• Animates CSS properties with hardware-accelerated transforms
• Provides a jQuery-compatible API that works with or without jQuery
• Supports color animation, SVG attribute animation, and scroll offsets
• Enables sequenced animation queues and parallel group execution
• Includes pre-built UI effect packs for common motion patterns

Architecture Overview

Velocity.js bypasses jQuery's animation stack and directly manipulates the DOM using requestAnimationFrame for smooth 60fps rendering. It caches element property values between calls to avoid expensive DOM queries, batches read/write operations to prevent layout thrashing, and uses CSS transform properties (translate3d, scale) for GPU-accelerated compositing instead of top/left positioning.

Self-Hosting & Configuration

• Install via npm or include a single script tag in your page
• Use as a standalone library or as a jQuery plugin drop-in
• Import the UI Pack addon for pre-built effects like slideUp and fadeIn
• Configure default duration, easing, and queue behavior globally
• Set mobileHA: true to force hardware acceleration on mobile devices

Key Features

• Drop-in replacement for jQuery.animate() with better performance
• Built-in color, transform, and SVG animation support
• Pre-registered easing functions including spring physics
• UI effect pack with common transitions (slide, fade, bounce)
• Promise-based completion callbacks for async workflow integration

Comparison with Similar Tools

• jQuery.animate() — same API but much slower due to layout thrashing; Velocity.js is a direct upgrade
• GSAP — more feature-rich timeline system; Velocity.js is lighter and jQuery-compatible
• CSS Transitions — no JavaScript control; Velocity.js offers programmatic sequencing and callbacks
• Web Animations API — native but limited browser support; Velocity.js works everywhere

FAQ

Q: Do I need jQuery to use Velocity.js? A: No. Velocity.js works standalone. When jQuery is present, it integrates as a plugin automatically.

Q: How much faster is it than jQuery.animate? A: Benchmarks show Velocity.js running animations at consistent 60fps where jQuery drops to 30fps or below under load.

Q: Does it support SVG animation? A: Yes. Velocity.js can animate SVG attributes like strokeDashoffset, fill, and viewBox coordinates.

Q: Can I chain animations? A: Yes. Consecutive Velocity calls on the same element automatically queue and run in sequence.

Sources

• https://github.com/julianshapiro/velocity
• http://velocityjs.org