.png)
4 hours ago
1
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.
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);
});
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.
Tested in Combat
The road ahead is still long, but you can already use Motion Canvas to create production-quality animations.
![Traits of next generation reasoning models [video]](https://www.youtube.com/img/desktop/supported_browsers/opera.png)
