tessl/npm-animejs

Fast, multipurpose JavaScript animation library for CSS, SVG, DOM, and JS objects with timelines, scroll triggers, physics, and interactive draggables

Overview

Eval results

Files

Engine

Name: tessl/npm-animejs
Author: tessl

Global animation engine controlling all timers, playback, and default settings across the entire anime.js system.

Capabilities

engine Singleton

Global engine instance that manages all animations and timers in anime.js.

/**
 * Global animation engine singleton
 * Controls all timers, animations, and global settings
 */
const engine: Engine;

Usage Example:

import { engine } from "animejs/engine";

// Pause all animations
engine.pause();

// Resume all animations
engine.resume();

// Change global defaults
engine.defaults.duration = 1000;
engine.defaults.ease = "outQuad";

Engine Properties

Global configuration and state management.

/**
 * Engine class managing global animation system
 */
class Engine {
  // ===== Configuration Properties =====

  /**
   * Global default parameters for all animations
   * Applied when no specific parameter is provided
   */
  defaults: DefaultsParams;

  /**
   * Whether the engine is paused
   * When true, all animations stop updating
   */
  paused: boolean;

  /**
   * Use default main loop for animation updates
   * When true, uses requestAnimationFrame
   * When false, updates must be called manually
   */
  useDefaultMainLoop: boolean;

  /**
   * Automatically pause engine when document is hidden
   * Improves performance when tab is not visible
   */
  pauseOnDocumentHidden: boolean;

  // ===== Getters/Setters =====

  /**
   * Time unit for all durations
   * 'ms' for milliseconds (default)
   * 's' for seconds
   * @settable Change time unit globally
   */
  timeUnit: "ms" | "s";

  /**
   * Number precision for animated values
   * Controls decimal places in output values
   * @settable Set global precision
   */
  precision: number;

  // ===== Methods =====

  /**
   * Manually update engine (single tick)
   * Used when useDefaultMainLoop is false
   * @returns Engine instance for chaining
   */
  update(): Engine;

  /**
   * Wake engine from paused state
   * Resumes animation loop
   * @returns Engine instance for chaining
   */
  wake(): Engine;

  /**
   * Pause all animations globally
   * @returns Engine instance for chaining
   */
  pause(): Engine;

  /**
   * Resume all animations globally
   * @returns Engine instance for chaining
   */
  resume(): Engine;
}

Usage Examples:

import { engine } from "animejs/engine";

// Check if paused
if (engine.paused) {
  console.log("All animations are paused");
}

// Pause all animations
engine.pause();

// Resume all animations
engine.resume();

// Wake engine
engine.wake();

Global Defaults

Set default parameters for all animations across the application.

/**
 * Default parameters interface
 */
interface DefaultsParams {
  /** Default duration in milliseconds */
  duration?: number;

  /** Default easing function */
  ease?: EasingParam;

  /** Default composition mode */
  composition?: TweenComposition;

  /** Default modifier function */
  modifier?: TweenModifier;

  /** Default loop count */
  loop?: number | boolean;

  /** Default direction */
  direction?: "normal" | "reverse" | "alternate";

  /** Default autoplay setting */
  autoplay?: boolean;

  /** Any other animation parameter */
  [key: string]: any;
}

Usage Example:

import { engine, animate } from "animejs";

// Set global defaults
engine.defaults.duration = 1200;
engine.defaults.ease = "outCubic";
engine.defaults.composition = "blend";

// All animations now use these defaults
animate(".box1", { x: 100 }); // Uses duration: 1200, ease: 'outCubic'
animate(".box2", { y: 100 }); // Uses duration: 1200, ease: 'outCubic'

// Override per animation
animate(".box3", {
  rotate: 360,
  duration: 2000, // Override default
});

Engine State Control

Control global animation playback.

import { engine } from "animejs/engine";

// Pause all animations
engine.pause();
console.log(engine.paused); // true

// Resume all animations
engine.resume();
console.log(engine.paused); // false

// Wake engine
engine.wake();

Time Unit Configuration

Change global time unit between milliseconds and seconds.

import { engine, animate } from "animejs";

// Default: milliseconds
animate(".box", {
  translateX: 100,
  duration: 1000, // 1000ms
});

// Switch to seconds
engine.timeUnit = "s";

animate(".box", {
  translateX: 100,
  duration: 1, // 1 second
});

// Switch back to milliseconds
engine.timeUnit = "ms";

Precision Control

Control decimal precision for animated values.

import { engine, animate } from "animejs";

// Default precision
animate(".box", {
  translateX: 100.123456,
}); // Default precision

// Set global precision
engine.precision = 2; // 2 decimal places

animate(".box", {
  translateX: 100.123456, // Will output as 100.12
});

engine.precision = 0; // No decimals
animate(".box", {
  translateX: 100.123456, // Will output as 100
});

Manual Update Loop

Disable default animation loop and update manually.

import { engine } from "animejs/engine";

// Disable default loop
engine.useDefaultMainLoop = false;

// Manual update loop
function customLoop() {
  engine.update(); // Manual tick

  // Custom logic here

  requestAnimationFrame(customLoop);
}

customLoop();

// Re-enable default loop
engine.useDefaultMainLoop = true;

Auto-Pause on Document Hidden

Control whether animations pause when tab is hidden.

import { engine } from "animejs/engine";

// Enable auto-pause (default)
engine.pauseOnDocumentHidden = true;

// Animations pause when tab is hidden
// Animations resume when tab becomes visible

// Disable auto-pause
engine.pauseOnDocumentHidden = false;
// Animations continue even when tab is hidden

Global Pause/Resume Pattern

Implement global animation controls:

