How to use MoJS with React

Creating beautiful animations is one of the most difficult task for a Frontend developer. The solution to this problem is to use some super easy to use Library like MoJS. In this article we are going to learn how to use MoJS with React to create super awesome animations.

What is MoJS ?

MoJS is nothing but a JavaScript based library which is used to create cool animations. The reason why MoJS is so popular is that because it is super fast, have retina ready capability and open source.

MoJS provides full control to developer to control the animation in any way they want due to that doors for creativity also opens for creative people. MoJS have some built in components to start animations and apart from that you can also create custom animations.

Use MoJS with React

To use MoJS with React we need to install the package first.

npm i @mojs/core --save

After the installation we need to import our mojs in our file.

import mojs from '@mojs/core'

For displaying the animation we gonna need an empty div.

 render() {
    return <div id="test" />;
  }

In the componentDidMount we can put our animation code.

  componentDidMount() {
    new mojs.Shape({
      parent: "#test",
      shape: "circle",
      fill: { "#F64040": "#FC46AD" },
      radius: { 20: 80 },
      duration: 2000,
      isYoyo: true,
      isShowStart: true,
      easing: "elastic.inout",
      repeat: 1
    });
  }

Our full component will gonna look like this

import React, { Component } from "react";
import mojs from "@mojs/core";
import "./styles.css";

export default class App extends Component {
  componentDidMount() {
    new mojs.Shape({
      parent: "#test",
      shape: "circle",
      fill: { "#F64040": "#FC46AD" },
      radius: { 20: 80 },
      duration: 2000,
      isYoyo: true,
      isShowStart: true,
      easing: "elastic.inout",
      repeat: 1
    });
  }
  render() {
    return <div id="test" />;
  }
}

You will be able to see this UI in your webpage now.

Now you will gonna notice its not showing the animations yet. To show the animations we need to trigger play function of the animation.

We can store our animation in a variable.

Like this

  const animation = new mojs.Shape({
      parent: "#test",
      shape: "circle",
      fill: { "#F64040": "#FC46AD" },
      radius: { 20: 80 },
      duration: 2000,
      isYoyo: true,
      isShowStart: true,
      easing: "elastic.inout",
      repeat: 1
    });

After that we can simple use play or replay function.

animation.play();

Our updated component will gonna look like this.

import React, { Component } from "react";
import mojs from "@mojs/core";
import "./styles.css";

export default class App extends Component {
  componentDidMount() {
    const animation = new mojs.Shape({
      parent: "#test",
      shape: "circle",
      fill: { "#F64040": "#FC46AD" },
      radius: { 20: 80 },
      duration: 2000,
      isYoyo: true,
      isShowStart: true,
      easing: "elastic.inout",
      repeat: 1
    });
    animation.play();
  }
  render() {
    return <div id="test" />;
  }
}

That’s the smallest example of how to use MoJS with React. Its upto you to try all animations or maybe create custom animations on your own.

I hope you have learned how to use MoJS with React feel free to comment.

Top 5 animation libraries for React in 2020