tessl/npm-velocity-animate

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

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

Velocity Animate

Name: tessl/npm-velocity-animate
Author: tessl

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;

Workspace: tessl
Visibility: Public
Created: 7 months ago
Last updated: 3 months ago
Describes: pkg:npm/velocity-animate@2.0.x
Publish Source: CLI
Badge