Guide · Open source
How to use mojs: install, build an animation and tips
Updated · written with AI from the project's own documentation and checked against our catalogue data
mo·js is an open-source JavaScript library for motion graphics on websites, such as animated shapes, bursts and swirls. You describe the animation you want in configuration objects instead of writing each frame by hand. This guide shows how to add it to a page, create a first effect, and decide whether it fits your project.
mo · jsmojs/mojs · ★ 18.9k · MIT Install options & downloads Quick start
- 1Choose an install method. Use npm or yarn if you have a bundler like webpack or rollup. Use a CDN script tag if you want no build step.
- 2Install the package. Run npm install @mojs/core or yarn add @mojs/core in your project folder.
- 3Import mojs. Add import mojs from '@mojs/core' to the file where you want the effect.
- 4Create a component. Call a built-in constructor such as new mojs.Html with a configuration object.
- 5Check browser support. Confirm your target browsers are in the README list or test them, since others are not extensively tested.
- 6Read the docs. Use the API documentation and tutorials to adjust timing and shapes.
What mojs is and who it is for
mo·js is a javascript motion graphics library. The README describes it as fast, retina ready, modular and open source. It uses a declarative API, so you set properties on an object and the library handles the animation.
It suits front-end developers who want decorative effects, designers working with a developer who wants more customizable motion, and teams that want small visual touches without a large animation framework. It is not a no-code tool, since you write JavaScript to use it.
Install mojs with npm, yarn or a CDN
If you use a bundler such as webpack or rollup, install the package from the npm registry. The README says this is the best way to install the library if you are comfortable with javascript bundlers, and that bundlers offer output compression, code splitting and tree shaking.
To skip a build step, load the minified production file from a CDN with a script tag. By default the CDN targets the latest version and loads the UMD build from dist/mo.umd.js.
- Bundler: run the npm or yarn command, then import mojs as a module.
- CDN: add a script tag from unpkg or jsDelivr and use the global mojs object.
# npm
npm install @mojs/core
# yarn
yarn add @mojs/coreCreate your first animation with a declarative object
With a bundler, import mojs and create a component. The README's example uses mojs.Html, and you pass your settings inside the object. Each built-in component is a constructor that takes options.
With a CDN, the same constructor is available on the global mojs object after the script loads.
- Built-in components include html, shape, swirl, burst and stagger.
- The README points to a Shape & Swirl tutorial and a Burst tutorial for more detail.
import mojs from '@mojs/core';
new mojs.Html({
// ...
});Use the CDN approach without a bundler
For a quick test in a plain HTML page, load the script and call the constructor inside a script tag. Use this when you only need a few effects and do not run a build step.
- Load https://unpkg.com/@mojs/core or https://cdn.jsdelivr.net/npm/@mojs/core.
- Create your animation with new mojs.Html and your options.
<script src="https://unpkg.com/@mojs/core"></script>
<script>
new mojs.Html({
// ...
});
</script>Check browser support and learn more
The README lists Chrome 49+, Firefox 70+, Opera 36+, Safari 8+ and Edge 79+. It notes that many other browsers may work but are not extensively tested, so test on the browsers your users run.
For further reading, the project links to a Get started guide, an API documentation page, and several tutorials, including Codrops and CSS-Tricks articles. The project also has a Slack workspace and contribution guidelines.
- API documentation: mojs.github.io/api
- Getting started guide: mojs.github.io/tutorials/getting-started.html
What people use it for
- Animated burst effects when a user clicks a button or favourites an item
- Decorative shapes and swirls that add visual interest to a landing page
- Icon animations that give small feedback on interaction
- Word or element reveal effects using the html component
- Staggered motion across a group of elements
Frequently asked questions
How do I install mojs?
Run npm install @mojs/core or yarn add @mojs/core if you use a bundler. Alternatively, add a script tag from unpkg or jsDelivr and use the global mojs object.
Is mojs free to use?
mo·js is released under the MIT licence, according to the project listing. Check the LICENSE file in the repository for the full terms.
Does mojs require a bundler?
No. A bundler such as webpack or rollup is optional. A CDN script tag also works, which the README shows as a simple option.
Which browsers does mojs support?
The README lists Chrome 49+, Firefox 70+, Opera 36+, Safari 8+ and Edge 79+. It says many other browsers may work but are not extensively tested.
Is mojs a no-code tool?
No. You write JavaScript and configuration objects to create animations. Designers without coding skills will need a developer to implement effects.
How does mojs compare to GSAP, Anime.js or Lottie?
The project lists GSAP, Anime.js, Motion One and Lottie as comparable projects. The README describes mojs as a motion library for decorative effects with a different syntax, so compare them on the effects you need.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
mojs suits front-end developers who want decorative bursts, shapes and icon animations and who are comfortable writing JavaScript. Pick something else if you need a no-code tool, a general UI framework, or support for older or unlisted browsers.
Install options & downloads