or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

actions.mdconfiguration.mdcore-animation.mdeasings.mdindex.mdui-sequences.md
tile.json

tessl/npm-velocity-animate

High-performance JavaScript animation library with TypeScript support providing DOM animations, transforms, UI effects, and comprehensive easing functions.

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/velocity-animate@2.0.x

To install, run

npx @tessl/cli install tessl/npm-velocity-animate@2.0.0

index.mddocs/

Velocity Animate

Velocity is a high-performance JavaScript animation library that provides accelerated DOM animation, CSS transforms, color animations, scroll animations, and physics-based easing. Built with TypeScript, it offers comprehensive animation capabilities with zero dependencies and cross-browser compatibility, serving as a modern alternative to jQuery animations.

Package Information

  • Package Name: velocity-animate
  • Package Type: npm
  • Language: TypeScript/JavaScript
  • Installation: npm install velocity-animate

Core Imports

import Velocity from "velocity-animate";

For CommonJS:

const Velocity = require("velocity-animate");

For ES6 named imports:

import { Velocity } from "velocity-animate";

For TypeScript with types:

import Velocity, { VelocityOptions, VelocityResult } from "velocity-animate";

Basic Usage

import Velocity from "velocity-animate";

// Basic animation - fade in an element
Velocity(element, { opacity: 1 }, { duration: 1000 });

// Chain multiple animations
Velocity(element, { translateX: "200px" }, { duration: 500 })
  .then(() => Velocity(element, { rotateZ: "45deg" }, { duration: 300 }));

// Use predefined UI sequences
Velocity(element, "fadeIn", { duration: 600 });

// Method chaining (when patched)
element.velocity({ left: "200px" }, 1000)
       .velocity({ rotateY: "45deg" }, 500);

Architecture

Velocity is organized around several core systems:

  • Animation Engine: Core tweening system with optimized performance and hardware acceleration
  • Property System: CSS and transform property normalization with cross-browser compatibility
  • Easing Functions: Comprehensive easing library with 30+ functions including physics-based options
  • Action System: Animation control actions (pause, resume, stop, reverse, etc.)
  • Sequence System: Pre-built animation sequences and custom sequence registration
  • UI Effects Pack: 78 pre-built animation effects for common interface patterns
  • Promise Support: Native promise integration for modern async/await workflows

Capabilities

Core Animation

Primary animation functionality for CSS properties, transforms, and custom properties. Supports chaining, promises, and advanced timing control.

function Velocity(
  elements: VelocityElements,
  properties: Properties<any>,
  options?: VelocityOptions
): VelocityResult;

function Velocity(
  elements: VelocityElements, 
  properties: Properties<any>,
  duration?: number,
  complete?: VelocityCallbackFn
): VelocityResult;

Core Animation

Animation Actions

Control and introspection actions for managing running animations, getting/setting properties, and animation state management.

function Velocity(elements: VelocityElements, action: "stop", queue?: string): VelocityResult;
function Velocity(elements: VelocityElements, action: "pause"): VelocityResult;
function Velocity(elements: VelocityElements, action: "resume"): VelocityResult;
function Velocity(elements: VelocityElements, action: "finish", queue?: string): VelocityResult;
function Velocity(elements: VelocityElements, action: "reverse"): VelocityResult;

Animation Actions

Easing Functions

Comprehensive easing function library including linear, swing, CSS standard easings, and physics-based easings for natural motion.

interface VelocityEasings {
  linear: VelocityEasingFn;
  swing: VelocityEasingFn;
  ease: VelocityEasingFn;
  "ease-in": VelocityEasingFn;
  "ease-out": VelocityEasingFn;
  "ease-in-out": VelocityEasingFn;
  // ... 30+ total easing functions
}

Easing Functions

UI Animation Sequences

Pre-built animation sequences organized into categories like attention seekers, entrances, exits, and special effects. Perfect for common interface animations.

function Velocity(
  elements: VelocityElements,
  sequence: string,
  options?: VelocityOptions
): VelocityResult;

interface VelocitySequences {
  // Attention Seekers (10)
  bounce: SequenceList;
  flash: SequenceList;
  pulse: SequenceList;
  shake: SequenceList;
  // ... 78 total sequences
}

UI Animation Sequences

Static Properties & Configuration

Global configuration options, state management, debugging tools, and utility functions for extending Velocity's capabilities.

interface VelocityStatic {
  version: string;
  defaults: StrictVelocityOptions & { reset?: () => void };
  State: VelocityState;
  debug: boolean | 1 | 2;
  mock: boolean;
  patch: (target: any, addGlobal?: boolean) => void;
}

Configuration & Utilities

Types

Core interfaces and type definitions used throughout the Velocity API:

interface VelocityOptions {
  duration?: number | "fast" | "normal" | "slow";
  easing?: VelocityEasingType;
  queue?: string | false;
  begin?: VelocityCallbackFn;
  progress?: VelocityProgressFn;
  complete?: VelocityCallbackFn;
  display?: string | "auto" | "inline" | "block" | "inline-block" | "flex" | "none";
  visibility?: "hidden" | "visible" | "collapse";
  loop?: boolean | number;
  delay?: number;
  mobileHA?: boolean;
}

interface VelocityResult extends Array<HTMLorSVGElement> {
  velocity: typeof Velocity;
  then?: (resolve: (value?: any) => void, reject?: (reason?: any) => void) => VelocityResult;
}

type VelocityElements = 
  | HTMLorSVGElement 
  | HTMLorSVGElement[] 
  | NodeList 
  | HTMLCollection 
  | VelocityResult 
  | string;

type HTMLorSVGElement = HTMLElement | SVGElement;