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

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

node lets you easily define simple lines between two points.

New methods for chaining animations together:

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

and

flow functions.

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

New

,

and

Vector2 methods.

New

and

properties for curves.

New

and

constants for converting between degrees and radians.

You can now toggle fiddles between the code

, editor

and preview

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

Clear DependencyContext promises once resolved.

Fix fiddle accessibility.

Fix cyclic dependency in cardinal points.

Correctly append Txt nodes to view.

Fix taking snapshots.

Fix a typo in a viewport ID.

New

nodes let you easily create splines consisting of only one segment:

import ...

export default makeScene2D(function* (view) {
  const bezier = createRef<CubicBezier>();

  view.add(
    <CubicBezier
      ref={bezier}
      lineWidth={6}
      stroke={'lightseagreen'}
      p0={[-200, 0]}
      p1={[50, -200]}
      p2={[-50, 200]}
      p3={[200, 0]}
    />,
  );

  yield* bezier().start(1, 1);
  yield* bezier().start(0).end(0).end(1, 1);
});

New

properties: #601

• play

  automatically plays the video

• loop

  restarts the video upon reaching the end

Fiddles now support multiple examples. You can switch between them using the dropdown on the right side.

UPDATE AVAILABLE now links to the GitHub release page.

Videos play smoothly when in presentation mode.

Reused async resources are now correctly awaited.

Arrow orientations for splines are correctly calculated.

The showcase editor has been fixed.

New

node lets you draw lines made up of Bezier curves:

<Spline lineWidth={6} stroke={'lightseagreen'}>
<Knot position={[-100, 30]} />
<Knot position={[0, -50]} startHandle={[-70, 0]} />
<Knot position={[100, 30]} />
</Spline>

has been expanded with new methods:

,

,

Names displayed in the project selection view are now retrieved from the meta files.

Introduce initial API for plugins.

The fields in the editor are now autogenerated based on the structure of the meta file.

Support multiple fiddles on one page.

Fix CodeBlock types.

Size is now copied when cloning a node.

Zoom to fit works correctly for smaller canvases.

New Fiddle Editor let's you play around with Motion Canvas directly in the browser.

Information about the current zoom level is now displayed in the top-left corner of the viewport. You can choose one of the predefined zoom levels or toggle "zoom to fit".

The group by scene rendering option lets you render scenes into separate image sequences.

Button titles now include their corresponding shortcuts.

Vite has been updated to v4.

Tree shaking now works correctly.

Custom fields added to meta files are now preserved.

Checkboxes use a custom style.

The size of cache canvases is limited to the size of the project.

now works in Firefox.

The port at which Motion Canvas is served can now be changed.

The editor correctly detects new versions.

Keyboard shortcuts are now ignored when inputting text.

Runtime errors no longer corrupt the editor's state.

New status bar lists the shortcuts available in the currently hovered panel.

The current version is now displayed on the status bar. Clicking it will copy the versions of all packages currently in use.

Cache is now stored using world space coordinates. Scaling up

d nodes no longer results in quality loss.

All methods of

now accept

as arguments, making it possible to write code like this:

vector.add([100, 200]).mul(2);

New

node lets you quickly create regular polygons:

<Polygon
sides={6}
size={300}
fill={'lightseagreen'}
/>

The code above will generate a hexagon.

Fix line arc length.

Fix invalid source code link.

New Presentation Mode lets you present your animations live.

New

property.

New

method for the BBox type.

Fix playback state.

Fix cache bbox for lines.

Fix relative time.

Support multiple async players.

Fix letterSpacing.

New playback architecture:

• Project settings are now stored in meta files.
• Preview and rendering settings are configured separately.
• The animation range is stored using seconds instead of frames.

• You can adjust the audio offset by holding SHIFT and dragging the waveform left and right

• The rendering is not locked to the framerate, making the process a bit faster.

This change also opens the door to a lot of new features, including the

,

and

.

Rendering settings include a quarter resolution (x0.25).

New

property for RTL/LTR text.

Fix Vector2.exactlyEquals.

Render only within the range.

Fix initial value of endOffset.

Correctly reset zoom.

Fix performance issue with audio track.

Clear semi-transparent backgrounds.

You can now

and restore it at a later point.

New

and

Flexbox properties.

New

property allows you to change the rendering order of child nodes, without rearranging the hierarchy.

New

node:

<Icon icon={"mdi:typewriter"} size={200} color="white" />

Check out Icônes for the list of all possible icons.

Images can now be loaded from the internet. For images with incompatible CORS headers, a new CORS Proxy can be enabled.

New look for the release blog.

Handle division by zero in lines

New

interpolation.

property lets you make wedges using Circles.

New

.

The

function now accepts an additional step parameter.

View2D now extends Rect allowing you to change the background color of a scene using the fill property.

Support Color to null tweening.

Plug memory leaks.

Fix signal initialization.

Handle floating point errors in acos.