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 '@wangyaoshen/locus-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 extends

  Curve

  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 map

  Origin

  s and

  Direction

  s 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.