# Velocity.js — Accelerated JavaScript Animation Engine

> A fast animation engine that provides jQuery-compatible syntax with dramatically better performance by combining CSS transitions, requestAnimationFrame, and value caching.

## Install

Save in your project root:

# Velocity.js — Accelerated JavaScript Animation Engine

## Quick Use
```bash
npm install velocity-animate
```
```js
import Velocity from 'velocity-animate';
Velocity(document.getElementById('box'), { opacity: 0.5, translateX: '200px' }, { duration: 1000 });
```

## 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

---
Source: https://tokrepo.com/en/workflows/asset-bbfc7622
Author: AI Open Source