sanisoclem / motion-canvas

Visualize Your Ideas With Code

Motion Canvas

Motion Canvas is two things:

• A TypeScript library that uses generators to program animations.
• An editor providing a real-time preview of said animations.

It's a specialized tool designed to create informative vector animations and synchronize them with voice-overs.

Aside from providing the preview, the editor allows you to edit certain aspects of the animation which could otherwise be tedious.

Using Motion Canvas

Check out our getting started guide to learn how to use Motion Canvas.

Developing Motion Canvas locally

The project is maintained as one monorepo containing the following packages:

Name	Description
2d	The default renderer for 2D motion graphics
core	All logic related to running and rendering animations.
create	A package for bootstrapping new projects.
docs	Our documentation website.
e2e	End-to-end tests.
examples	Animation examples used in documentation.
internal	Internal helpers used for building the packages.
player	A custom element for displaying animations in a browser.
template	A template project included for developer's convenience.
ui	The user interface used for editing.
vite-plugin	A plugin for Vite used for developing and bundling animations.

After cloning the repo, run npm install in the root of the project to install all necessary dependencies. Then run npx lerna run build to build all the packages.

Developing Core & 2D

When developing the core, execute both npm run core:dev and npm run template:dev.

This will pick up any changes you make to the core package, automatically rebuild the template project and refresh the page.

Similarly, when developing the 2D package, execute npm run 2d:dev and npm run template:dev.

Developing UI

If you want to develop the UI, first build the template project by running: npm run template:build. Then execute npm run ui:dev.

Developing Player

Like with UI, to develop the player, first build the template: npm run template:build. Then, start npm run player:dev.

Installing a local version of Motion Canvas in a project

It can be useful to install a local version of Motion Canvas in a standalone project. For example, when you want to use your own fork with some custom-made features to create your animations.

Let's assume the following project structure:

projects/
├── motion-canvas/ <- your local monorepo
└── my-project/ <- a bootstrapped project
    └── package.json

You can link the local packages from the monorepo by updating the package.json of your project. Simply replace the version with a file: followed by a relative path to the package you want to link:

  "dependencies": {
-   "@motion-canvas/core": "^3.11.0",
+   "@motion-canvas/core": "file:../motion-canvas/packages/core",
    // ...
  },

Then run npm install in to apply the changes and that's it.

You can use the same technique to test out any custom package you're working on.

Contributing

Read through our Contribution Guide to learn how you can help make Motion Canvas better.