Skip to main content

· 2 min read
Jacob

New features 🎉​

  • aarthificial's avatarAll entities are now imported from the main entry point of each package. The only exception is the CodeBlock node which still requires the full import path:
    import {all, createRef} from '@motion-canvas/core';
    import {makeScene2D, Circle} from '@motion-canvas/2d';
    // the only exception:
    import {CodeBlock, insert} from '@motion-canvas/2d/lib/components/CodeBlock';
    Importing from subdirectories will continue to work until version 4.#721#710
  • aarthificial's avatarNew presenter and renderer plugin hooks.
    You can learn how to create your own plugins in the new Authoring Plugins guide.#723
  • ajs1998's avatarNew Random.gauss() method lets you generate random numbers using a gaussian (normal) distribution.#709
  • aarthificial's avatarUpdated sidebar design lets you hide the timeline and collapse panels by dragging.#692
  • aarthificial's avatarApplication-wide settings let you configure the project defaults and change the editor appearance. You can edit them in the settings tab on the left.#697
  • aarthificial's avatarYou can use a new eye dropper tool to pick colors from the canvas
    (see browser compatibility)#691
  • aarthificial's avatarError stack traces now include function names.#693
  • aarthificial's avatarOverall improvements to the Fiddle editor.#706#712#713

Fixed bugs 🐛​

  • aarthificial's avatarFix package.json entry.#720
  • aarthificial's avatarFix collapsable sections.#698
  • rtkid-nt's avatarUse project variables when rendering/presenting.#690
Check out the Update Guide for information on how to update your existing projects.

· 2 min read
Jacob

New features 🎉​

  • aarthificial's avatarThe brand new Video (FFmpeg) exporter lets you render your animations directly to a video file. It's included by default (with the option to opt out) in all new projects created with npm init @motion-canvas. Check out the docs to learn how to install it in your existing projects.#673#660
  • aarthificial's avatarAn improved rendering button provides visual feedback about the rendering process.#662#681
  • aarthificial's avatarA new OUTPUT DIRECTORY button lets you reveal the current output directory in your file explorer. You can find it directly below the RENDER button.#663
  • aarthificial's avatarCollapsible panels are now animated.#671
  • aarthificial's avatarArray values, such as points of a Line, are now displayed in the inspector.#670
  • aarthificial's avatarThe create package now supports command-line arguments for providing answers without having to go through the interactive prompt:#668
    npm init @motion-canvas@latest -- --name Hello --path ./hello --language ts
  • aarthificial's avatarMeta fields can declare descriptions. When hovering over the field in the editor, the description will be displayed in a form of a tooltip.#664
  • aarthificial's avatarNew hooks let plugins extend the behavior of the player (The plugin documentation will be available soon).#679

Fixed bugs 🐛​

  • aarthificial's avatarCorrectly support URLs to external images.#678
  • aarthificial's avatarRemove the yellow dependency pre-bundling warning.#676
  • aarthificial's avatarFix editing the audio offset by dragging the waveform.#674
  • aarthificial's avatarIgnore children with disabled layout.#669
  • aarthificial's avatarPrevent Color tree shaking.#666
Check out the Update Guide for information on how to update your existing projects.

· 2 min read
Jacob

New features 🎉​

  • aarthificial's avatarCardinal 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);
    });

  • aarthificial's avatarNew Ray node lets you easily define simple lines between two points.#628
  • aarthificial's avatarNew 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));
  • squigglesdev's avatarNew loopFor and loopUntil flow functions.#650#624
  • aarthificial's avatarExternal changes to images are now automatically reflected in the preview.#641
  • ksassnowski's avatarNew fromDegrees, createArcLerp and mod Vector2 methods.#640#622
  • aarthificial's avatarNew completion and arcLengthproperties for curves.#627#635
  • aarthificial's avatarNew DEG2RAD and RAD2DEG constants for converting between degrees and radians.#630
  • aarthificial's avatarYou can now toggle fiddles between the code , editor and preview mode (You can try it out in the example above).#642

Fixed bugs 🐛​

  • someguythatcodes's avatarClear DependencyContext promises once resolved.#617
  • aarthificial's avatarFix fiddle accessibility.#647
  • aarthificial's avatarFix cyclic dependency in cardinal points.#645
  • aarthificial's avatarCorrectly append Txt nodes to view.#644
  • aarthificial's avatarFix taking snapshots.#638#643
  • gmile's avatarFix a typo in a viewport ID.#620
Check out the Update Guide for information on how to update your existing projects.

· One min read
Jacob

New features 🎉​

  • ksassnowski's avatarNew Bézier nodes let you easily create splines consisting of only one segment: #603
    Press play to preview the animation
    Cubic Bezier
    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);
    });

  • aarthificial's avatarNew Video properties: #601
    • play automatically plays the video
    • loop restarts the video upon reaching the end
  • aarthificial's avatarFiddles now support multiple examples. You can switch between them using the dropdown on the right side.

Fixed bugs 🐛​

  • aarthificial's avatarUPDATE AVAILABLE now links to the GitHub release page.#608
  • aarthificial's avatarVideos play smoothly when in presentation mode.#600
  • aarthificial's avatarReused async resources are now correctly awaited.#599
  • ksassnowski's avatarArrow orientations for splines are correctly calculated.#597
  • aarthificial's avatarThe showcase editor has been fixed.#589
