Mo.js — Motion Graphics Library for the Web

Introduction

Mo.js is a motion graphics toolbelt for the web that focuses on producing crisp, smooth animations for UI micro-interactions. It offers shape primitives, burst effects, stagger patterns, and a timeline system designed specifically for motion design workflows.

What Mo.js Does

• Animates built-in shape primitives (circle, rect, polygon, cross, zigzag) with property tweening
• Creates particle burst effects with configurable child count, radius, and randomness
• Staggers animations across arrays of elements with custom delay curves
• Provides a timeline to sequence and overlap multiple animations
• Renders to SVG with device-pixel-ratio awareness for retina displays

Architecture Overview

Mo.js uses a module-per-concern design. The Shape module renders SVG elements and interpolates their attributes. The Burst module composes multiple child shapes in a radial pattern. The Tween engine processes property deltas through customizable easing curves. A global Timeline coordinates playback across modules, supporting pause, seek, and repeat. All rendering targets SVG for resolution independence.

Self-Hosting & Configuration

• Install via npm as @mojs/core or load from CDN
• Import individual modules (Shape, Burst, Html, Timeline) for smaller bundles
• Configure default easing, duration, and playback direction per instance
• Use the player tool (@mojs/player) for a GUI timeline scrubber during development
• No external dependencies; works in any modern browser environment

Key Features

• Burst effects generate complex particle explosions with a single declaration
• Custom easing via path-based curves for unique motion character
• HTML module animates DOM element properties (transforms, opacity) directly
• Additive and property-map animations for layered motion effects
• Retina-ready SVG output with no blurry edges at any scale

Comparison with Similar Tools

• GSAP — broader scope, timeline-first; Mo.js excels at shape-based motion graphics
• Anime.js — lightweight general tweening; Mo.js has richer built-in shape primitives
• Lottie — plays After Effects exports; Mo.js creates animations programmatically
• Framer Motion — React-specific declarative API; Mo.js is framework-agnostic
• CSS Keyframes — simple but lacks burst effects and custom easing paths

FAQ

Q: Is Mo.js still maintained? A: The community maintains it under the @mojs organization. Core functionality is stable and production-ready.

Q: Can Mo.js animate DOM elements? A: Yes. The Html module tweens transforms, opacity, and other CSS properties on any DOM element.

Q: Does it support SVG path morphing? A: Not natively. For path morphing, pair Mo.js with a dedicated SVG morph library or GSAP MorphSVG.

Q: How large is the bundle? A: The full @mojs/core package is approximately 30KB gzipped. Individual modules can be imported separately.

Sources

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