Skip to content
Get packs

Motion Canvas

A TypeScript library and live-preview editor for making animated vector explainers synced to voice-overs.

GitHub Download v3.17.2
Stars
19.6k
Forks
880
Licence
MIT
Language
TypeScript
Last update
4 months ago
Type
Framework

What it is

Motion Canvas lets you write animations in TypeScript, using generator functions to describe the sequence of steps. It comes with an editor that previews the animation in real time and lets you tweak some properties without touching code. It is aimed at building informative vector animations, such as explainer videos, and lining them up with narration.

  • Animate a vector diagram that appears step by step in sync with a recorded voice-over
  • Tweak timing or certain properties of an animation in the editor's live preview
  • Bootstrap a new project using the create package and build animations in it
  • Embed finished animations in a web page using the player package

Great for

  • Developers who are comfortable with TypeScript and want code-driven animation
  • Creators making explainer videos with voice-overs
  • Educators producing diagrams or math-style animations
  • Teams that want animations versioned in a normal code repository

Not ideal for

  • People who want a drag-and-drop timeline editor with no coding, since the main workflow is writing code
  • Users who need heavy 3D or photorealistic rendering, since the README describes it as a tool for vector animations
  • Anyone needing a stable production API, since the README does not state a stability policy and the project is on v3.x
Step-by-step guide: how to use Motion CanvasInstall, first run, examples, tips and FAQs
Manim vs Motion Canvas

How to get it

  1. 1

    Install with a package manager

    You'll need: Node.js · npm

    Clone the repository

    git clone https://github.com/motion-canvas/motion-canvas

    Install dependencies (from the monorepo root)

    npm install

    Build all packages

    npx lerna run build
  2. 2

    Run it

    • Follow the getting started guide at motion-canvas.io/docs/quickstart to bootstrap a project
    • Install dependencies in the project
    • Start the editor to see a live preview of your animation
    • Edit the animation code and watch the preview update
  3. 3

    Get the most out of it

    • Use the create package or the template project as a starting point for new work
    • Link a local fork or custom package into a project using a file: dependency path, as the README describes
    • Use the player package to display animations in a browser page
    • Read the Contribution Guide if you want to modify the packages themselves

Downloads

Source code (.zip)main branch · straight from GitHubRelease v3.17.2Release notes and sourceOfficial website & docsmotion-canvas.io

Strengths

  • Animations are plain TypeScript code, so they can be version-controlled and reused
  • Real-time preview in the editor shortens the edit-and-check loop
  • Built on Vite, and the README lists a Vite plugin for development and bundling

Trade-offs

  • Requires programming knowledge; the editor only covers some aspects of an animation
  • The README is brief and points to external docs for getting started, so onboarding depends on those docs
  • Local development setup involves a monorepo with several packages and manual linking for custom builds

How it compares

ProjectStarsTypeLevelUpdatedBest for
motion-canvas (this)19.6kFrameworkintermediate4 months agoDevelopers who are comfortable with TypeScript and want code-driven animation
manim96kLibraryintermediate2 months agoProgrammers who want to make math or science explainer videos with precise, code-controlled animation
algorithm-visualizer49.4kAppbeginner2.4 years agoStudents learning sorting, searching, or data structures for the first time
G212.7kLibraryintermediate9 days agoFront-end developers adding charts to a web dashboard
nodeppt10.3kDev toolintermediate5.8 years agoDevelopers who prefer writing slides in Markdown over a visual editor
moviepy15.1kLibrarybeginner2 months agoPython developers who want to automate video edits, such as batch trimming or adding titles

Stats synced from GitHub. The assessment above was drafted with AI from the project's README on 2026-10-29 and may miss recent changes — check the README before relying on a command. MIT licence: free to use, modify and distribute, including commercially, as long as you keep the copyright notice.