How to use Motion Canvas: code-driven vector animations

What Motion Canvas is and who it is for

Motion Canvas is two things: a TypeScript library that uses generators to program animations, and an editor that provides a real-time preview of those animations. It is designed to create informative vector animations and synchronize them with voice-overs.

It suits developers who are comfortable with TypeScript, creators making explainer videos with voice-overs, educators producing diagrams or math-style animations, and teams that want animations versioned in a normal code repository. It is not a good fit for people who want a drag-and-drop timeline editor with no coding, or for users who need heavy 3D or photorealistic rendering.

• Code-first: animations are written in TypeScript.
• Editor with live preview, which also lets you edit certain properties without touching code.
• Aimed at vector motion graphics rather than 3D.

Install Motion Canvas from the repository

The source describes a monorepo setup. Prerequisites are Node.js and npm. Clone the repository, install dependencies from the monorepo root, then build all packages.

The README also lists a getting started guide on the project documentation site, which is the best place to bootstrap a new project.

• Prerequisites: Node.js and npm.
• Clone the repository.
• Run npm install from the monorepo root.
• Build all packages with npx lerna run build.

Understand the packages in the monorepo

The project is maintained as one monorepo. The packages you are most likely to touch are core, which handles running and rendering animations, 2d, the default renderer for 2D motion graphics, and ui, the editing interface. The create package bootstraps new projects, and template is a sample project for development.

The vite-plugin package is a Vite plugin used for developing and bundling animations.

• core: all logic for running and rendering animations.
• 2d: the default renderer for 2D motion graphics.
• create: bootstraps new projects.
• template: a simple project included for convenience.
• ui: the user interface used for editing.
• vite-plugin: a Vite plugin for developing and bundling animations.

Run the editor during development

To work on the editor itself, the README says to run the template development command. It starts a Vite server that watches the core, 2d, ui and vite-plugin packages. The template package contains a simple Motion Canvas project you can use while developing.

To develop the player, build the template first, then start the player development script.

Link a local copy of Motion Canvas into your own project

If you want to use a fork or a custom package, you can link local packages into a standalone project. Replace the version of a @motion-canvas package in your project's package.json with a file: path pointing at the package folder.

If you link the ui package, you also need to allow Vite to load external files by setting server.fs.strict to false in vite.config.ts. Then run npm install in your project.

• Replace the version in package.json with file: and a relative path.
• For the ui package, set server.fs.strict to false in vite.config.ts.
• Run npm install in the project to apply the changes.

Contribute to the project

Motion Canvas is open source under the MIT licence. The README points contributors to the Contribution Guide, which explains how to help improve the project.