Motion Canvas v3.10.0

New features 🎉

• 

  The

  Rect

  and

  Circle

  nodes now extend

  Curve

  giving them access to all its properties and methods:

  #771#759
  Press play to preview the animation

  import ...
  
  export default makeScene2D(function* (view) {
    const ref = createRef<Circle>();
    view.add(
      <Circle
        ref={ref}
        size={160}
        stroke={'lightseagreen'}
        lineWidth={8}
        endAngle={270}
        endArrow
      />,
    );
  
    yield* all(ref().start(1, 1), ref().rotation(180, 1, easeInCubic));
    ref().start(0).end(0);
    yield* all(ref().end(1, 1), ref().rotation(360, 1, easeOutCubic));
  });
  

• 

  New SVG

  Path

  component:

  #700
  Press play to preview the animation

  import ...
  
  export default makeScene2D(function* (view) {
    view.add(
      <Path
        scale={8}
        position={-96}
        fill={'lightseagreen'}
        data={
          'M4 6.47L5.76 10H20v8H4V6.47M22 4h-4l2 4h-3l-2-4h-2l2 4h-3l-2-4H8l2 4H7L5 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V4z'
        }
      />,
    );
  });
  

• 

  New

  start

  and

  end

  signals for animating the

  Grid

  node.

  #761
• 

  New helper methods for managing references: #775

  • createRefArray
  • createRefMap
• Img

  and

  Video

  nodes with radius are automatically clipped.

  #773
• BBox

  transformation methods accept

  PossibleMatrix2D

  .

  #770
• 

  New

  middle

  cardinal point.

  #758
• 

  New

  rotate

  and

  polarLerp

  methods for

  Vector2

  .

  #756
• 

  The editor now lets you copy the mouse coordinates by pressing P

  #737
• restore()

  can be called without duration to restore the state immediately.

  #736

Fixed bugs 🐛

• 

  Fixed the "Last updated by" information on documentation pages.

  #776
• 

  Timeline correctly displays small time ranges.

  #739
• 

  It's no longer possible to spawn multiple color pickers.

  #747

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