Top Related Projects
🎥 Make videos programmatically with React
Render After Effects animations natively on Web, Android and iOS, and React Native. http://airbnb.io/lottie/
Create and animate hand-drawn annotations on a web page
JavaScript library to make drawing animation on SVG
JavaScript 3D Library.
Quick Overview
Motion Canvas is an open-source TypeScript library and visual editor for creating programmatic animations. It allows developers to create complex, interactive animations using code, providing a powerful alternative to traditional video editing software for creating explanatory videos, presentations, and visual content.
Pros
- Offers precise control over animations through code
- Integrates well with existing web development workflows
- Provides a visual editor for easier animation creation and preview
- Supports creating reusable components and animations
Cons
- Steeper learning curve compared to traditional video editing software
- Limited built-in shape and effect options compared to specialized animation tools
- Requires JavaScript/TypeScript knowledge for advanced usage
- Still in active development, so some features may be unstable or change frequently
Code Examples
Creating a simple scene with a circle:
import {makeScene2D, Circle} from '@motion-canvas/2d';
import {createRef} from '@motion-canvas/core';
export default makeScene2D(function* (view) {
const circle = createRef<Circle>();
view.add(
<Circle
ref={circle}
width={200}
height={200}
fill="#3498db"
/>
);
yield* circle().scale(2, 1);
});
Animating text:
import {makeScene2D, Text} from '@motion-canvas/2d';
import {createRef, all} from '@motion-canvas/core';
export default makeScene2D(function* (view) {
const text = createRef<Text>();
view.add(
<Text
ref={text}
text="Hello, Motion Canvas!"
fontSize={60}
/>
);
yield* all(
text().scale(1.5, 1),
text().fill('#e74c3c', 1)
);
});
Creating a custom shape:
import {makeScene2D, Circle, Rect} from '@motion-canvas/2d';
import {createRef, all} from '@motion-canvas/core';
export default makeScene2D(function* (view) {
const group = createRef<Rect>();
view.add(
<Rect ref={group} width={300} height={300}>
<Circle width={100} height={100} fill="#3498db" x={-75} y={-75} />
<Circle width={100} height={100} fill="#e74c3c" x={75} y={75} />
</Rect>
);
yield* all(
group().rotation(360, 2),
group().scale(1.5, 2)
);
});
Getting Started
-
Install Motion Canvas:
npm install @motion-canvas/core @motion-canvas/2d
-
Create a new project:
npx @motion-canvas/create my-animation cd my-animation
-
Start the development server:
npm run dev
-
Edit the
src/scenes/example.tsx
file to create your animation. -
Build the final video:
npm run build
Competitor Comparisons
🎥 Make videos programmatically with React
Pros of Remotion
- More mature and established project with a larger community
- Supports a wider range of output formats, including MP4 and GIF
- Better documentation and more comprehensive examples
Cons of Remotion
- Steeper learning curve, especially for developers new to React
- Requires more setup and configuration compared to Motion Canvas
- Limited built-in animation primitives, often requiring custom implementations
Code Comparison
Motion Canvas:
import {makeScene2D, Rect} from '@motion-canvas/2d';
export default makeScene2D(function* (view) {
const rect = new Rect({width: 100, height: 100, fill: 'red'});
view.add(rect);
yield* rect.scale(2, 1);
});
Remotion:
import {useCurrentFrame, interpolate} from 'remotion';
export const MyAnimation = () => {
const frame = useCurrentFrame();
const scale = interpolate(frame, [0, 60], [1, 2]);
return <div style={{transform: `scale(${scale})`}}>Hello</div>;
};
Both Motion Canvas and Remotion offer powerful tools for creating animations programmatically. Motion Canvas provides a more intuitive API for simple animations, while Remotion leverages React's component-based architecture for complex compositions. The choice between them depends on the project requirements and the developer's familiarity with React.
Render After Effects animations natively on Web, Android and iOS, and React Native. http://airbnb.io/lottie/
Pros of Lottie-web
- Widely adopted and supported across multiple platforms
- Extensive documentation and community resources
- Seamless integration with design tools like Adobe After Effects
Cons of Lottie-web
- Limited to vector animations, lacking support for complex effects
- Performance can be an issue with large or complex animations
- Requires exporting animations from design tools, limiting real-time editing
Code Comparison
Lottie-web:
lottie.loadAnimation({
container: document.getElementById('lottie-container'),
renderer: 'svg',
loop: true,
autoplay: true,
path: 'animation.json'
});
Motion Canvas:
import {makeScene2D, Rect} from '@motion-canvas/2d';
export default makeScene2D(function* (view) {
const rect = new Rect({width: 100, height: 100, fill: 'red'});
view.add(rect);
yield* rect.scale(2, 1);
});
Motion Canvas offers a more programmatic approach to creating animations, allowing for greater flexibility and real-time adjustments. Lottie-web, on the other hand, focuses on rendering pre-designed animations, making it easier to implement existing designs but less adaptable for dynamic content.
Create and animate hand-drawn annotations on a web page
Pros of Rough Notation
- Lightweight and focused on simple annotations
- Easy to integrate into existing web projects
- Supports multiple annotation styles (underline, box, circle, etc.)
Cons of Rough Notation
- Limited to static annotations on web pages
- Lacks advanced animation capabilities
- Not suitable for creating complex motion graphics
Code Comparison
Rough Notation:
import { annotate } from 'rough-notation';
const element = document.querySelector('#myElement');
const annotation = annotate(element, { type: 'underline' });
annotation.show();
Motion Canvas:
import { makeScene2D, Rect } from '@motion-canvas/2d';
export default makeScene2D(function* (view) {
const rect = new Rect({ width: 100, height: 100 });
view.add(rect);
yield* rect.scale(2, 1);
});
Rough Notation is ideal for quick, hand-drawn style annotations on web pages, while Motion Canvas is better suited for creating complex, programmatic animations and motion graphics. Rough Notation has a simpler API and is easier to integrate into existing projects, but Motion Canvas offers more powerful animation capabilities and a wider range of visual elements.
JavaScript library to make drawing animation on SVG
Pros of Vivus
- Lightweight and focused on SVG animation
- Simple API for quick implementation
- No dependencies, making it easy to integrate
Cons of Vivus
- Limited to SVG line drawing animations
- Less flexibility for complex animations
- Fewer features compared to Motion Canvas
Code Comparison
Vivus:
new Vivus('my-svg', {duration: 200, type: 'delayed', start: 'autostart'});
Motion Canvas:
import {makeScene2D, Circle} from '@motion-canvas/2d';
export default makeScene2D(function* (view) {
const circle = new Circle().addTo(view);
yield* circle.scale(2, 1);
});
Motion Canvas offers a more comprehensive animation framework with a scene-based approach, while Vivus focuses specifically on SVG line drawing animations. Motion Canvas provides greater flexibility and control over various animation types, making it suitable for more complex projects. Vivus, on the other hand, excels in simplicity and ease of use for quick SVG animations.
JavaScript 3D Library.
Pros of Three.js
- More mature and widely adopted, with a larger community and ecosystem
- Offers a comprehensive set of 3D rendering features and capabilities
- Supports a wide range of 3D file formats and has extensive documentation
Cons of Three.js
- Steeper learning curve for beginners due to its extensive API
- Requires more setup and boilerplate code for basic scenes
- May be overkill for simple 2D animations or motion graphics
Code Comparison
Three.js (basic scene setup):
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
Motion Canvas (basic scene setup):
import {makeScene2D} from '@motion-canvas/2d';
export default makeScene2D(function* (view) {
// Scene content goes here
});
Motion Canvas is focused on creating 2D animations and motion graphics with a more streamlined API, while Three.js is a powerful 3D graphics library with a broader scope. Motion Canvas offers a simpler entry point for creating animations, especially for those familiar with web technologies, whereas Three.js provides more advanced 3D rendering capabilities but requires more setup and knowledge of 3D graphics concepts.
Convert
designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual CopilotREADME
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 Editor
When developing the editor, run the following command:
npm run template:dev
It will start a vite server that watches the core
, 2d
, ui
, and
vite-plugin
packages. The template
package itself contains a simple Motion
Canvas project that can be used during development.
Developing Player
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",
// ...
},
If you're linking the ui
package, you'll also need to modify vite.config.ts
to allow vite to load external files:
import {defineConfig} from 'vite';
import motionCanvas from '@motion-canvas/vite-plugin';
export default defineConfig({
server: {
fs: {
// let it load external files
strict: false,
},
},
plugins: [motionCanvas()],
});
This is necessary because the editor styles are loaded using the /@fs/
prefix
and since the linked ui
package is outside the project, vite needs permission
to access it.
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.
Top Related Projects
🎥 Make videos programmatically with React
Render After Effects animations natively on Web, Android and iOS, and React Native. http://airbnb.io/lottie/
Create and animate hand-drawn annotations on a web page
JavaScript library to make drawing animation on SVG
JavaScript 3D Library.
Convert
designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual Copilot