New features ๐โ
- The points of a
Line
can now be tweened.#853Press play to preview the animationimport ...
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.#861Press play to preview the animationimport {Txt, makeScene2D} from '@motion-canvas/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.#855applyState
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 '@motion-canvas/vite-plugin';
import {defineConfig} from 'vite';
export default defineConfig({
plugins: [
motionCanvas({
project: './src/projects/*.ts',
}),
],
}); - Opacity is clamped between
0
and1
.#835 - Errors that occur when loading an image are now properly reported in the editor.#847
Fixed bugs ๐โ
- Added a missing
middle
property to theLayoutProps
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