Need help with mojs?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

mojs
16.9K Stars 908 Forks MIT License 1.6K Commits 32 Opened issues

Description

The motion graphics toolbelt for the web

Services available

!
?

Need anything else?

Contributors list

mo · js – npm ci Coverage Status Slack

The motion graphics toolbelt for the web.

mo · js

Intro

mo · js is a javascript motion graphics library that is a fast, retina ready, modular and open source. In comparison to other libraries, it has a different syntax and code animation structure approach. The declarative API provides you a complete control over the animation, making it customizable with ease.

The library provides built-in components to start animating from scratch like html, shape, swirl, burst and stagger, but also bring you tools to help craft your animation in a most natural way. Using mojs on your site will enhance the user experience, enrich your content visually and create delightful animations precisely.

Install

Use with a bundler

Mojs is published on the NPM registry and GPR registry, so you can install it through the command line interpreter using your favorite package manager. This is the best way to install the library if you are comfortable with javascript bundlers like

webpack
or
rollup
.
# npm
npm install @mojs/core

yarn

yarn add @mojs/core

Then import it like any other module inside your build:

import mojs from '@mojs/core';

new mojs.Html({ // ... });

Using a bundler has many advantages like output compression, code splitting, tree shaking, etc., so we encourage you to use this kind of tool with mojs.

Use with a CDN

To rapidly include the minified production file in your webpage, load the latest build from your favorite CDN using a generic script markup:



Then instanciate using:


By default, if no one is specified, the CDN will automatically target the @latest version of mojs and load the UMD build from

dist/mo.umd.js
.

User guide

The base documentation you need to get started with mojs. - Get started - @mojs/player - @mojs/curve-editor - @mojs/timeline-editor

Learn

Discover the amazing things that mojs can do! - Shape & Swirl (Tutorial) - Burst (Tutorial) - Icon animations powered by mo.js (Codrops tutorial) - An Introduction to mo.js (CSS tricks tutorial) - Playing with @mojs/player and @mojs/curve-editor (Vimeo video) - Web animations and mo.js (Youtube video)

Developer

Get technical informations, open an issue/pull request or join the (amazing) community! - API documentation - Github - Slack workspace (Not in the workspace yet? Use the invite link 🔓)

Showcase

Browser support

  • Chrome 49+
  • Firefox 70+
  • Opera 36+
  • Safari 8+
  • Edge 79+

Many other browsers may work, but are not extensively tested.

Maintainers

Since 2019, mojs ecosystem is maintained and developed by: - Xavier Foucrier - Jonas Sandstedt

Kudos

Meet some of the outstanding guys that support mojs on Patreon:

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.