Motion Canvas – Generators

# Generator Functions in Motion Canvas Generator functions are the core building block for describing animations in Motion Canvas. They use JavaScript's `function*` syntax and `yield*` to control animation flow. ## Basic Generator Function ```typescript import {makeScene2D} from '@motioncanvas/2d/lib/scenes'; export default makeScene2D(function* (view) { // Animation code goes here yield* waitFor(1); // Wait for 1 second }); ``` ## Yielding Animations Use `yield*` to execute animations and wait for them to complete: ```typescript export default makeScene2D(function* (view) { const circle = createRef(); view.add(); // This will wait for the animation to complete yield* circle().size(200, 1.5); // This executes after the previous animation finishes yield* circle().fill('#e6a700', 1); }); ``` ## Parallel Animations Run multiple animations simultaneously using `all()`: ```typescript import {all} from '@motioncanvas/core/lib/flow'; export default makeScene2D(function* (view) { const circle = createRef(); const rect = createRef(); view.add( (); view.add(); // Execute one after another yield* circle().size(200, 1); yield* circle().position.x(300, 1); yield* circle().fill('#e6a700', 1); yield* circle().size(100, 1); }); ``` ## Resources - [Motion Canvas Flow Documentation](https://motioncanvas.io/docs/flow/) - [JavaScript Generators MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Generator)