Check out the Update Guide for information on how to update your existing projects.

· 2 min read
Jacob

New features 🎉​

  • ksassnowski's avatarNew Spline node lets you draw lines made up of Bezier curves:#514
    <Spline lineWidth={6} stroke={'lightseagreen'}>
      <Knot position={[-100, 30]} />
      <Knot position={[0, -50]} startHandle={[-70, 0]} />
      <Knot position={[100, 30]} />
    </Spline>
  • ksassnowski's avatarVector2 has been expanded with new methods: degrees, equals, squaredMagnitude#579
  • guifeliper's avatarNames displayed in the project selection view are now retrieved from the meta files.#552
  • aarthificial's avatarIntroduce initial API for plugins.#564
  • aarthificial's avatarThe fields in the editor are now autogenerated based on the structure of the meta file.#565

Fixed bugs 🐛​

  • aarthificial's avatarSupport multiple fiddles on one page.#572
  • aarthificial's avatarFix CodeBlock types.#563
  • aarthificial's avatarSize is now copied when cloning a node.#562
  • aarthificial's avatarZoom to fit works correctly for smaller canvases.#561
Check out the Update Guide for information on how to update your existing projects.

· 2 min read
Jacob

New features 🎉​

  • aarthificial's avatarNew Fiddle Editor let's you play around with Motion Canvas directly in the browser.#542
  • aarthificial's avatarInformation 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".#531
  • misclicl's avatarThe group by scene rendering option lets you render scenes into separate image sequences.#477
  • aarthificial's avatarButton titles now include their corresponding shortcuts.#532
  • guifeliper's avatarVite has been updated to v4.#495
  • aarthificial's avatarTree shaking now works correctly.#523
  • aarthificial's avatarCustom fields added to meta files are now preserved.#534
  • aarthificial's avatarCheckboxes use a custom style.#529

Fixed bugs 🐛​

  • aarthificial's avatarThe size of cache canvases is limited to the size of the project.#544
  • AshishBarvaliya's avatartextWrap now works in Firefox.#541
  • AshishBarvaliya's avatarThe port at which Motion Canvas is served can now be changed.#538
  • AshishBarvaliya's avatarThe editor correctly detects new versions.#520
  • AshishBarvaliya's avatarKeyboard shortcuts are now ignored when inputting text.#521
  • aarthificial's avatarRuntime errors no longer corrupt the editor's state.#524

· One min read
Jacob

New features 🎉​

  • oacs's avatarNew status bar lists the shortcuts available in the currently hovered panel.#444
  • aarthificial's avatarThe current version is now displayed on the status bar. Clicking it will copy the versions of all packages currently in use.#501
  • aarthificial's avatarCache is now stored using world space coordinates. Scaling up cached nodes no longer results in quality loss.#498
  • magx2's avatarAll methods of Vector2 now acceptPossibleVector2 as arguments, making it possible to write code like this: #478
    vector.add([100, 200]).mul(2);
  • andrie's avatarNew Polygon node lets you quickly create regular polygons:
    <Polygon
      sides={6}
      size={300}
      fill={'lightseagreen'}
    />
    The code above will generate a hexagon.#463

Fixed bugs 🐛​

  • aarthificial's avatarFix line arc length.#503
  • AshishBarvaliya's avatarFix invalid source code link.#502

· 2 min read
Jacob
info

Check out the Migration Guide for instructions on how to update your project.

New features 🎉​

  • aarthificial's avatarNew 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 Presentation Mode, Editable Signals and Custom Exporters.#402
  • ccaven's avatarRendering settings include a quarter resolution (x0.25).#421
  • mohsinhijazee's avatarNew textDirection property for RTL/LTR text.#404

Fixed bugs 🐛​

  • aarthificial's avatarFix Vector2.exactlyEquals.#437
  • aarthificial's avatarRender only within the range.#436
  • aarthificial's avatarFix initial value of endOffset.#433
  • aarthificial's avatarCorrectly reset zoom.#432
  • aarthificial's avatarFix performance issue with audio track.#427
  • aarthificial's avatarClear semi-transparent backgrounds.#424

· 2 min read
Jacob

New features 🎉​

  • ksassnowski's avatarYou can now store the state of a node and restore it at a later point.#406
  • Ross-Esmond's avatarCodeBlock is now exported together with other nodes. An improved theme system with the new stockTheme property lets you use VS Code themes (powered by Shiki)#401
  • aarthificial's avatarNew alignContent and alignItemsFlexbox properties.#405
  • ksassnowski's avatarNew zIndex property allows you to change the rendering order of child nodes, without rearranging the hierarchy.#398
  • WaldemarLehner's avatarNew Icon node:
    <Icon icon={"mdi:typewriter"} size={200} color="white" />
    Check out Icônes for the list of all possible icons.#306
  • WaldemarLehner's avatarImages can now be loaded from the internet. For images with incompatible CORS headers, a new CORS Proxy can be enabled.#357
  • aarthificial's avatarNew look for the release blog.#410

Fixed bugs 🐛​

  • aarthificial's avatarHandle division by zero in lines#407