tessl/npm-velocity-animate

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

—

Pending

Overview

Eval results

Files

Easing Functions

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

Velocity provides a comprehensive library of easing functions for natural motion, including CSS standard easings, mathematical curves, and physics-based easings.

Basic Easings

interface BasicEasings {
  linear: VelocityEasingFn;
  swing: VelocityEasingFn;
  spring: VelocityEasingFn;
}

Linear

Constant rate of change with no acceleration or deceleration.

Swing

Default easing with gentle acceleration and deceleration (similar to ease-in-out).

Spring

Physics-based spring motion with natural bounce characteristics.

CSS Standard Easings

interface CSSEasings {
  ease: VelocityEasingFn;
  "ease-in": VelocityEasingFn;
  "ease-out": VelocityEasingFn;
  "ease-in-out": VelocityEasingFn;
}

Ease

CSS standard easing (equivalent to cubic-bezier(0.25, 0.1, 0.25, 1)).

Ease-In

Slow start, fast finish (equivalent to cubic-bezier(0.42, 0, 1, 1)).

Ease-Out

Fast start, slow finish (equivalent to cubic-bezier(0, 0, 0.58, 1)).

Ease-In-Out

Slow start and finish, fast middle (equivalent to cubic-bezier(0.42, 0, 0.58, 1)).

Sine Easings

interface SineEasings {
  easeInSine: VelocityEasingFn;
  easeOutSine: VelocityEasingFn;
  easeInOutSine: VelocityEasingFn;
}

Sine wave-based easings providing smooth, gentle curves.

Quadratic Easings

interface QuadraticEasings {
  easeInQuad: VelocityEasingFn;
  easeOutQuad: VelocityEasingFn;
  easeInOutQuad: VelocityEasingFn;
}

Quadratic (power of 2) acceleration curves.

Cubic Easings

interface CubicEasings {
  easeInCubic: VelocityEasingFn;
  easeOutCubic: VelocityEasingFn;
  easeInOutCubic: VelocityEasingFn;
}

Cubic (power of 3) acceleration curves with more pronounced effects than quadratic.

Quartic Easings

interface QuarticEasings {
  easeInQuart: VelocityEasingFn;
  easeOutQuart: VelocityEasingFn; 
  easeInOutQuart: VelocityEasingFn;
}

Quartic (power of 4) acceleration curves with strong acceleration effects.

Quintic Easings

interface QuinticEasings {
  easeInQuint: VelocityEasingFn;
  easeOutQuint: VelocityEasingFn;
  easeInOutQuint: VelocityEasingFn;
}

Quintic (power of 5) acceleration curves with very strong acceleration effects.

Exponential Easings

interface ExponentialEasings {
  easeInExpo: VelocityEasingFn;
  easeOutExpo: VelocityEasingFn;
  easeInOutExpo: VelocityEasingFn;
}

Exponential curves providing sharp acceleration changes.

Circular Easings

interface CircularEasings {
  easeInCirc: VelocityEasingFn;
  easeOutCirc: VelocityEasingFn;
  easeInOutCirc: VelocityEasingFn;
}

Circular curves based on quarter-circle arcs.

Back Easings

interface BackEasings {
  easeInBack: VelocityEasingFn;
  easeOutBack: VelocityEasingFn;
  easeInOutBack: VelocityEasingFn;
}

Back easings that overshoot the target before settling, creating a "pull-back" effect.

Elastic Easings

interface ElasticEasings {
  easeInElastic: VelocityEasingFn;
  easeOutElastic: VelocityEasingFn;
  easeInOutElastic: VelocityEasingFn;
}

Elastic easings that oscillate around the target like a rubber band.

Bounce Easings

interface BounceEasings {
  easeInBounce: VelocityEasingFn;
  easeOutBounce: VelocityEasingFn;
  easeInOutBounce: VelocityEasingFn;
}

Bounce easings that simulate a bouncing ball effect.

Step Easings

