Introduction

AnimX is a JavaScript animation library for the DOM that combines traditional timeline sequencing with physics-based motion. It provides a single, unified API to handle both structured UI animations and dynamic, interactive simulations.

Overview

The following sequence takes you on a tour of AnimX's core capabilities, demonstrating tweens, timelines, plugin effects, and physics simulations.

Tweens

Animate any DOM property smoothly using powerful easing curves and precise duration controls.

animate(box, { rotation: 360, scale: 1.2, ease: 'quart.out' });

Timelines

Sequence, stagger, and overlap multiple animations to choreograph intricate UI interactions.

tl.animate(dots, { y: 0, stagger: 0.1 }).animate(dots, { scale: 1.3 });

TextSlicer

Split text into precise characters or words instantly for complex typography sequences.

const split = TextSlicer.split(text, { type: 'chars' }); animate(split.chars, { y: 20, rotationX: 90, stagger: 0.05 });

LayoutMorph

Seamlessly animate elements between completely different DOM layout states using FLIP.

const state = LayoutMorph.record(container); container.classList.add('header-mode'); LayoutMorph.play(state, { duration: 1.0 });

Physics

Bring UIs to life with native physics simulations, like directional gravity and bouncing.

applyGravity(box, { gravity: 980, bounce: 0.7, bounds: '#stage' });

PathTransition

Animate elements smoothly along complex vector paths with auto-rotation.

animate(car, { pathTransition: { path: svgPath, autoRotate: true }, ease: 'linear' });

Interactable

Add physics-based drag, drop, and throw interactions with single lines of code.

Interactable.create(box, { bounds: container, inertia: true, edgeResistance: 0.85 });

Responsive

Build native responsive animations with built-in matchMedia contexts.

const ctx = responsive(); ctx.add('(max-width: 768px)', (context) =>; { context.add( animate(post, { width: 100 }) ); });

WAVE

BLUR

FLIP

DRAG

60 FPS

Architecture

AnimX is built with a modular structure, allowing you to include only the features you need. The core engine handles standard tweening and timelines, while additional modules provide physics simulations, text effects, and interactive behaviors.

Installation

Install AnimX using your preferred package manager:

npm install animx

Once installed, you can import the specific modules your project requires:

import { animate, timeline } from 'animx';
import { Dynamics } from 'animx/plugins/Dynamics';

Global Configuration

The core animation loop runs at the browser's native refresh rate by default, but provides several global configuration options that affect all running tweens and timelines.

import { loop } from 'animx';

// Artificial FPS Throttling
// Restricts all animations to a maximum frame rate (e.g., 12 FPS for a stop-motion look). 
// Set to 0 to disable throttling (default).
loop.targetFps = 12;

// Global Time Scale
// Speeds up (e.g. 2.0) or slows down (e.g. 0.5) the entire animation engine.
loop.timeScale = 0.5;

// Current engine FPS
console.log(`Running at ${loop.fps} FPS`);

Next Steps

Explore the guides to learn more about the core animation engine and available features.

View Core Guide →