Skip to main content

Best of Both Worlds

Some things are easier with a mouse. Write animations in TypeScript with your favorite IDE; Use a web-based editor to sync them with audio.

Powered by Vite, a real-time preview of your animation automatically updates upon any changes.

Try the Editor

export default makeScene2D(function* (view) {
const circle = createRef<Circle>();

yield* circle().scale(2, 0.3);
yield* waitUntil('event');
yield* all(
circle().scale(1, 0.3),
circle().position.y(200, 0.3),
yield* circle().fill('green', 0.3);

Procedural for a Change

Let the execution of your code define the animation. Write generator functions that describe what should happen - step by step.

Focus on duration, speed and acceleration instead of hardcoded key frames.

Learn More

Tested in Combat

The road ahead is still long, but you can already use Motion Canvas to create production-quality animations.

Video Source Code