or run

npx @tessl/cli init

Version

Tile

Overview

Evals

Files

docs

animatable.md animation.md draggable.md easings.md engine.md index.md scope.md scroll.md svg.md text.md timeline.md timer.md utilities.md waapi.md

tile.json

Engine

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";