Motion Canvas v3.6.0

New features 🎉

• 

  Cardinal points let you position nodes relative to their corners and edges

  #636
  Press play to preview the animation

  import ...
  
  export default makeScene2D(function* (view) {
    const rect = createRef<Rect>();
  
    view.add(
      <>
        <Rect
          ref={rect}
          width={200}
          height={100}
          rotation={-10}
          fill={'#333333'}
        />
        <Rect
          size={50}
          fill={'#e6a700'}
          rotation={rect().rotation}
          // Try changing "right" to "top"
          right={rect().left}
        />
        <Rect
          size={100}
          fill={'#e13238'}
          rotation={10}
          bottomLeft={rect().bottomRight}
        />
      </>,
    );
  
    yield* rect().rotation(10, 1).to(-10, 1);
  });
  

• 

  New

  Ray

  node lets you easily define simple lines between two points.

  #628
• 

  New methods for chaining animations together:

  #651

  yield* circle().scale(0.5, 0.2)
  // tween to another value
  .to(2, 0.2)
  // wait for one second
  .wait(1)
  // tween back to the initial value
  .back(0.2)
  // execute a callback
  .do(() => circle().fill('red'))
  // run the given generator
  .run(circle().position.y(100, 2));

• 

  New

  loopFor

  and

  loopUntil

  flow functions.

  #650#624
• 

  External changes to images are now automatically reflected in the preview.

  #641
• 

  New

  fromDegrees

  ,

  createArcLerp

  and

  mod

  Vector2 methods.

  #640#622
• 

  New

  completion

  and

  arcLength

  properties for curves.

  #627#635
• 

  New

  DEG2RAD

  and

  RAD2DEG

  constants for converting between degrees and radians.

  #630
• 

  You can now toggle fiddles between the code

  , editor

  and preview

  mode (You can try it out in the example above).

  #642

Fixed bugs 🐛

• 

  Clear DependencyContext promises once resolved.

  #617
• 

  Fix fiddle accessibility.

  #647
• 

  Fix cyclic dependency in cardinal points.

  #645
• 

  Correctly append Txt nodes to view.

  #644
• 

  Fix taking snapshots.

  #638#643
• 

  Fix a typo in a viewport ID.

  #620

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