Skip to content
Get packs

mo · js

A JavaScript library for building motion graphics and animations on web pages.

GitHub Download v1.7.1
Stars
18.9k
Forks
898
Licence
MIT
Language
CoffeeScript
Last update
3 months ago
Type
Library

What it is

mo·js is a JavaScript library for creating motion graphics on websites, such as animated shapes, bursts, and swirls. It uses a declarative API, meaning you describe the animation you want in configuration objects rather than writing each frame by hand. It is typically added to a site through npm or a CDN and is aimed at making visual effects that enhance the user experience.

  • Add an animated burst effect when a user clicks a button or likes a post
  • Animate HTML elements on a page using the built-in Html component
  • Create animated SVG shapes and swirls using the shape and swirl components
  • Stagger a set of elements so they animate one after another

Great for

  • Front-end developers who want decorative animated effects like bursts, shapes, or icon animations
  • Developers who already use a bundler such as webpack or rollup and want to install via npm
  • Designers working with a developer who wants more customizable motion on the web
  • Teams who want to add small visual flourishes to a page without a large animation framework

Not ideal for

  • People who need a no-code tool, since mo·js requires writing JavaScript
  • Projects that must support older or unlisted browsers, since the README lists minimum versions and says others are not extensively tested
  • Developers looking for a general-purpose UI framework, since the README describes it as a motion library
Step-by-step guide: how to use mo · jsInstall, first run, examples, tips and FAQs
mo · js alternativesAnime.js vs mo · jsmo · js vs Motionmo · js vs Rough.jsbarba.js vs mo · jsG2 vs mo · jsmo · js vs SVGR

How to get it

  1. 1

    Install with a package manager

    You'll need: A JavaScript bundler such as webpack or rollup (optional; a CDN script tag also works)

    Install with npm

    npm install @mojs/core

    Install with yarn

    yarn add @mojs/core
  2. 2

    Run it

    • Install the package with npm or yarn, or include the unpkg or jsDelivr script tag in your HTML.
    • Import mojs in your code with: import mojs from '@mojs/core';
    • Create an animation, for example: new mojs.Html({ /* options */ }); using the options described in the API documentation.
    • Open the page in a supported browser to see the animation.
  3. 3

    Get the most out of it

    • Use a bundler to get output compression, code splitting, and tree shaking, as the README recommends.
    • Follow the 'Get started' tutorial on the official site to learn the basic structure.
    • Explore the companion tools listed in the README: @mojs/player, @mojs/curve-editor, and @mojs/timeline-editor.
    • Study the showcase examples linked in the README to see how the components are combined.

Downloads

Source code (.zip)main branch · straight from GitHubRelease v1.7.1Release notes and sourceOfficial website & docsmojs.github.io

Strengths

  • The README describes a declarative API that gives fine control over animation.
  • Ships with built-in components such as html, shape, swirl, burst, and stagger to start quickly.
  • Installable via npm or a CDN, and the README notes support for bundler optimizations like tree shaking.

Trade-offs

  • The README lists specific browser minimums (for example Chrome 49+, Safari 8+) and says other browsers are not extensively tested.
  • The README does not document its own learning curve; learning resources are largely external tutorials and a separate API documentation site.
  • The project's primary language is CoffeeScript per repository metadata, which may matter if you plan to read or modify the source.

How it compares

ProjectStarsTypeLevelUpdatedBest for
mojs (this)18.9kLibraryintermediate3 months agoFront-end developers who want decorative animated effects like bursts, shapes, or icon animations
G212.7kLibraryintermediate9 days agoFront-end developers adding charts to a web dashboard
anime74.2kLibrarybeginner3 months agoFront-end developers adding motion to websites or web apps
motion34.8kLibraryintermediate4 days agoReact developers who want to animate components with a simple API
rough21.3kLibraryintermediate2.3 years agoWeb developers who want a casual, hand-drawn look for diagrams or illustrations
barba13kLibraryintermediate1.9 years agoDevelopers adding animated transitions to an existing multi-page website

Stats synced from GitHub. The assessment above was drafted with AI from the project's README on 2026-10-29 and may miss recent changes — check the README before relying on a command. MIT licence: free to use, modify and distribute, including commercially, as long as you keep the copyright notice.