movy

movy.js is an intuitive animation engine for creating explanatory videos.

Getting Started

Make sure you have node.js (version >= 12) installed on your computer.

1. Install movy.js by: npm i movy@latest -g

2. Run movy to open a list of examples (example animations are located in the movy/examples folder):

3. To create a new animation, simply run movy hello.js. It will automatically create a new animation file hello.js (if the file does not exist):

import * as mo from "movy";

mo.addText("Hello, Movy!", {
  scale: 0.8,
  color: "yellow",
}).grow();

Note: Modifying the source code will automatically refresh the browser.

1. Click "Render" button to render the animation to a video file: xxx.webm

Add objects into the scene

To add new objects, you can use mo.add___(). For example:

Customize objects

All methods above can take extra named arguments for customization. For example, to set the object color and scale, you can use

mo.addTriangle({ color: "yellow", scale: 0.5 });

This will create a half-sized yellow triangle.

Furthermore, you can pass

mo.addCircle({
  x: 0.5, 
  y: 0.2
})

mo.addCircle({ 
  position: [0.1, 0.2, 0] 
})

mo.addRect({
  rz: 0.25 * Math.PI,
});

mo.addRect({
  rx: 0.5,
  ry: 1
})

mo.addCircle({
  scale: 0.5,
})

mo.addCircle({
  sx: 1.5,
  sy: 0.5
})

mo.addCircle({
  color: "#3498db"
})

More shapes

Besides, you can use mo.add___Outline() methods to create outlined shapes. For example:

All named arguments mentioned in the previous section still works for these outlined shapes. Moreover, you can pass

mo.addCircleOutline({
  lineWidth: 0.3,
})

mo.addRectOutline({
  width: 1.5,
  height: 1,
})

Add animations

For each added scene object, you can call, e.g. obj.fadeIn(), obj.reveal(), obj.grow(), etc. to add different animations.

const rect = mo.addRect();

rect.grow();  // This will add grow animation to the circle object.

The following table lists the common animations supported by movy.js.

rect.fadeIn()

rect.wipeIn()

rect.grow()

rect.rotateIn()

rect.reveal()

rect.shake2D()

Customize animations

All animations can take following parameters for customization.

rect.fadeIn({t: 1})

rect.fadeIn({duration: 2})

rect.fadeIn({ease: 'linear'})

Note that some animation can take extra parameters. For example, you can pass { direction: 'down' } in obj.reveal() to specify the direction from which the object reveals.

Combining animations

By combining existing animations with some parameter tweaking, we can derive more complicated and beautiful animations.

mo.addRectOutline()
  .reveal()
  .moveTo({ rz: Math.PI * 4, duration: 2 })
  .fadeOut();