import { engine } from "animejs/engine";

// Pause button
document.querySelector("#pause-all").addEventListener("click", () => {
  engine.pause();
  console.log("All animations paused");
});

// Resume button
document.querySelector("#resume-all").addEventListener("click", () => {
  engine.resume();
  console.log("All animations resumed");
});

// Toggle button
document.querySelector("#toggle-all").addEventListener("click", () => {
  if (engine.paused) {
    engine.resume();
  } else {
    engine.pause();
  }
});

Engine-based Performance Optimization

Optimize performance with engine settings:

import { engine } from "animejs/engine";

// Pause animations on tab switch
engine.pauseOnDocumentHidden = true;

// Set lower precision for better performance
engine.precision = 1; // Fewer decimal calculations

// Use manual loop for more control
engine.useDefaultMainLoop = false;

let lastTime = 0;
function optimizedLoop(currentTime) {
  const deltaTime = currentTime - lastTime;

  // Throttle updates
  if (deltaTime >= 16) {
    // ~60fps
    engine.update();
    lastTime = currentTime;
  }

  requestAnimationFrame(optimizedLoop);
}

requestAnimationFrame(optimizedLoop);

Application-wide Animation Configuration

Set up consistent animation behavior across entire app:

import { engine } from "animejs/engine";

// Configure engine for app
function setupAnimationEngine() {
  // Set defaults
  engine.defaults.duration = 600;
  engine.defaults.ease = "outQuad";
  engine.defaults.composition = "blend";

  // Set precision
  engine.precision = 2;

  // Enable auto-pause
  engine.pauseOnDocumentHidden = true;

  // Time unit
  engine.timeUnit = "ms";
}

setupAnimationEngine();

Debug Mode

Monitor engine state:

import { engine } from "animejs/engine";

// Log engine state
function logEngineState() {
  console.log({
    paused: engine.paused,
    timeUnit: engine.timeUnit,
    precision: engine.precision,
    useDefaultMainLoop: engine.useDefaultMainLoop,
    pauseOnDocumentHidden: engine.pauseOnDocumentHidden,
    defaults: engine.defaults,
  });
}

logEngineState();

Reduced Motion Support

Respect user's motion preferences:

import { engine } from "animejs/engine";

// Check for reduced motion preference
const prefersReducedMotion = window.matchMedia(
  "(prefers-reduced-motion: reduce)"
).matches;

if (prefersReducedMotion) {
  // Reduce animation durations
  engine.defaults.duration = 0;

  // Or disable animations entirely
  engine.pause();

  // Or use instant animations
  engine.defaults.duration = 1;
}

Custom Default Easings

Set custom default easings globally:

import { engine, spring, eases } from "animejs";

// Use spring as default
engine.defaults.ease = spring({
  mass: 1,
  stiffness: 100,
  damping: 10,
});

// Or custom bezier
engine.defaults.ease = eases.outCubic;

// All animations now use this easing by default

Engine Lifecycle Hooks

Monitor engine state changes:

import { engine } from "animejs/engine";

// Track pause/resume
let waspaused = engine.paused;

setInterval(() => {
  if (engine.paused !== wasPaused) {
    if (engine.paused) {
      console.log("Engine paused");
      onEnginePause();
    } else {
      console.log("Engine resumed");
      onEngineResume();
    }
    wasPaused = engine.paused;
  }
}, 100);

function onEnginePause() {
  // Handle pause
}

function onEngineResume() {
  // Handle resume
}

Development vs Production Settings

Different engine configurations for different environments:

import { engine } from "animejs/engine";

if (process.env.NODE_ENV === "development") {
  // Development: More precise, easier debugging
  engine.precision = 4;
  engine.defaults.duration = 1000;
} else {
  // Production: Optimized performance
  engine.precision = 1;
  engine.defaults.duration = 600;
  engine.pauseOnDocumentHidden = true;
}

Testing Configuration

Set up engine for testing:

import { engine } from "animejs/engine";

// Test configuration
function setupTestEnvironment() {
  // Disable default loop for manual control
  engine.useDefaultMainLoop = false;

  // Set predictable defaults
  engine.defaults.duration = 1000;
  engine.defaults.ease = "linear";

  // Disable auto-pause
  engine.pauseOnDocumentHidden = false;

  // Set precision
  engine.precision = 2;
}

// In tests
beforeEach(() => {
  setupTestEnvironment();
});

afterEach(() => {
  // Clean up
  engine.pause();
});

Types

/**
 * Default parameters for all animations
 */
interface DefaultsParams {
  /** Default duration in milliseconds or seconds (based on timeUnit) */
  duration?: number;

  /** Default easing function */
  ease?: EasingParam;

  /** Default composition mode */
  composition?: TweenComposition;

  /** Default modifier function */
  modifier?: TweenModifier;

  /** Default loop count */
  loop?: number | boolean;

  /** Default direction */
  direction?: "normal" | "reverse" | "alternate";

  /** Default autoplay setting */
  autoplay?: boolean;

  /** Default delay */
  delay?: number;

  /** Default end delay */
  endDelay?: number;

  /** Any other animation parameter */
  [key: string]: any;
}

/**
 * Easing parameter type
 */
type EasingParam =
  | string
  | EasingFunction
  | Spring
  | [number, number, number, number];

/**
 * Easing function type
 */
type EasingFunction = (time: number) => number;

/**
 * Tween composition mode
 */
type TweenComposition = "none" | "replace" | "blend";

/**
 * Tween modifier function
 */
type TweenModifier = (value: number | string) => number | string;

/**
 * Time unit type
 */
type TimeUnit = "ms" | "s";

Install with Tessl CLI