Animotion.js

Advanced custom web animation engine — scroll, text, 3D, media, and layout animations for Vanilla JS, React, and Next.js.

Animotion gives you a complete animation toolkit with a unified API. Features include tweens, timelines, scroll-driven animation, text splitting, spring physics, motion paths, draggable interactions, WebGL shaders, Three.js integration, Lottie/dotLottie playback, audio/video scrubbing, reactive layouts, and a declarative HTML attributes system.

Quick Start

npm install animotionjs-plus

import Animotion from 'animotionjs-plus';
import 'animotionjs-plus/styles.css';

// Tween
Animotion.to('.box', { x: 200, opacity: 0.5, rotate: 45 }, { duration: 1, ease: 'elastic-out' });

// Timeline
const tl = Animotion.timeline();
tl.to('.a', { x: 100 }, 0.5)
  .to('.b', { opacity: 0 }, 0.3, '>');

// ScrollTrigger
Animotion.scroll('.section', { scrub: true, pin: true });

Features

• Tween — animate any DOM property, CSS style, transform, filter, or JS object
• Timeline — sequence and overlap animations with labels and callbacks
• ScrollTrigger — pin, scrub, reverse, callbacks
• SplitText — split into chars/words/lines with replace & insert
• Draggable — drag with physics/inertia
• SpringPhysics — mass-spring-damper physics simulation
• MotionPath — animate along SVG paths or point arrays
• SceneSequence — declarative scene-based sequencing
• TextEffects — typewriter, wave, scramble
• VideoAnimation — video scrubbing and segment playback
• AudioAnimation — audio scrubbing and segment playback
• Layouts — circular, orbit, spiral, wave, scatter, radial-tree layouts
• PNGSequence — frame-by-frame PNG sequence player
• ParallaxEffect — parallax scrolling
• Interactions — event-driven animation triggers (click, hover, etc.)
• WebGLSupport — shader animations
• Three.js — 3D object animation and GLTF state machines
• Lottie/dotLottie — Lottie JSON and dotLottie playback
• ViewModel + StateMachine + Binding — reactive data-driven animation
• AnimationContext — scoped animation orchestration
• React / Next.js — hooks: useAnimotion, useAnimotionContext, useAnimotionAttributes
• HTML Attributes — declarative am-* attributes (zero JS)

Docs

Full documentation is in the docs/ directory:

• docs/README.md — complete API reference (2700+ lines)
• docs/DECLARATIVE-ATTRIBUTES.md
• docs/NextJS.md — Next.js integration guide
• docs/installation/INSTALLATION.md
• docs/skills/ — agent skills system documentation

Interactive examples in examples/.

Framework Integration

// React
import { useAnimotion } from 'animotionjs-plus/react';

function Component() {
  const ref = useAnimotion((ctx, scope) => {
    ctx.from(scope, { opacity: 0, y: 20 }, { duration: 0.5 });
  }, []);
  return <div ref={ref}>Hello</div>;
}

// Next.js (client component)
'use client';
import { useAnimotion } from 'animotionjs-plus/next';

Declarative Attributes

<div am-from='{"opacity":0,"y":20}' am-to='{"opacity":1,"y":0}'
     am-options='{"duration":0.5,"ease":"back-out"}'></div>

<section am-scroll='{"pin":true,"scrub":true}'>
  <h1 am-split='{"type":"chars","replace":{"0":"🌟"}}'>Hello</h1>
</section>

Build

npm run build    # production build → dist/
npm run dev      # watch mode
npm test         # run tests
npm run lint     # lint source

License

MIT