Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/legomushroom/mojs

The motion graphics toolbelt for the web
https://github.com/legomushroom/mojs

animation burst design es6 graphics javascript library mo-js modern mojs motion motion-graphics shape svg swirl timeline toolbelt web webpack

Last synced: 3 months ago
JSON representation

The motion graphics toolbelt for the web

Host: GitHub
URL: https://github.com/legomushroom/mojs
Owner: mojs
License: mit
Created: 2014-06-26T08:49:14.000Z (over 10 years ago)
Default Branch: main
Last Pushed: 2024-04-29T20:48:24.000Z (6 months ago)
Last Synced: 2024-05-29T03:55:58.534Z (5 months ago)
Topics: animation, burst, design, es6, graphics, javascript, library, mo-js, modern, mojs, motion, motion-graphics, shape, svg, swirl, timeline, toolbelt, web, webpack
Language: CoffeeScript
Homepage: https://mojs.github.io
Size: 134 MB
Stars: 18,282
Watchers: 394
Forks: 893
Open Issues: 37
Metadata Files:
- Readme: README.md
- Contributing: .github/CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE.md
- Code of conduct: .github/CODE_OF_CONDUCT.md

Awesome Lists containing this project

awesome-frontend-libraries - mo-js

README

        # mo · js – [![npm](https://img.shields.io/npm/v/@mojs/core.svg)](https://www.npmjs.com/package/@mojs/core) [![ci](https://img.shields.io/github/actions/workflow/status/mojs/mojs/ci.yml?branch=main)](https://github.com/mojs/mojs/actions?query=workflow:"CI") [![Coverage Status](https://coveralls.io/repos/mojs/mojs/badge.svg?branch=main)](https://coveralls.io/r/mojs/mojs?branch=main) [![Slack](https://img.shields.io/badge/style-join-ff69b4.svg?label=slack)](https://join.slack.com/t/mojs/shared_invite/zt-dlyxhupt-VR7eV2uwCnvu3Cx~Yc_L9Q)

The motion graphics toolbelt for the web.

[![mo · js](logo.svg "mo · js")](https://mojs.github.io/)

## 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`.

```sh

# npm

npm install @mojs/core

# yarn

yarn add @mojs/core

```

Then **import it like any other module** inside your build:

```js

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:

```html

```

Then instanciate using:

```html

  new mojs.Html({

    // ...

  });

```

> 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](https://mojs.github.io/tutorials/getting-started.html)

- [@mojs/player](https://github.com/mojs/mojs-player/)

- [@mojs/curve-editor](https://github.com/mojs/mojs-curve-editor/)

- [@mojs/timeline-editor](https://github.com/mojs/mojs-timeline-editor/)

## Learn

Discover the amazing things that mojs can do!

- [Shape & Swirl](https://mojs.github.io/tutorials/shape-swirl/) _(Tutorial)_

- [Burst](https://mojs.github.io/tutorials/burst/) _(Tutorial)_

- [Icon animations powered by mo.js](https://tympanus.net/codrops/2016/02/23/icon-animations-powered-by-mo-js/) _(Codrops tutorial)_

- [An Introduction to mo.js](https://css-tricks.com/introduction-mo-js/) _(CSS tricks tutorial)_

- [Playing with @mojs/player and @mojs/curve-editor](https://vimeo.com/185587462) _(Vimeo video)_

- [Web animations and mo.js](https://www.youtube.com/watch?v=yRxWa8lXasI) _(Youtube video)_

## Developer

Get technical informations, open an issue/pull request or join the (amazing) community!

- [API documentation](https://mojs.github.io/api/)

- [Github](https://github.com/mojs/mojs/)

- [Slack workspace](https://mojs.slack.com) _(Not in the workspace yet? Use the [invite link](https://join.slack.com/t/mojs/shared_invite/zt-dlyxhupt-VR7eV2uwCnvu3Cx~Yc_L9Q) 🔓)_

## Showcase

- [Motion Graphics for the Web](https://codepen.io/sol0mka/full/ogOYJj/)

- [Bubble Layout](https://codepen.io/sol0mka/full/yNOage/)

- [Sleepy Mole](https://codepen.io/sol0mka/full/OyzBXR/)

- [Animocons](https://tympanus.net/Development/Animocons/)

- [Love or Hate Modal](https://codepen.io/sol0mka/full/812699ce32c9a7aeb70c9384b32a533a/)

- [Mograph](https://codepen.io/sol0mka/full/39427561a8a0b15d7896480a7d96d3d1/)

- [Word Reveal](https://codepen.io/sol0mka/full/c94452fb65dbf676b0ae8a12d4267473/)

- [Jump and Squash](https://codepen.io/sol0mka/full/pEagoL/)

- [Physical Balls](https://codepen.io/sol0mka/full/7315f4364360ec87a6655d33782702fe/)

- [Dust Trail](https://codepen.io/sol0mka/full/633e6aa52d40691cca2f2cda91650bae/)

- [Bubble Modal](https://codepen.io/sol0mka/full/3c49de2d7d0ca3e92bf5db5bf7a2687d/)

- [Bubbles](https://codepen.io/sol0mka/full/2ef10ed42ff535182c31cd1dbb81e453/)

- [Blast](https://codepen.io/sol0mka/full/699cfc8716a13e0e1c15105af2b6fb95/) _(click to see)_

- [Simple Burst](https://codepen.io/sol0mka/full/6caf96461207a5caa9226fbd2631569d/) _(click to see)_

- [Dusty Burst](https://codepen.io/sol0mka/full/03e9d8f2fbf886aa1505c61c81d782a0/) _(click to see)_

- [Twitter Fav](https://codepen.io/sol0mka/full/wWdRLk/) _(click to see)_

- [Twitter Fav (stars)](https://codepen.io/sol0mka/full/PzmAym/) _(click to see)_

- [Twitter Fav Firework](https://codepen.io/sol0mka/full/xOAKKA/) _(click to see)_

- [Simple Ripple](https://codepen.io/sol0mka/full/XKdWJg/) _(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](https://github.com/xavierfoucrier)

- [Jonas Sandstedt](https://github.com/Sandstedt)

## Contribute

If you want to report a bug or request a new feature/improvement, please **read the project [contributors guidelines](.github/CONTRIBUTING.md) before**. Thanks for taking time to contribute.