Motion Canvas v3.15.0

New features 🎉

• A brand-new Code node with dedicated code signals, customizable syntax highlighting, and more expressive animation system (Including automatic diff-based transitions).#946
  Press play to preview the animation

  import ...
  
  export default makeScene2D(function* (view) {
    const code = createRef<Code>();
  
    view.add(
      <Code
        ref={code}
        fontSize={28}
        fontFamily={'JetBrains Mono, monospace'}
        offsetX={-1}
        x={-400}
        code={'const number = 7;'}
      />,
    );
  
    yield* waitFor(0.6);
    yield* all(
      code().code.replace(code().findFirstRange('number'), 'variable', 0.6),
      code().code.prepend(0.6)`function example() {\n  `,
      code().code.append(0.6)`\n}`,
    );
  
    yield* waitFor(0.6);
    yield* code().selection(code().findFirstRange('variable'), 0.6);
  
    yield* waitFor(0.6);
    yield* all(
      code().code('const number = 7;', 0.6),
      code().selection(DEFAULT, 0.6),
    );
  });
  
• New withDefaults helper function lets you quickly extend nodes with your own defaults.#982

  import {Txt, withDefaults} from '@motion-canvas/2d';
  
  export const MyTxt = withDefaults(Txt, {
    fill: 'rgba(255, 255, 255, 0.6)',
    fontFamily: 'JetBrains Mono',
    fontSize: 28,
  });
• When using loop, the iteration count can be omitted to create an infinite loop:#952

  // These two are equivalent:
  yield* loop(() => { /* animation */ });
  yield* loop(Infinity, () => { /* animation */ });
• New spawn function lets you run animations in the background, from any place, without needing to yield them.#951
• Polygon now extendsCurve giving it access to all curve-related properties like startArrow and radius.#961
• Color fields in the editor now come with a visual color picker.#962
• New Vector2 methods: #985
  • rounded
  • ceiled
  • map
  • toArray
• New cardinalPoint method lets you mapOrigins and Directions to their corresponding cardinal points of the node.#988
• New waitTransition lets you animate transitions using nodes.#983
• When passed to OpenGL, Matrix2D is now converted to a 3x3 square matrix (as opposed to a 3x2 matrix)#984
• The view's cachePadding is now respected when calculating the cache size of individual nodes.#986
• Presentation Mode now supports PowerPoint shortcuts (Page Up, Page Down, etc.)#993
• Parts of the motion-canvas-player shadow root are now exposed using part and can be customized with CSS.#956
• Fiddles on this website now play automatically when scrolled into view.#1001

Fixed bugs 🐛

• Account for italic fonts in cache.#968
• Fix typo in the Quickstart Guide.#974
• Properly handle offset when retrieving the absolute position of a node.#987
• Fix the spline warning for reactive points.#981

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