npm install animejs

// ES Modules (bundler: Vite, esbuild, etc.)
import { animate, createTimeline, stagger } from 'animejs';

// CommonJS
const { animate } = require('animejs');

// CDN — ES Module
import { animate } from 'https://esm.sh/animejs';
// or JsDelivr
import { animate } from 'https://cdn.jsdelivr.net/npm/animejs/+esm';

// CDN — UMD (script tag)
// <script src="https://cdn.jsdelivr.net/npm/animejs/dist/bundles/anime.umd.min.js"></script>
// const { animate } = anime;

import {
  animate,           // Main animation function
  createTimer,       // Timer without animated properties
  createTimeline,    // Animation sequencer
  createAnimatable,  // Real-time animatable properties
  createDraggable,   // Draggable elements
  createScope,       // Responsive scope
  createLayout,      // Automatic layout animations
  onScroll,          // Scroll Observer
  stagger,           // Staggering utility
  createSpring,      // Physics spring
  waapi,             // Enhanced Web Animation API
  utils,             // Math and DOM utilities

  // SVG
  morphTo,
  createDrawable,
  createMotionPath,

  // Text
  splitText,
  scrambleText,

  // Engine
  engine,
} from 'animejs';

animate(targets, parameters);

// CSS Selector
animate('.box', { x: 100 });

// DOM Element
animate(document.querySelector('.box'), { x: 100 });

// NodeList / Array of elements
animate(document.querySelectorAll('.box'), { x: 100 });

// JavaScript Object
const obj = { value: 0 };
animate(obj, { value: 100, onUpdate: () => console.log(obj.value) });

// Mixed array
animate(['.box', myElement, myObject], { opacity: 0 });

// CSS Properties
animate('.el', {
  width: '200px',
  backgroundColor: '#ff0000',
  opacity: 0.5,
  borderRadius: '50%',
});

// CSS Transforms (individual, no conflicts)
animate('.el', {
  x: 100,          // translateX
  y: 50,           // translateY
  z: 0,            // translateZ
  rotate: 90,      // rotateZ (degrees by default)
  rotateX: 45,
  rotateY: 45,
  scale: 1.5,
  scaleX: 2,
  scaleY: 0.5,
  skew: 15,
  skewX: 10,
  skewY: 10,
});

// CSS Variables
animate('.el', { '--my-color': '#ff0000' });

// HTML Attributes
animate('input[type=range]', { value: 50 });

// SVG Attributes
animate('circle', { r: 50, cx: 100, cy: 100 });

// JS Object properties
const data = { count: 0 };
animate(data, { count: 100 });

// Numerical
animate('.el', { x: 100 });

// With unit (automatic conversion)
animate('.el', { width: '50%' });  // converts from px
animate('.el', { x: '10rem' });

// Relative (JS only)
animate('.el', { x: '+=50' });   // add 50
animate('.el', { x: '-=50' });   // subtract 50
animate('.el', { x: '*=2' });    // multiply by 2

// Color
animate('.el', { backgroundColor: 'rgb(255, 0, 0)' });
animate('.el', { backgroundColor: '#ff0000' });
animate('.el', { backgroundColor: 'hsl(0, 100%, 50%)' });

// Color function (WAAPI)
animate('.el', { color: 'oklch(70% 0.2 120)' });

// CSS variable as value
animate('.el', { x: 'var(--offset)' });

// Function-based (per element)
animate('.el', {
  x: (el, index, total) => index * 50,
  delay: (el, index) => index * 100,
});

animate('.el', {
  x: {
    to: 200,
    from: 0,          // forced initial value
    delay: 200,
    duration: 800,
    ease: 'inOutExpo',
    composition: 'add',  // 'replace' | 'add' | 'blend'
    modifier: v => Math.round(v),
  },
});

// Tween values keyframes (array of values)
animate('.el', {
  x: [0, 50, 100, 50, 0],
});

// Tween parameters keyframes
animate('.el', {
  x: [
    { to: 100, duration: 500, ease: 'outExpo' },
    { to: 0,   duration: 500, ease: 'inExpo'  },
  ],
});

