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

UI Animation Sequences

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

Velocity provides 78 pre-built animation sequences organized into categories for common interface animations. These sequences combine multiple property animations with optimized timing and easing.

Using Sequences

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

function Velocity(
  elements: VelocityElements,
  sequence: string, 
  duration?: number,
  complete?: VelocityCallbackFn
): VelocityResult;

Attention Seekers (10 sequences)

Animations designed to draw attention to elements without changing their position in the layout.

interface AttentionSeekers {
  bounce: SequenceList;
  flash: SequenceList;
  headShake: SequenceList;
  jello: SequenceList;
  pulse: SequenceList;
  rubberBand: SequenceList;
  shake: SequenceList;
  swing: SequenceList;
  tada: SequenceList;
  wobble: SequenceList;
}

Bounce

Bounces the element up and down with decreasing intensity.

Flash

Rapidly toggles opacity to create a flashing effect.

Head Shake

Shakes the element horizontally like a "no" gesture.

Jello

Creates a jello-like wobble with elastic distortion.

Pulse

Smoothly scales the element up and down.

Rubber Band

Stretches and contracts the element like a rubber band.

Shake

Rapidly moves the element left and right.

Swing

Rotates the element back and forth like a pendulum.

Tada

Combines scaling and rotation for a celebratory effect.

Wobble

Creates an irregular wobbling motion.

Bouncing Entrances (6 sequences)

Elements bounce in from off-screen positions with elastic landing effects.

interface BouncingEntrances {
  bounceIn: SequenceList;
  bounceInDown: SequenceList;
  bounceInLeft: SequenceList;
  bounceInRight: SequenceList;
  bounceInUp: SequenceList;
}

Bounce In

Scales element from 0 to full size with bouncing motion.

Bounce In Down

Element bounces in from above the viewport.

Bounce In Left

Element bounces in from the left side.

Bounce In Right

Element bounces in from the right side.

Bounce In Up

Element bounces in from below the viewport.

Bouncing Exits (5 sequences)

Elements bounce out to off-screen positions with elastic departure effects.

interface BouncingExits {
  bounceOut: SequenceList;
  bounceOutDown: SequenceList;
  bounceOutLeft: SequenceList;
  bounceOutRight: SequenceList;
  bounceOutUp: SequenceList;
}

Bounce Out

Scales element down to 0 with bouncing motion.

Bounce Out Down

Element bounces out downward off-screen.

Bounce Out Left

Element bounces out to the left side.

Bounce Out Right

Element bounces out to the right side.

Bounce Out Up

Element bounces out upward off-screen.

Fading Entrances (10 sequences)

Elements fade in while moving from off-screen positions.

interface FadingEntrances {
  fadeIn: SequenceList;
  fadeInDown: SequenceList;
  fadeInDownBig: SequenceList;
  fadeInLeft: SequenceList;
  fadeInLeftBig: SequenceList;
  fadeInRight: SequenceList;
  fadeInRightBig: SequenceList;
  fadeInUp: SequenceList;
  fadeInUpBig: SequenceList;
}

Fade In

Simple opacity fade from 0 to 1.

Fade In Down

Fades in while moving from above.

Fade In Down Big

Fades in from far above with larger movement distance.

Fade In Left

Fades in while moving from the left.

Fade In Left Big

Fades in from far left with larger movement distance.

Fade In Right

Fades in while moving from the right.

Fade In Right Big

Fades in from far right with larger movement distance.

Fade In Up

Fades in while moving from below.

Fade In Up Big

Fades in from far below with larger movement distance.

Fading Exits (9 sequences)

Elements fade out while moving to off-screen positions.

interface FadingExits {
  fadeOut: SequenceList;
  fadeOutDown: SequenceList;
  fadeOutDownBig: SequenceList;
  fadeOutLeft: SequenceList;
  fadeOutLeftBig: SequenceList;
  fadeOutRight: SequenceList;
  fadeOutRightBig: SequenceList;
  fadeOutUp: SequenceList;
  fadeOutUpBig: SequenceList;
}

Similar to fading entrances but in reverse - elements fade out while moving off-screen.

Flippers (5 sequences)

3D flip animations around different axes.

interface Flippers {
  flip: SequenceList;
  flipInX: SequenceList;
  flipInY: SequenceList;
  flipOutX: SequenceList;
  flipOutY: SequenceList;
}

Flip

Generic flip animation with 3D rotation.

Flip In X

Flips in around the X-axis (horizontal flip).

Flip In Y

Flips in around the Y-axis (vertical flip).

Flip Out X

Flips out around the X-axis.

Flip Out Y

Flips out around the Y-axis.

Lightspeed (2 sequences)

High-speed animations with skewing effects.

interface Lightspeed {
  lightSpeedIn: SequenceList;
  lightSpeedOut: SequenceList;
}

Light Speed In

Fast entry with skewing effect simulating light speed.

Light Speed Out

Fast exit with skewing effect.

Rotating Entrances (5 sequences)

Elements rotate in from off-screen positions.

interface RotatingEntrances {
  rotateIn: SequenceList;
  rotateInDownLeft: SequenceList;
  rotateInDownRight: SequenceList;
  rotateInUpLeft: SequenceList;
  rotateInUpRight: SequenceList;
}

Rotate In

