or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

animatable.mdanimation.mddraggable.mdeasings.mdengine.mdindex.mdscope.mdscroll.mdsvg.mdtext.mdtimeline.mdtimer.mdutilities.mdwaapi.md
tile.json

tessl/npm-animejs

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

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/animejs@4.2.x

To install, run

npx @tessl/cli install tessl/npm-animejs@4.2.0

index.mddocs/

Anime.js

Anime.js is a fast, multipurpose, and lightweight JavaScript animation library with a simple yet powerful API. It works with CSS properties, SVG, DOM attributes, and JavaScript objects, providing comprehensive animation controls including timelines, easings, spring physics, scroll-triggered animations, and interactive draggables.

Package Information

  • Package Name: animejs
  • Package Type: npm
  • Language: JavaScript/TypeScript
  • Installation: npm install animejs

Core Imports

import { animate, createTimeline, stagger } from 'animejs';

For CommonJS:

const { animate, createTimeline, stagger } = require('animejs');

Module-specific imports for tree-shaking:

import { animate } from 'animejs/animation';
import { createTimeline } from 'animejs/timeline';
import { onScroll } from 'animejs/events';
import { createDraggable } from 'animejs/draggable';

Basic Usage

import { animate, stagger } from 'animejs';

// Animate CSS properties
animate('.box', {
  x: 320,
  rotate: { from: -180 },
  duration: 1250,
  delay: stagger(65, { from: 'center' }),
  ease: 'inOutQuint',
  loop: true,
  alternate: true
});

Architecture

Anime.js is built around several key components:

  • Animation System: Core JSAnimation class and animate() function for animating targets
  • Timing System: Timer base class providing playback controls, looping, and callbacks
  • Timeline: Sequence and synchronize multiple animations with precise positioning
  • Easings: 68+ built-in easings plus spring physics, cubic bezier, steps, and custom functions
  • Engine: Global engine coordinating all timers and animations
  • Events: Scroll-based animation triggers with sync capabilities
  • Interactivity: Physics-based draggable system with constraints and snapping
  • Scope: Lifecycle management for animations within specific contexts
  • Text: Text splitting into animatable characters, words, and lines
  • SVG: Motion paths, morphing, and drawable path animations
  • WAAPI: Web Animations API integration
  • Utilities: Stagger, random, chainable math operations, and target manipulation

Capabilities

Core Animation

Create and control animations on DOM elements, SVG, and JavaScript objects. Supports CSS properties, transforms, SVG attributes, and object properties with automatic unit detection and color parsing.

function animate(
  targets: TargetsParam,
  parameters: AnimationParams
): JSAnimation;

type TargetsParam = string | HTMLElement | SVGElement | object | Array<any>;

interface AnimationParams {
  // Animation properties as key-value pairs
  [property: string]: TweenOptions | Callback | boolean;

  // Timing
  duration?: number | string | FunctionValue;
  delay?: number | string | FunctionValue;
  loopDelay?: number;

  // Playback
  loop?: number | boolean;
  alternate?: boolean;
  reversed?: boolean;
  autoplay?: boolean | ScrollObserver;

  // Easing
  ease?: EasingParam;

  // Callbacks
  onBegin?: Callback<JSAnimation>;
  onUpdate?: Callback<JSAnimation>;
  onComplete?: Callback<JSAnimation>;
  onRender?: Callback<JSAnimation>;
}

interface JSAnimation extends Timer {
  targets: Array<HTMLElement | SVGElement | object>;
  stretch(newDuration: number): this;
  refresh(): this;
  revert(): this;
  then(callback?: Callback): Promise<this>;
}

Core Animation

Timeline

Sequence and synchronize animations with precise positioning using labels, relative positions, and stagger patterns.

function createTimeline(parameters?: TimelineParams): Timeline;

interface Timeline extends Timer {
  labels: Record<string, number>;
  defaults: DefaultsParams;

  add(targets: TargetsParam, parameters: AnimationParams, position?: TimelinePosition): this;
  add(timerParams: TimerParams, position?: TimelinePosition): this;
  set(targets: TargetsParam, parameters: AnimationParams, position?: TimelinePosition): this;
  call(callback: Callback<Timer>, position?: TimelinePosition): this;
  label(labelName: string, position?: TimelinePosition): this;
  remove(targets: TargetsParam, propertyName?: string): this;
  sync(animation: Tickable | Animation, position?: TimelinePosition): this;
  stretch(newDuration: number): this;
  refresh(): this;
  revert(): this;
  then(callback?: Callback): Promise<this>;
}

type TimelinePosition =
  | number
  | `+=${number}`
  | `-=${number}`
  | `*=${number}`
  | "<"
  | "<<"
  | string;

