mojs / mojs-website

Website for 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-website's Issues

A typo error in tutorials/shape: ShapeSwirl

Look at the second p, there is a cute camelCase shapeSwirl. Should the leading 's' become uppercase?

BTW, is there a repo for tutorials?

Links doesn't work good on Android

When a Android user clicks an link in Chrome (using react component react-tappable (used in UniteLink) ), this error occurs:

Deferred long-running timer task(s) to improve scrolling smoothness. See crbug.com/574343.

Works when long clicking a link, not on a single tap. Eg only works after the underline animation is complete.

I guess there's a timeout wating for the animation to complete before sending the user to the URL.

Small error in the tutorials: Shape 'curve' points

Working in the tutorials, found what I think is an error- the Shape example for curve is using an object for points:

var curve = new mojs.Shape({ shape: 'curve', points: 11, radius: 25, radiusY: 50, left: '50%', fill: 'none', stroke: 'deeppink', isShowStart: true, });

But I don't think the points do anything for the curve (that I've seen). If they do, it would be good to clarify in the text below because it's a little confusing.

Thank you!

Wrong / no route for favicons

Error on all favicons results in no favicons:
"/favicons/apple-icon-76x76.png". Make sure you have <Route path="/favicons/apple-icon-76x76.png"> somewhere in your routes

Move website to some static site generator platform like Hexo or Gatsby

The mojs.io website need an upgrade in the perfect case with the ability for everyone to make change thru github PR.

Some header links download files instead of navigating.

In the site header...

Clicking "APIs", "Demos", or "Contribute" downloads an HTML file instead of navigating to the page. This is happing for me on multiple desktop browsers.

I think it might have something to do with the download="false" attribute that I'm seeing on the links. I'm thinking "false" is being interpreted as a filename string instead of a boolean. Some docs suggest that might be the case.

It looks like the code producing this attribute is on the dev branch (not master), so I'm not sure where to contribute a fix. I also had some trouble getting the site to run locally so I don't have a PR for you. :(

Header overlaps page content on scroll

It seems that React-headroom isn't working as expected. Gif attached for reference

Gifs Routing

In the Tutorial section for Shapes and Swirl you'll notice that the Gif Components don't render their images under 'Click Here To See The Gifs'(located right above the UI Examples). I believe it likely has to do with the Router you have setup. I was going to take a look and try to correct it myself, but I'm not familiar with CoffeeScript JSX and I feel that it's probably a minor fix.

Excellent work so far! Greatly looking forward to this library!