Skip to main content

Motion Canvas v3.12.0

ยท 4 min read

New features ๐ŸŽ‰โ€‹

  • aarthificial's avatarThe 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>();
    [-150, 70],
    [150, 70],
    [0, -70],

    yield* line()
    [-150, 0],
    [0, 100],
    [150, 0],
    [150, -70],
    [-150, -70],

  • aarthificial's avatarTxt nodes can now be nested inside each other.#861
    Press play to preview the animation
    import {Txt, makeScene2D} from '@motion-canvas/2d';

    export default makeScene2D(function* (view) {
    <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.
  • aarthificial's avatarNew querying helpers let you find nodes in the scene.#852
  • rmhartog's avatarTransitions can now control which scene is drawn on top.#832
  • rmhartog's avatarA new Video.playbackRate property lets you control the speed of a video.#831
  • aarthificial's avatarThis 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
  • aarthificial's avatarNew 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
  • aarthificial's avatarThe 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.
  • jmaen's avatarHovering over the audio icon now reveals a volume slider that lets you adjust the volume.#872
  • Vija02's avatarThe ArrowUp and ArrowDown keys allow you to control the volume.#856
  • aarthificial's avatarThe animation range is no longer editable by default. Just like with the audio track, hold SHIFT before dragging to edit it.#862
  • Vaibhavi-Sita's avatarWhen looping is disabled, the editor will seek back to the start of the animation and stop there instead of pausing at the end.#823
  • CactusPuppy's avatarVector2 now includes static properties representing each type of origin.#855
  • aarthificial's avatarapplyState can now be used to tween to the new state and not just immediately apply it.#859
  • aarthificial's avatarThe spawner has been deprecated in favor of the children property.#858
    // before
    <Node spawner={() => range(count()).map(() => <Node />)} />,

    // after
    <Node>{() => range(count()).map(() => <Node />)}</Node>,
  • rmhartog's avatarProject configuration now supports glob patterns#834
    import motionCanvas from '@motion-canvas/vite-plugin';
    import {defineConfig} from 'vite';

    export default defineConfig({
    plugins: [
    project: './src/projects/*.ts',
  • rmhartog's avatarOpacity is clamped between 0 and 1.#835
  • aarthificial's avatarErrors that occur when loading an image are now properly reported in the editor.#847

Fixed bugs ๐Ÿ›โ€‹

  • aarthificial's avatarAdded a missing middle property to the LayoutProps interface.#891
  • aarthificial's avatarCardinal points now correctly account for the Node's offset.#883
  • aarthificial's avatar"Go to source" actions should work again.#895
  • shaikan's avatarUnusual characters in file names are now properly handled.#821
  • SleeklyCoding's avatarWhen opening the output directory, it will be automatically created if it doesn't exist.#787
  • aarthificial's avatarFixed line jitter under certain conditions.#863
  • rmhartog's avatarCorrectly calculate bounding boxes of Txt nodes.#836
  • aarthificial's avatarFixed tweening cardinal points.#829
Check out the Update Guide for information on how to update your existing projects.