Use Mo.js and give motion to your code.

Photo by Dlanor S on Unsplash

Who doesn’t like animations on a website? Well, I do. Wouldn’t it be great if you could also use animations to give life to your website? Let’s check out the tutorial on how to use Mo.js


Step 1: Go to codepen.io. I am not promoting codepen. It’s just that it’s easy to start away testing your code without setting up a very complex environment.

Step 2: Click on the gear icon on the top right. In the JS tab include these links: 
https://cdn.jsdelivr.net/mojs/0.265.6/mo.min.js
https://cdn.jsdelivr.net/mojs-player/0.43.15/mojs-player.min.js

Choose your JS Preprocessor as Babel. Then save and close. That’s it. Simple and sweet !

Step 3: In the CSS section keep a nice dark background.

body{
background: #222;
}

Step 4: The fun part begins. If you read the documentation there are various shapes you can play with. Let’s begin with few.

Create a new constant called Burst. You may name it any thing that’s all up to you. Then use new mojs.Burst to create a burst effect. 
The properties that you see are mentioned in the documentation of mojs website.

const Burst = new mojs.Burst({
radius: {0:200},
count: 20,
children: {
shape: 'cross',
stroke: 'teal',
strokeWidth: {6:0},
angle: {360: 0},
duration: 3000,
radius: {30:5},
}
});

The first radius that we see above is the range of the effect. count is the number of particles that would burst.

We will use the children properties to control the properties of the particle. By default the particle is a circle but I mentioned the shape of particle to be a cross and not a cross. 
You may check more in the documentation to add more shapes and more functionality to your object.

Step 5: The timeline. We would create a new instance called timeline using the new keyword. Why? To add many more instances to .add() and also to repeat the animation. Then add the play method and you can see your code animating.

const timeline = new mojs.Timeline({
repeat: 999
})
.add(Burst)
.play();

Step 6: That’s all folks! Follow the link to see it working: Mojs animation

What I explained you above is just the basic use of Mo.js. I didn’t want it to be complicated for beginners so kept it quite simple. I would suggest to keep experimenting and learn more. It’s a great product.

I created one here.

Happy coding!