Motion Canvas v3.12.0

New features 🎉

• 

  The points of a

  Line

  can now be tweened.

  #853
  Press play to preview the animation

  import ...
  
  export default makeScene2D(function* (view) {
    const line = createRef<Line>();
    view.add(
      <Line
        ref={line}
        points={[
          [-150, 70],
          [150, 70],
          [0, -70],
        ]}
        stroke={'lightseagreen'}
        lineWidth={8}
        radius={20}
        closed
      />,
    );
  
    yield* line()
      .points(
        [
          [-150, 0],
          [0, 100],
          [150, 0],
          [150, -70],
          [-150, -70],
        ],
        2,
      )
      .back(2);
  });
  

• Txt

  nodes can now be nested inside each other.

  #861
  Press play to preview the animation

  import {Txt, makeScene2D} from '@wangyaoshen/locus-2d';
  
  export default makeScene2D(function* (view) {
    view.fill('#141414');
    view.add(
      <Txt fill={'white'} fontSize={32} width={720} textWrap>
        Whereas recognition of the inherent dignity and of the{' '}
        <Txt.i>equal</Txt.i> and inalienable rights of all members of
        the human family is the foundation of <Txt.b>freedom</Txt.b>,
        justice and <Txt fill="#25C281">peace</Txt> in the world.
      </Txt>,
    );
  });

• 

  New querying helpers let you find nodes in the scene.

  #852
• 

  Transitions can now control which scene

  is drawn on top

  .

  #832
• 

  A new

  Video.playbackRate

  property lets you control the speed of a video.

  #831
• 

  This version introduces the concept of experimental features. Marked with

  , these features are meant mostly for testing and gathering feedback. Find out more about them in this dedicated section.

  #876
• 

  New Editor Plugins allow you to extend the editor's interface. With them, you can define custom tabs in the sidebar and draw overlays on top of the animation preview or the presenter.

  #884
• 

  The timeline can now be scrubbed by holding down LMB and dragging left or right.

  #862
  

  For complex animation, dragging to the left may lag a bit since the entire generator must be re-run each time.

• 

  Hovering over the audio icon now reveals a volume slider that lets you adjust the volume.

  #872
• 

  The ArrowUp and ArrowDown keys allow you to control the volume.

  #856
• 

  The animation range is no longer editable by default. Just like with the audio track, hold SHIFT before dragging to edit it.

  #862
• 

  When looping is disabled, the editor will seek back to the start of the animation and stop there instead of pausing at the end.

  #823
• Vector2

  now includes static properties representing each type of origin.

  #855
• applyState

  can now be used to tween to the new state and not just immediately apply it.

  #859
• 

  The spawner has been deprecated in favor of the children property.

  #858

  view.add(
    // before
    <Node spawner={() => range(count()).map(() => <Node />)} />,
  );
  
  view.add(
    // after
    <Node>{() => range(count()).map(() => <Node />)}</Node>,
  );

• 

  Project configuration now supports glob patterns

  #834

  import motionCanvas from '@wangyaoshen/locus-vite-plugin';
  import {defineConfig} from 'vite';
  
  export default defineConfig({
    plugins: [
      motionCanvas({
        project: './src/projects/*.ts',
      }),
    ],
  });

• 

  Opacity is clamped between 0 and 1.

  #835
• 

  Errors that occur when loading an image are now properly reported in the editor.

  #847

Fixed bugs 🐛

• 

  Added a missing middle property to the LayoutProps interface.

  #891
• 

  Cardinal points now correctly account for the Node's offset.

  #883
• 

  "Go to source" actions should work again.

  #895
• 

  Unusual characters in file names are now properly handled.

  #821
• 

  When opening the output directory, it will be automatically created if it doesn't exist.

  #787
• 

  Fixed line jitter under certain conditions.

  #863
• 

  Correctly calculate bounding boxes of Txt nodes.

  #836
• 

  Fixed tweening cardinal points.

  #829

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