monomotion

Monomotion — HTML Animation with GSAP

API-controllable, HTML-native animation using GSAP. No React, no video rendering — animations run live in the browser and are fully controllable via JavaScript API, WebSocket, or REST.

Core Philosophy

• Animations are timelines — sequences of tweens with precise timing
• Timelines are pausable, seekable, reversible at any point
• Control surfaces (API, WebSocket, UI) are decoupled from animation definitions
• CSS transitions and keyframes are not used — GSAP owns all motion

Setup

<!-- CDN — drop into any HTML file -->
<script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/gsap.min.js"></script>

<!-- With ScrollTrigger plugin -->
<script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/ScrollTrigger.min.js"></script>

# npm install
npm install gsap

import { gsap } from "gsap";

Basic Timeline

const tl = gsap.timeline({ paused: true });

tl.to(".box", { x: 200, duration: 0.8, ease: "power2.out" })
  .to(".box", { opacity: 0, duration: 0.4 }, "+=0.2")
  .from(".title", { y: -50, autoAlpha: 0, duration: 0.6 }, "<");

Position parameter shortcuts:

• "+=0.2" — 0.2s after previous tween ends
• "-=0.1" — 0.1s before previous tween ends
• "<" — same start time as previous tween
• "1.5" — absolute 1.5s mark in timeline

Playback Control API

tl.play();             // play forward from current position
tl.pause();            // freeze
tl.resume();           // resume from paused position
tl.reverse();          // play backward from current position
tl.restart();          // jump to start and play
tl.seek(1.5);          // jump to 1.5s (no play)
tl.progress(0.5);      // jump to 50% of total duration
tl.timeScale(2);       // 2× speed
tl.timeScale(0.5);     // half speed

// Read state
tl.time();             // current time in seconds
tl.progress();         // 0–1
tl.duration();         // total duration
tl.isActive();         // true if currently playing