movy.js is a client-side JS animation engine for creating explanatory videos.
movy.js is an intuitive animation engine for creating explanatory videos.
Make sure you have node.js (version >= 12) installed on your computer.
npm i movy@latest -g
movy
to open a list of examples (example animations are located in the movy/examples
folder):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.
xxx.webm
To add new objects, you can use mo.add___()
. For example:
Method | Comment | Preview |
---|---|---|
mo.addCircle() |
Add a circle | |
mo.addRect() |
Add a rect | |
mo.addTriangle() |
Add a triangle | |
... | ... | ... |
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
Methods | Comment | Preview |
---|---|---|
|
Set X and Y coordinates to be (0.5, 0.2) . Note that movy.js uses Cartesian coordinates for 2D objects (y-axis pointing upwards). |
|
|
position specifies the circle coordinates similar to x , y , z parameters. However it takes an array of numbers. |
|
|
Rotate the rect along the Z axis by π/4. | |
|
Note that movy.js internally uses 3D coordinates. You can also rotate any 2D object along X and Y axis by rx and ry parameters. |
|
|
Scale the circle by 0.5 (half size). |
|
|
Create an ellipse by scaling along X and Y axis differently. | |
|
You can pass hex code, e.g. "#3498db" to specify object color. Alternatively, you can use X11 color name, e.g. "blue" . |
Besides, you can use mo.add___Outline()
methods to create outlined shapes. For example:
Method | Comment | Preview |
---|---|---|
mo.addCircleOutline() |
Add circle outline. | |
mo.addRectOutline() |
Add rect outline. | |
mo.addTriangleOutline() |
Add triangle outline. | |
... | ... | ... |
All named arguments mentioned in the previous section still works for these outlined shapes. Moreover, you can pass
Methods | Comment | Preview |
---|---|---|
|
Set the line width of the circle outline to 0.3 . |
|
|
Instead of sx and sy to scale a shape, you can alternatively use width and height to specify the size of a shape. This method will not scale the line strokes unevenly. |
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
.
|
|
||
|
|
||
|
|
All animations can take following parameters for customization.
|
t parameter specifies when the animation should be started. For example, t: 1 specifies that the animation should start at 1 second. t: ' specifies that the animation should begin at the same time of the previous animation. |
|
Set the animation duration to 2 seconds. |
|
ease parameter specifies the easing curve used for the animation. Different animations are pre-configured with different default easing functions. However, you can overwrite this to completely change the nature of your animation. For more information, please refer to gsap / Eases |
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.
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();