Mo.js – A Complete Motion Graphics Library For The Web

Animation on the web is here to stay as JavaScript is only getting more powerful, and browser support is growing with each passing year.

Most of the animations we’re familiar with focus on the interface: dropdown menus, tabbed buttons, and slideshows are common examples.

But Mo.js is different. This is a JavaScript library made for custom motion graphics to help designers create amazing animated features that go beyond simple UI/UX tricks.

Read Also: 8 JavaScript Libraries to Animate SVG

If you visit the Mo.js homepage you’ll find the full documentation along with a great tutorial for beginners.

Note this library is pretty tough to work with. You should be familiar with basic frontend coding before tinkering with Mo.js on your own. However, there is a lot you can pick up just by studying the live demos and digging into some of the source code.

Have a peek at the main GitHub repo if you wanna see some demos in action.

There’s a whole list of links from CodePen all featuring live Mo.js demos. These include fullscreen page animation loaders, click-to-animate microinteractions, and tons of shape manipulations.

For example, this pen creates a pretty crazy micro interaction from user input(just click anywhere inside the pen to see it).

Some of these pens may feel over the top but these aren’t just JS animations. They’re really like works of art.

These demos prove just how far we’ve come with animation on the web. The fact that anyone can create these effects using only front-end code is simply incredible.

If you want to see more from Mo.js have a look over the demos on GitHub. You might also like this tutorial teaching how to work with the Mo.js library step-by-step.

Either way, this is one of my favorite animation libraries to date. It offers so much control that you just cannot find anywhere else. And it’s helping to bring microinteractions from mobile apps into web design.