Repository files navigation

The motion graphics toolbelt for the web.

mo · js is a javascript motion graphics library that is afast, 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 providesbuilt-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 createdelightful animations precisely.

Mojs is published on theNPM 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 withjavascript bundlers likewebpack orrollup.

# npmnpm install @mojs/core# yarnyarn add @mojs/core

Thenimport it like any other module inside your build:

importmojsfrom'@mojs/core';newmojs.Html({// ...});

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

To rapidlyinclude the minified production file in your web page, load the latest build from your favorite CDN using a generic script markup:

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

Then instanciate using:

<script>newmojs.Html({// ...});</script>

By default, if no one is specified, the CDN will automatically target the@latest version of mojs and load theUMD build fromdist/mo.umd.js.

The base documentation you need to get started with mojs.

• Get started
• @mojs/player
• @mojs/curve-editor
• @mojs/timeline-editor

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)

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

• API documentation
• Github
• Slack workspace(Not in the workspace yet? Use theinvite link 🔓)

• 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)

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

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

Since 2019, mojs ecosystem ismaintained and developed by:

• Xavier Foucrier
• Jonas Sandstedt

If you want to report a bug or request a new feature/improvement, pleaseread the projectcontributors guidelines before. Thanks for taking time to contribute.