mo.js

# Getting started

# Setup mo.js in your project

  • Run npm i @mojs/core OR yarn add @mojs/core

  • Import it import mojs from '@mojs/core'

    Or use the minified CDN version:

    <script src="https://cdn.jsdelivr.net/npm/@mojs/core"></script>

  • Create your animations. What about a bouncy circle?

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

bouncyCircle.play()

Or maybe a loading animation?

const spinner = new mojs.Shape({
  parent:           '#spinner',
  shape:            'circle',
  stroke:           '#FC46AD',
  strokeDasharray:  '125, 125',
  strokeDashoffset: {'0': '-125'},
  strokeWidth:      4,
  fill:             'none',
  left:             '50%',
  top:              '50%',
  rotate:            {'-90': '270'},
  radius:           20,
  isShowStart:      true,
  duration:         2000,
  easing:           'back.in',
})
.then({
  rotate:            {'-90': '270'},
  strokeDashoffset: {'-125': '-250'},
  duration:         3000,
  easing:           'cubic.out',
});

spinner.play();

Go creative!

See the API for more info.

# Usage with Server Side Rendering (SSR)

Note that this is a client-side library, and is not meant to be run on a server. So if you are using a library like Next.js, Gatsby, Nuxt.js or Angular Universal, make sure not to run your MoJS code on the server, just on the client side. How to do that differs from the library you are using. In React based libraries you can use the useEffect hook or a dynamic import (read more here (opens new window)). For Angular Universal you can use Guards (read more about it here (opens new window)). Lastly if you use Vue with Nuxt.js, you will find more info here (opens new window), or info about using the mounted hook here (opens new window).

Also see tutorial on how to use MoJS inside a React app here.

← Shape & ShapeSwirl →