Motion Canvas v3.16.0

New features 🎉

• A brand-new Camera node with helper methods for zooming and focusing on elements:#1019
  Press play to preview the animation

  import ...
  
  export default makeScene2D(function* (view) {
    const camera = createRef<Camera>();
    const rect = createRef<Rect>();
    const circle = createRef<Circle>();
  
    const scene = (
      <Node>
        <Grid stroke={'#fff1'} lineWidth={1} size="100%" spacing={25}>
          <Rect ref={rect} fill={'#e6a700'} size={50} position={[50, -25]} />
          <Circle ref={circle} fill={'#e13238'} size={50} position={[-50, 25]} />
        </Grid>
      </Node>
    );
  
    view.add(
      <>
        <Camera.Stage
          scene={scene}
          x={-200}
          width={300}
          height={200}
          stroke={'#242424'}
          lineWidth={4}
        />
        <Camera.Stage
          cameraRef={camera}
          scene={scene}
          x={200}
          width={300}
          height={200}
          stroke={'#242424'}
          lineWidth={4}
        />
      </>,
    );
  
    yield* all(
      camera().centerOn(rect(), 3),
      camera().rotation(180, 3),
      camera().zoom(1.8, 3),
    );
    yield* camera().centerOn(circle(), 2);
    yield* camera().reset(1);
  });
  
• New effects can be used to react to changes in signals:#1043

  import {makeScene2D} from '@motion-canvas/2d';
  import {createEffect, createSignal} from '@motion-canvas/core';
  
  export default makeScene2D(function* () {
    const signal = createSignal(0);
  
    createEffect(() => {
      console.log('Signal changed: ', signal());
    });
  
    yield* signal(1, 2);
  });
• All vector operations can now be used with vector signals for a more concise code:#1030

  // Before
  yield* node().position(node().position().add([200, 100]), 2);
  
  // Now
  yield* node().position.add([200, 100], 2);
• Polygon.vertex() and Polygon.vertexCompletion() can be used to retrieve information about the vertices of a polygon.#1045
• New example for the Code node.#1023

Fixed bugs 🐛

• Handle invalid values for time events.#1044
• Fix the destination uv in shaders.#1026
• Fix the type of the layout gap property.#1039
• Fix Code size calculation.#1025

Check out the Update Guide for information on how to update your existing projects.