Timeline

Timer

Base timing class providing playback control, looping, and lifecycle callbacks. Used as the foundation for animations and timelines.

function createTimer(parameters?: TimerParams): Timer;

interface Timer {
  id: string | number;
  duration: number;
  currentTime: number;
  progress: number;
  paused: boolean;
  completed: boolean;

  play(): this;
  pause(): this;
  resume(): this;
  restart(): this;
  reverse(): this;
  seek(time: number, muteCallbacks?: boolean): this;
  cancel(): this;
  reset(softReset?: boolean): this;
  then(callback?: Callback): Promise<this>;
}

Timer

Easings

Comprehensive easing functions including 68+ built-in easings, spring physics, cubic bezier, steps, linear interpolation, and irregular patterns.

// Built-in easings (string-based)
type EaseStringParam =
  | 'linear' | 'none'
  | 'in' | 'out' | 'inOut' | 'outIn'
  | 'inQuad' | 'outQuad' | 'inOutQuad'
  | 'inCubic' | 'outCubic' | 'inOutCubic'
  | 'inQuart' | 'outQuart' | 'inOutQuart'
  | 'inQuint' | 'outQuint' | 'inOutQuint'
  | 'inSine' | 'outSine' | 'inOutSine'
  | 'inCirc' | 'outCirc' | 'inOutCirc'
  | 'inExpo' | 'outExpo' | 'inOutExpo'
  | 'inBounce' | 'outBounce' | 'inOutBounce'
  | 'inBack' | 'outBack' | 'inOutBack'
  | 'inElastic' | 'outElastic' | 'inOutElastic';

// Programmatic easings
function cubicBezier(mX1?: number, mY1?: number, mX2?: number, mY2?: number): EasingFunction;
function steps(steps?: number, fromStart?: boolean): EasingFunction;
function linear(...args: (string | number)[]): EasingFunction;
function irregular(length?: number, randomness?: number): EasingFunction;
function spring(parameters?: SpringParams): Spring;

type EasingFunction = (time: number) => number;
type EasingParam = string | EasingFunction | Spring;

Easings

Scroll-based Animation

Observe scroll position and trigger or synchronize animations based on element visibility and scroll progress.

function onScroll(parameters?: ScrollObserverParams): ScrollObserver;

interface ScrollObserver {
  id: string | number;
  progress: number;
  scroll: number;
  velocity: number;
  backward: boolean;
  isInView: boolean;

  link(animation: Tickable): this;
  refresh(): this;
  revert(): this;
}

interface ScrollObserverParams {
  target?: TargetsParam;
  container?: TargetsParam;
  sync?: boolean | EasingParam;
  axis?: 'x' | 'y';
  enter?: ScrollThresholdParam;
  leave?: ScrollThresholdParam;
  repeat?: boolean;
  onEnter?: Callback<ScrollObserver>;
  onLeave?: Callback<ScrollObserver>;
  onUpdate?: Callback<ScrollObserver>;
}

Scroll Animation

Draggable

Create physics-based draggable elements with constraints, snapping, momentum, and customizable interactions.

function createDraggable(target: TargetsParam, parameters?: DraggableParams): Draggable;

interface Draggable {
  x: number;
  y: number;
  progressX: number;
  progressY: number;
  velocity: number;
  angle: number;
  grabbed: boolean;
  dragged: boolean;
  enabled: boolean;

  setX(x: number, muteUpdateCallback?: boolean): this;
  setY(y: number, muteUpdateCallback?: boolean): this;
  refresh(): this;
  enable(): this;
  disable(): this;
  revert(): this;
}

Draggable

Scope

Manage animation lifecycles within specific contexts with automatic cleanup, media query support, and custom methods.

function createScope(parameters?: ScopeParams): Scope;

interface Scope {
  defaults: DefaultsParams;
  root: Document | HTMLElement;
  data: Record<string, any>;

  add(methodName: string, method: ScopeMethod): this;
  add(constructor: ScopeConstructorCallback): this;
  execute<T>(callback: ScopedCallback<T>): T;
  refresh(): this;
  revert(): void;
}

Scope

Text Splitting

Split text into animatable characters, words, and lines while preserving HTML structure and accessibility.

function splitText(target: HTMLElement | string, parameters?: TextSplitterParams): TextSplitter;
function split(target: HTMLElement | string, parameters?: TextSplitterParams): TextSplitter;

interface TextSplitter {
  lines: Array<HTMLElement>;
  words: Array<HTMLElement>;
  chars: Array<HTMLElement>;
  ready: boolean;