// Duration-based keyframes (JS only)
animate('.el', {
  keyframes: [
    { x: 100, duration: 400 },
    { y: 50,  duration: 300 },
    { rotate: 90, duration: 500 },
  ],
});

// Percentage-based keyframes (JS only)
animate('.el', {
  keyframes: {
    '0%':   { x: 0,   opacity: 1 },
    '50%':  { x: 100, opacity: 0.5 },
    '100%': { x: 200, opacity: 1 },
  },
});

animate('.el', {
  x: 100,
  delay: 500,             // delay before starting (ms)
  duration: 1000,         // duration (ms)
  loop: true,             // true = infinite, number = repetitions
  loopDelay: 200,         // pause between loops (JS only)
  alternate: true,        // reverses direction on each loop
  reversed: false,        // plays in reverse
  autoplay: true,         // starts automatically
  frameRate: 60,          // max FPS (JS only)
  playbackRate: 1,        // speed (0.5 = half speed)
  playbackEase: 'linear', // global easing for the animation (JS only)
  persist: false,         // keeps styles after completion (WAAPI only)
});

animate('.el', {
  x: 100,
  onBegin:        (anim) => console.log('started'),       // JS only
  onComplete:     (anim) => console.log('complete'),
  onBeforeUpdate: (anim) => {},                           // JS only
  onUpdate:       (anim) => console.log(anim.progress),  // JS only
  onRender:       (anim) => {},                           // JS only
  onLoop:         (anim) => {},                           // JS only
  onPause:        (anim) => {},                           // JS only
}).then((anim) => console.log('promise resolved'));

const anim = animate('.el', { x: 100, autoplay: false });

anim.play();           // play
anim.pause();          // pause
anim.resume();         // resume
anim.reverse();        // reverse direction
anim.restart();        // restart from the beginning
anim.alternate();      // alternate direction
anim.complete();       // jump to end
anim.cancel();         // cancel without reverting
anim.revert();         // cancel and restore original values
anim.reset();          // reset to initial state (JS only)
anim.seek(500);        // jump to time in ms
anim.stretch(2000);    // stretch total duration (JS only)
anim.refresh();        // recompute values (JS only)

anim.duration    // total duration (ms)
anim.currentTime // current time (ms)
anim.progress    // progress 0-1
anim.paused      // boolean
anim.began       // boolean
anim.completed   // boolean
anim.reversed    // boolean
anim.targets     // array of targets

import { createTimer } from 'animejs';

const timer = createTimer({
  duration: 2000,
  loop: true,
  onUpdate: (t) => console.log(t.currentTime),
  onComplete: (t) => console.log('done'),
});

import { createTimeline } from 'animejs';

const tl = createTimeline({
  loop: true,
  defaults: { duration: 500, ease: 'outExpo' }, // defaults for all animations
});

// Add animations (chained in sequence by default)
tl.add('.box',    { x: 100 })
  .add('.circle', { y: 100 })
  .add('.text',   { opacity: 0 });

tl.add('.el', { x: 100 })              // after the previous
  .add('.el', { y: 50 }, 500)          // absolute: at 500ms from start
  .add('.el', { scale: 2 }, '+=200')   // relative: 200ms AFTER the previous ends
  .add('.el', { rotate: 90 }, '-=100') // relative: 100ms BEFORE the previous ends
  .add('.el', { opacity: 0 }, '<')     // at the same time as the previous
  .add('.el', { opacity: 1 }, '<100')  // 100ms after the start of the previous
  .label('myLabel')                    // label at current time
  .add('.el', { x: 0 }, 'myLabel');    // position by label

tl.add(targets, params, position)  // add animation
  .set(targets, params, position)  // set values instantly
  .sync(animation, position)       // sync external animation
  .call(fn, position)              // call function at a specific time
  .label('name', position)         // add label
  .remove(targets)                 // remove animations for targets
  .init()                          // initialize without playing

// Playback (same as animate)
tl.play() .pause() .resume() .reverse()
  .restart() .alternate() .complete()
  .cancel() .revert() .reset()
  .seek(ms) .stretch(ms) .refresh()

import { createAnimatable } from 'animejs';

