movy.js is an easy-to-use animation engine based on three.js and gsap.
Getting Started
Make sure you have node.js (version >= 12) installed on your computer.
You can install movy.js simply by:
npm i -g movy
To run movy.js, enter the following command in your terminal:
movy
It will show a list of example animations in the examples
folder.
To create your own animation, you can start a new javascript file. Following is a simple hello-world example:
import * as mo from "movy";
const t = mo
.addText("movy.js is simple!", {
scale: 1,
color: "yellow",
})
.reveal();
mo.run(); // Should call this method at the end!!!
Save the file as hello.js
. To open the animation in the browser, you can
movy hello.js
Note that changing the source code will automatically refresh the browser content.
Add objects into the scene
To add new objects into the scene, you can use mo.add___()
methods. For example:
Method | Comment | Preview |
---|---|---|
mo.addCircle() |
Add a circle | ![]() |
mo.addRect() |
Add a rect | ![]() |
mo.addTriangle() |
Add a triangle | ![]() |
... | ... | ... |
Customize objects
All methods above can take extra named arguments for object customization. For example, to set the object color, you can use
mo.addTriangle({ color: "yellow", scale: 0.5 });
This will create a half-size yellow triangle.
Furthermore, you can pass
More shapes
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
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
.
|
![]() |
|
![]() |
|
![]() |
|
![]() |
|
![]() |
|
![]() |
Customize animations
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. t: '+=1' specifies that the animation should starts 1 second after all previous animations finish. movy.js internally uses gsap . For more information, please refer to Understanding the Position Parameter. |
|
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.
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();