interface StepEasings {
  "at-start": VelocityEasingFn;
  "at-end": VelocityEasingFn;
  during: VelocityEasingFn;
}

Step-based easings for discrete value changes.

Custom Easing Functions

Bezier Generator

function generateBezier(
  x1: number,
  y1: number, 
  x2: number,
  y2: number
): VelocityEasingFn;

Creates custom cubic-bezier easing functions.

Spring Physics

interface SpringEasing {
  (tension: number, friction: number): VelocityEasingFn;
}

Physics-based spring easings with configurable tension and friction parameters.

Easing Types

type VelocityEasingType = 
  | VelocityEasingFn
  | keyof VelocityEasings
  | [number, number, number, number]  // cubic-bezier values
  | string;

type VelocityEasingFn = (
  percentComplete: number,
  startValue: number,
  endValue: number,
  duration: number
) => number;

Usage Examples

Basic Easing

import Velocity from "velocity-animate";

// Use predefined easing
Velocity(element, { translateX: "200px" }, {
  duration: 1000,
  easing: "easeInOutQuad"
});

// Use CSS standard easing
Velocity(element, { opacity: 0 }, {
  duration: 500,
  easing: "ease-out"
});

Advanced Easings

// Elastic bounce effect
Velocity(element, { scale: 1.2 }, {
  duration: 800,
  easing: "easeOutElastic"
});

// Back overshoot effect
Velocity(element, { translateY: "-100px" }, {
  duration: 600,
  easing: "easeInOutBack"
});

// Bounce landing effect
Velocity(element, { translateY: "0px" }, {
  duration: 900,
  easing: "easeOutBounce"
});

Custom Bezier Easings

// Generate custom bezier easing
const customEasing = Velocity.Easings.generateBezier(0.25, 0.46, 0.45, 0.94);

Velocity(element, { rotateZ: "360deg" }, {
  duration: 1200,
  easing: customEasing
});

// Or use bezier array directly
Velocity(element, { translateX: "300px" }, {
  duration: 1000,
  easing: [0.68, -0.55, 0.265, 1.55]  // Back ease out
});

Per-Property Easing

// Different easing for each property using array notation
Velocity(element, {
  translateX: ["0px", "200px", "easeOutQuad"],
  translateY: ["0px", "-100px", "easeInBounce"],
  rotateZ: ["0deg", "180deg", "easeInOutElastic"],
  opacity: [1, 0.5, "linear"]
}, 1500);

Spring Physics Easing

// Custom spring with high tension, low friction (snappy)
const snappySpring = Velocity.Easings.spring(300, 10);

Velocity(element, { scale: 1.5 }, {
  duration: 800,
  easing: snappySpring
});

// Custom spring with low tension, high friction (smooth)
const smoothSpring = Velocity.Easings.spring(100, 25);

Velocity(element, { translateX: "250px" }, {
  duration: 1200,
  easing: smoothSpring
});

Registering Custom Easings

// Register a custom easing function
Velocity.Easings.myCustomEasing = function(t, b, c, d) {
  // t = current time
  // b = start value
  // c = change in value
  // d = duration
  return c * Math.sin(t / d * Math.PI / 2) + b;
};

// Use the custom easing
Velocity(element, { opacity: 0 }, {
  duration: 1000,
  easing: "myCustomEasing"
});

Easing Comparison

// Compare different easings on similar animations
const elements = document.querySelectorAll(".comparison");

// Linear movement
Velocity(elements[0], { translateX: "200px" }, { easing: "linear" });

// Ease out for natural deceleration
Velocity(elements[1], { translateX: "200px" }, { easing: "easeOutQuad" });

// Bounce for playful effect
Velocity(elements[2], { translateX: "200px" }, { easing: "easeOutBounce" });

// Elastic for attention-grabbing effect
Velocity(elements[3], { translateX: "200px" }, { easing: "easeOutElastic" });

Install with Tessl CLI

npx tessl i tessl/npm-velocity-animate

docs