Skip to main content
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 default makeScene2D(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