mojs / mojs.github.io

Website for mojs tutorials and documentation

mo · js –

The motion graphics toolbelt for the web.

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, 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 web page, load the latest build from your favorite CDN using a generic script markup:

<!-- unpkg -->
<script src="https://unpkg.com/@mojs/core"></script>

<!-- jsdelivr -->
<script src="https://cdn.jsdelivr.net/npm/@mojs/core"></script>

Then instanciate using:

<script>
  new mojs.Html({
    // ...
  });
</script>

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

• Motion Graphics for the Web
• Bubble Layout
• Sleepy Mole
• Animocons
• Love or Hate Modal
• Mograph
• Word Reveal
• Jump and Squash
• Physical Balls
• Dust Trail
• Bubble Modal
• Bubbles
• Blast (click to see)
• Simple Burst (click to see)
• Dusty Burst (click to see)
• Twitter Fav (click to see)
• Twitter Fav (stars) (click to see)
• Twitter Fav Firework (click to see)
• Simple Ripple (click to see)

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

Contribute

If you want to report a bug or request a new feature/improvement, please read the project contributors guidelines before. Thanks for taking time to contribute.

mojs.github.io's Issues

Navbar not working as expected on mobile device

The navbar is not working as expected on mobile: it is behind the content and can't be reached.
When scrolling down, there's a gap that appear at the bottom.

I'm currently fixing the issue and will push a MR in a few minutes

Use the latest org. scoped package

Update the documentation to use the latest organization scoped package @mojs/core instead of the old mo-js package name.

API: Explain when to use easing function Approximate

Link to docs: https://mojs.github.io/api/easing/approximate.html

Also fix this demo that is broken:
https://codepen.io/sol0mka/pen/LZWRMm?editors=0010

The component MojsInteractive is broken

Get's this error while using the MojsInteractive Vue component:

[Vue warn]: Failed to resolve async component: function () {
  return Promise.all(/*! import() */[__webpack_require__.e(54), __webpack_require__.e(6)]).then(__webpack_require__.bind(null, /*! ./docs/.vuepress/components/MojsInteractive */ "./docs/.vuepress/components/MojsInteractive.vue"));
}
Reason: ReferenceError: global is not defined

Probably related to this issue in VuePress or this issue in Vue Prism Editor

Missing comma

var burst = new Burst({
    radius:   { 15: 50 }
    children: {
      fill:   [ 'deeppink', 'cyan', 'orange' ],
  }
});

And it should be mojs.Burst

Problem controlling Mojs Curve Editor

When I click *Open Demo Majos Curve editor It does not open completely, Sidebar affects its full appearance

video

Path Easing example is not working

Page: https://mojs.github.io/api/easing/path-easing.html

Solution: Clone the CodePen and use the CDN version of mojs instead of a dropboxcontent version.

Maybe example with react hooks

Was somebody able to make this thing work with react and functional components? Would be great if somebody could share some ideas.

Small typo in the `Stagger` documentation

https://mojs.github.io/api/utils/stagger.html

not cunstructor!

Fix dead links in API section

Ex at https://mojs.github.io/api/burst/ - link ShapeSwirl API goes to https://mojs.github.io/api/shape-swirl.html. Should go to https://mojs.github.io/api/shape-swirl/

Please add more dead links in comments below.

React.js examples

Would it be possible if you add examples with React.js?

onClick() animations, page fade-in, etc.

Thanks

Cleanup codepens

The codepens often include the source of mojs which should not be the case: all pens need to refer to the minified version of mojs from jsdelivr. In additon, some codepens in the documentation are not properly working or sometimes broken (404).

Translate documentation to Chinese

If not, can I translate a Chinese website for Chinese people to learn? It won't infringe, will it?