const box = createAnimatable('.box', {
  x: { duration: 500, ease: 'outSpring' },
  y: { duration: 500, ease: 'outSpring' },
  scale: { duration: 300 },
  // unit: 'px',       // default unit
  // modifier: v => v, // global modifier
});

// Setter: animates to the new value
box.x(200);
box.y(100);
box.scale(1.5);

// Getter: returns current value
console.log(box.x()); // null if not yet set

// Revert
box.revert();

import { createDraggable, createSpring } from 'animejs';

const draggable = createDraggable('.card', {
  // Axis constraints
  x: true,        // allow drag on X
  y: false,       // lock Y axis
  // x: { mapTo: anotherElement }, // map position to another element

  // Container and bounds
  container: '.wrapper',    // selector, element, 'window', or 'parent'
  containerPadding: 20,     // inner padding of the container
  containerFriction: 0.8,   // friction when dragged outside the container

  // Snap
  snap: 50,                 // number, array, or function
  // snap: [0, 100, 200, 300],
  // snap: (val) => Math.round(val / 50) * 50,

  // Release physics
  releaseEase: createSpring({ stiffness: 200, damping: 15 }),
  releaseMass: 1,
  releaseStiffness: 200,
  releaseDamping: 15,
  releaseContainerFriction: 0.85,

  // Velocity
  velocityMultiplier: 1,
  minVelocity: 0,
  maxVelocity: Infinity,
  dragSpeed: 1,
  dragThreshold: 0,   // min pixels to start dragging

  // Auto-scroll
  scrollThreshold: 20,
  scrollSpeed: 10,

  // Cursor
  cursor: 'grab',         // CSS cursor on hover
  trigger: '.handle',     // element that triggers the drag

  // Callbacks
  onGrab:        (d) => {},
  onDrag:        (d) => {},
  onUpdate:      (d) => {},
  onRelease:     (d) => {},
  onSnap:        (d) => {},
  onSettle:      (d) => {},
  onResize:      (d) => {},
  onAfterResize: (d) => {},
});

// Methods
draggable.enable();
draggable.disable();
draggable.setX(100);
draggable.setY(50);
draggable.animateInView();
draggable.scrollInView();
draggable.stop();
draggable.reset();
draggable.revert();
draggable.refresh();

import { createLayout } from 'animejs';

const layout = createLayout('.container', {
  children: true,    // animate container children
  duration: 600,
  ease: 'outExpo',
  properties: ['width', 'height', 'transform', 'opacity'],

  // Enter/exit states
  enterFrom: { opacity: 0, scale: 0.5 },
  leaveTo:   { opacity: 0, scale: 0.5 },
  swapAt:    0.5,  // swap point (0-1)
});

// Typical usage
layout.record();         // capture current positions
// ... make DOM changes ...
layout.animate();        // animate from previous position to new one

// Or combined:
layout.update(() => {
  // DOM changes here
});

layout.revert();         // revert animation

<!-- Elements with the same layout-id are tracked across containers -->
<div data-layout-id="card-1" class="container-a">Card</div>
<!-- After moving to the other container: -->
<div data-layout-id="card-1" class="container-b">Card</div>

// CSS display property animation
// DOM reorder animation
// Enter / Exit animations
// Modal dialog animations
// Swap parent animations (element moves between parent containers)

import { createScope } from 'animejs';

const scope = createScope({
  root: '.my-component',          // root element (selector context)
  defaults: { duration: 600, ease: 'outExpo' },
  mediaQueries: {
    mobile:   '(max-width: 768px)',
    portrait: '(orientation: portrait)',
    dark:     '(prefers-color-scheme: dark)',
  },
});

// add() re-runs whenever a media query changes
scope.add(({ matches, root }) => {
  const isMobile = matches.mobile;

  createTimeline()
    .add('.box', {
      x: isMobile ? 0 : 200,
      y: isMobile ? 100 : 0,
    });

  // Optionally return a cleanup function
  return () => {};
});

// addOnce() runs only once (does not re-run on media query change)
scope.addOnce(() => {
  animate('.logo', { opacity: 1, delay: 500 });
});

scope.revert();   // cleans up all animations in the scope
scope.refresh();  // re-runs all constructors
scope.keepTime(); // preserves time when refreshing