Rotates in with scaling from center.

Rotate In Down Left

Rotates in from the down-left corner.

Rotate In Down Right

Rotates in from the down-right corner.

Rotate In Up Left

Rotates in from the up-left corner.

Rotate In Up Right

Rotates in from the up-right corner.

Rotating Exits (5 sequences)

Elements rotate out to off-screen positions.

interface RotatingExits {
  rotateOut: SequenceList;
  rotateOutDownLeft: SequenceList;
  rotateOutDownRight: SequenceList;
  rotateOutUpLeft: SequenceList;
  rotateOutUpRight: SequenceList;
}

Similar to rotating entrances but in reverse.

Sliding Entrances (4 sequences)

Elements slide in from off-screen positions.

interface SlidingEntrances {
  slideInDown: SequenceList;
  slideInLeft: SequenceList;
  slideInRight: SequenceList;
  slideInUp: SequenceList;
}

Slide In Down

Slides in from above the viewport.

Slide In Left

Slides in from the left side.

Slide In Right

Slides in from the right side.

Slide In Up

Slides in from below the viewport.

Sliding Exits (4 sequences)

Elements slide out to off-screen positions.

interface SlidingExits {
  slideOutDown: SequenceList;
  slideOutLeft: SequenceList;
  slideOutRight: SequenceList;
  slideOutUp: SequenceList;
}

Similar to sliding entrances but in reverse.

Specials (4 sequences)

Unique animations with special effects.

interface Specials {
  hinge: SequenceList;
  jackInTheBox: SequenceList;
  rollIn: SequenceList;
  rollOut: SequenceList;
}

Hinge

Simulates a door swinging on a hinge.

Jack In The Box

Pops up like a jack-in-the-box toy.

Roll In

Rolls in with rotation and translation.

Roll Out

Rolls out with rotation and translation.

Zooming Entrances (6 sequences)

Elements zoom in from off-screen positions.

interface ZoomingEntrances {
  zoomIn: SequenceList;
  zoomInDown: SequenceList;
  zoomInLeft: SequenceList;
  zoomInRight: SequenceList;
  zoomInUp: SequenceList;
}

Zoom In

Scales up from 0 to full size.

Zoom In Down

Zooms in while moving from above.

Zoom In Left

Zooms in while moving from the left.

Zoom In Right

Zooms in while moving from the right.

Zoom In Up

Zooms in while moving from below.

Zooming Exits (5 sequences)

Elements zoom out to off-screen positions.

interface ZoomingExits {
  zoomOut: SequenceList;
  zoomOutDown: SequenceList;
  zoomOutLeft: SequenceList;
  zoomOutRight: SequenceList;
  zoomOutUp: SequenceList;
}

Similar to zooming entrances but in reverse.

Sequence Types

interface SequenceList {
  duration: number;
  [sequenceStep: number]: Properties<any>;
}

type VelocitySequence = 
  | string 
  | SequenceList
  | Array<Properties<any>>;

Usage Examples

Basic Sequence Usage

import Velocity from "velocity-animate";

// Simple attention seeker
Velocity(element, "bounce");

// Entrance animation
Velocity(element, "fadeInUp", { duration: 800 });

// Exit animation with callback
Velocity(element, "slideOutLeft", {
  duration: 600,
  complete: () => element.style.display = "none"
});

Chaining Sequences

// Entrance -> attention -> exit sequence
Velocity(element, "bounceIn", 600)
  .then(() => new Promise(resolve => setTimeout(resolve, 1000)))
  .then(() => Velocity(element, "pulse", 400))
  .then(() => Velocity(element, "fadeOut", 500));

Custom Duration and Options

// Override default duration
Velocity(element, "rubberBand", {
  duration: 1200,  // Slower than default
  loop: 2,         // Repeat twice
  delay: 300       // Start after delay
});

// Multiple elements with stagger
Velocity(elements, "slideInUp", {
  duration: 800,
  stagger: 150,    // 150ms between each element
  easing: "easeOutBounce"
});

Registering Custom Sequences

// Register a custom sequence
Velocity.Sequences.customWiggle = {
  duration: 1000,
  0: { rotateZ: "0deg" },
  25: { rotateZ: "5deg" },
  50: { rotateZ: "-5deg" },
  75: { rotateZ: "3deg" },
  100: { rotateZ: "0deg" }
};

// Use the custom sequence
Velocity(element, "customWiggle");

Sequence Variations

// Use different variations of similar sequences
Velocity(element1, "fadeIn");           // Simple fade
Velocity(element2, "fadeInUp");         // Fade with upward motion
Velocity(element3, "fadeInUpBig");      // Fade with large upward motion

// Compare different entrance styles
Velocity(element1, "bounceInLeft");     // Bouncy entrance
Velocity(element2, "slideInLeft");      // Smooth entrance  
Velocity(element3, "zoomInLeft");       // Scaling entrance

Responsive Sequences

// Different sequences based on screen size
const isMobile = window.innerWidth < 768;

if (isMobile) {
  // Simpler animations for mobile
  Velocity(element, "fadeIn", { duration: 400 });
} else {
  // More elaborate animations for desktop
  Velocity(element, "bounceInDown", { duration: 800 });
}

Install with Tessl CLI

npx tessl i tessl/npm-velocity-animate

docs