mo.js — Motion Graphics Toolbelt for the Web

Introduction

mo.js is a motion graphics library built for the web. Unlike traditional animation libraries that tween CSS properties, mo.js provides declarative primitives for shapes, bursts, stagger effects, and custom path animations. It was designed for crafting rich, interactive motion experiences.

What mo.js Does

• Creates shape animations (circles, rects, polygons, lines, crosses) with property tweens
• Generates particle burst effects with configurable count, radius, and child shapes
• Provides a timeline system for sequencing and orchestrating multiple animations
• Supports custom easing curves and path-based motion along SVG paths
• Delivers stagger effects for animating groups of elements with offset timing

Architecture Overview

mo.js uses a module-based architecture where each animation primitive (Shape, Burst, Tween, Timeline) is an independent unit. Shapes render to SVG elements and expose property deltas (from/to values). The internal clock runs on requestAnimationFrame, and modules can be composed into Timelines for orchestration. Burst decomposes into child Shape instances arranged radially.

Self-Hosting & Configuration

• Install via npm or load the UMD bundle from a CDN
• Import @mojs/core for the main library
• Use the mo.js editor (separate package) for visual curve editing
• Set isShowEnd: false to hide shapes after animation completes
• Chain .then({...}) on any module to create multi-step sequences

Key Features

• Declarative delta syntax: { 0: 100 } means animate from 0 to 100
• Built-in Shape primitives render directly to SVG without external assets
• Burst module creates particle-like effects with minimal code
• Path easing lets you define motion curves as SVG path strings
• Retina-ready rendering with crisp SVG output on all screen densities

Comparison with Similar Tools

• anime.js — general-purpose CSS/SVG tween library; mo.js focuses on shape and burst primitives
• GSAP — comprehensive timeline engine with broader scope; mo.js is more opinionated toward motion graphics
• Framer Motion — React-specific with layout animations; mo.js is framework-agnostic
• Lottie — plays After Effects exports; mo.js creates animations programmatically

FAQ

Q: Can I use mo.js with React? A: Yes. Create animation instances in useEffect and call .play(). Clean up is not required as mo.js manages its own lifecycle.

Q: Is mo.js actively maintained? A: The library is stable. The community maintains it under the @mojs organization with periodic updates.

Q: How do I chain animations? A: Use .then({...}) to append a new state, or compose multiple modules into a mojs.Timeline.

Q: Does mo.js support scroll-triggered animations? A: Not natively. Use an Intersection Observer or a scroll library to call .play() when elements enter the viewport.

Sources

• https://github.com/mojs/mojs
• https://mojs.github.io/