https://motioncanvas.io/

Skip to main content
 
Motion Canvas LogoMotion Canvas Logo
Motion CanvasDocsAPIBlog
Search
stars
 
online
 

Visualize Complex
Ideas Programmatically

Visualize
Complex Ideas
Programmatically

Get StartedContribute
sceneevent3030100405080701006090110-1035

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 makeScene(function* (view) {
  const circle = createRef<Circle>();
  view.add(
    <Circle 
      ref={circle} 
      width={320} 
      height={320} 
      fill={'blue'} 
    />
  );
  
  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

Docs

  * Docs
  * API

Community

  * Patreon
  * YouTube
  * Discord

More

  * Blog
  * GitHub

Copyright (c) 2023 Motion Canvas. Built with Docusaurus.