Motion Canvas v3.11.0

New features 🎉

• 

  Nodes can now be skewed:

  #803
  Press play to preview the animation

  import ...
  
  export default makeScene2D(function* (view) {
    const ref = createRef<Img>();
    yield view.add(
      <Img
        ref={ref}
        skew={[-24, -12]}
        src="https://images.unsplash.com/photo-1696931073577-5638a6891e1e"
        width={240}
        radius={20}
      />,
    );
  
    yield* ref().skew([24, 12], 1, easeOutElastic).back(1);
  });
  

• 

  New

  SVG

  node lets you display and tween SVG graphics.

  #763
  

  (The amount of supported SVG features is still limited, the node was designed mainly to support LaTeX tweening in the future update)

• 

  A new lineCount property lets you retrieve the number of lines in a code block.

  #802
• slideTransition

  now allows for diagonal movement defined using

  Origin

  .

  #801
• 

  Any external changes made to the audio file are now picked up and automatically reflected in the editor.

  #793
• 

  When rendering, an estimated remaining time is displayed in the bottom right.

  #795
• 

  New playback controls for seeking to the very beginning and end of the animation.

  #814
• 

  When dragging time events, a line indicator is displayed to help precisely align the event with the audio.

  #808
• 

  Holding MMB allows you to drag the timeline left and right.

  #794
• 

  A new error warns about a missing image source.

  #817

Fixed bugs 🐛

• 

  Specific event names, such as constructor no longer cause the editor to crash.

  #819
• 

  Added missing Curve properties to Circle.

  #805
• 

  Arrow heads now always point in the correct direction.

  #792

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