Cool Animations with mo.js

Published: 26/07/2019 Categories: Coding, Javascript Leave a comment

An Introduction

Have you ever needed to add a cool animation or an animated loading spinner to your website? If yes, then mo.js is for you.

A versatile motion graphics library, which is going to make your life so much easier!

In their own words

mo.js is a javascript motion graphics library that is a fast, retina ready, modular and open source. In comparison to other libraries, it have a different syntax and code animation structure approach. The declarative API provides you a complete control over the animation, making it customizable with ease.”

So in order to get started you only need to create shape instances in JavaScript and bring them to life using mo.js Timeline.


A Simple Burst

In the following pen we created a series of cross, zigzag, line and circle objects and used the Burst method, which makes the combination explode, like the name implies.

See the Pen A Simple Burst by cheBandoneon (@cheBandoneon) on CodePen.0


A Dusty Hamburger

We can take this logic and apply it to enrich a hamburger menu button animation. We create a cloud simulation Burst animation by adding two duration values to the animation, so half the dots will end before the other half. We user pathScale and degreeShift to create some randomness, and our animation is good to go. Instead of making the Timeline play immediately like the previous example, here we bind a click event to the button and trigger the animation only when the button is clicked.

See the Pen Hamburger by cheBandoneon (@cheBandoneon) on CodePen.0


Animating a Bouncing Ball

Now that we got some basics, we can try something that requires more coordination. The next pen is a bouncing ball.

See the Pen Football Spin by cheBandoneon (@cheBandoneon) on CodePen.0


The ball is nothing more than a div containing an svg. With mo.js we change the Y-axis, the X-scaling and the rotation of the ball element. The hard part is to orchestrate the animation so that the scaling happens when the ball is at the lowest position in the Y-axis, thus producing the bouncing effect. To do that we need to use something called MojsCurveEditor, which provides a graphic interface where you can tweak the animation timing to get it exactly how you want it.

For the shadow, we just need to use relatively similar values, to make it grow when the ball is close to the ground, and shrink when the ball is in the air.


Bonus animation: Extravaganza

The library is so fun that you can exaggerate quite easily. Click the follow button and watch what happens.

See the Pen Big Button Effect by cheBandoneon (@cheBandoneon) on CodePen.0


Of course there are many other features in the library that we didn’t talk about, check out the documentation to get full grasp of what the library can do, and there are a lot of pens out there with amazing things to get you inspired.

That’s all for this Friday!