  split(clearCache?: boolean): this;
  addEffect(effect: Function): this;
  refresh(): void;
  revert(): this;
}

Text Splitting

SVG Animation

Animate SVG paths with motion following, morphing, and drawable line animations.

function createMotionPath(path: TargetsParam, offset?: number): {
  translateX: FunctionValue;
  translateY: FunctionValue;
  rotate: FunctionValue;
};

function morphTo(path2: TargetsParam, precision?: number): FunctionValue;

function createDrawable(selector: TargetsParam, start?: number, end?: number): Array<DrawableSVGGeometry>;

type FunctionValue = (target: any, index: number, length: number) => any;

SVG Animation

Utility Functions

Helper functions for stagger patterns, random values, target manipulation, and chainable math operations.

function stagger(
  value: number | string | [number, number],
  params?: StaggerParams
): StaggerFunction;

function get(target: TargetsParam, propName: string, unit?: string | boolean): any;
function set(targets: TargetsParam, parameters: AnimationParams): JSAnimation;
function remove(targets: TargetsParam, renderable?: any, propertyName?: string): Array<any>;

const random: (min?: number, max?: number, decimalLength?: number) => number;
function randomPick<T>(items: Array<T>): T;
function shuffle<T>(items: Array<T>): Array<T>;

// Chainable math utilities
function clamp(min: number, max: number): ChainableUtil;
function round(decimalLength: number): ChainableUtil;
function snap(increment: number | Array<number>): ChainableUtil;
function wrap(min: number, max: number): ChainableUtil;
function lerp(start: number, end: number): ChainableUtil;
function damp(start: number, end: number, deltaTime: number): ChainableUtil;
function mapRange(inLow: number, inHigh: number, outLow: number, outHigh: number): ChainableUtil;

Utilities

Animatable Objects

Create objects with chainable animation methods for each property, providing a reactive interface.

function createAnimatable(targets: TargetsParam, parameters: AnimatableParams): AnimatableObject;

type AnimatableObject = {
  [property: string]: AnimatableProperty;
  revert(): void;
};

type AnimatableProperty = {
  (to: number | Array<number>, duration?: number, ease?: EasingParam): AnimatableObject;
  (): number | Array<number>;
};

Animatable

Web Animations API

Web Animations API wrapper with anime.js compatibility for browser-native animations.

namespace waapi {
  function animate(targets: HTMLElement | string, params: WAAPIAnimationParams): WAAPIAnimation;
  function convertEase(easingFunction: EasingFunction, samples?: number): string;
}

interface WAAPIAnimation {
  currentTime: number;
  progress: number;
  speed: number;
  paused: boolean;

  play(): this;
  pause(): this;
  reverse(): this;
  seek(time: number, muteCallbacks?: boolean): this;
  cancel(): this;
  revert(): this;
}

WAAPI

Engine

Global animation engine controlling all timers, providing default settings and manual update control.

const engine: Engine;

interface Engine {
  defaults: DefaultsParams;
  paused: boolean;
  timeUnit: 'ms' | 's';
  precision: number;

  update(): void;
  pause(): this;
  resume(): this;
}

Engine

Common Types

type TargetsParam =
  | string
  | HTMLElement
  | SVGElement
  | object
  | NodeList
  | Array<HTMLElement | SVGElement | object>;

type TweenOptions =
  | number
  | string
  | FunctionValue
  | TweenKeyValue
  | Array<TweenKeyValue>;

interface TweenKeyValue {
  from?: number | string;
  to?: number | string;
  fromTo?: [number | string, number | string];
  duration?: number | FunctionValue;
  delay?: number | FunctionValue;
  ease?: EasingParam;
}

type FunctionValue = (target: any, index: number, length: number) => any;

type Callback<T> = (self: T) => any;

interface DefaultsParams {
  duration?: number;
  delay?: number;
  ease?: EasingParam;
  loop?: number | boolean;
  alternate?: boolean;
  autoplay?: boolean;
}

interface TimerParams {
  id?: string | number;
  duration?: number;
  delay?: number;
  loopDelay?: number;
  loop?: boolean | number;
  alternate?: boolean;
  reversed?: boolean;
  autoplay?: boolean | ScrollObserver;
  frameRate?: number;
  playbackRate?: number;
  onBegin?: Callback<Timer>;
  onUpdate?: Callback<Timer>;
  onComplete?: Callback<Timer>;
}

interface StaggerParams {
  start?: number | string;
  from?: number | 'first' | 'center' | 'last' | 'random';
  reversed?: boolean;
  grid?: [number, number];
  axis?: 'x' | 'y';
  ease?: EasingParam;
}

type StaggerFunction = (target: any, index: number, length: number) => number | string;