Skip to main content

· 2 min read
Jacob

New features 🎉​

  • aarthificial's avatarNodes can now be skewed:#803
    Press play to preview the animation
    import ...

    export default makeScene2D(function* (view) {
      const ref = createRef<Img>();
      yield view.add(
        <Img
          ref={ref}
          skew={[-24, -12]}
          src="https://images.unsplash.com/photo-1696931073577-5638a6891e1e"
          width={240}
          radius={20}
        />,
      );

      yield* ref().skew([24, 12], 1, easeOutElastic).back(1);
    });

  • levirs565's avatarNew SVG node lets you display and tween SVG graphics.#763
    (The amount of supported SVG features is still limited, the node was designed mainly to support LaTeX tweening in the future update)
  • SleeklyCoding's avatarA new lineCount property lets you retrieve the number of lines in a code block.#802
  • aarthificial's avatarslideTransition now allows for diagonal movement defined using Origin.#801
  • aarthificial's avatarAny external changes made to the audio file are now picked up and automatically reflected in the editor.#793
  • aarthificial's avatarWhen rendering, an estimated remaining time is displayed in the bottom right.#795
  • me-nkr's avatarNew playback controls for seeking to the very beginning and end of the animation.#814
  • alsongarbuja's avatarWhen dragging time events, a line indicator is displayed to help precisely align the event with the audio.#808
  • aarthificial's avatarHolding MMB allows you to drag the timeline left and right.#794
  • aarthificial's avatarA new error warns about a missing image source.#817

Fixed bugs 🐛​

  • aarthificial's avatarSpecific event names, such as constructor no longer cause the editor to crash.#819
  • aarthificial's avatarAdded missing Curve properties to Circle.#805
  • aarthificial's avatarArrow heads now always point in the correct direction.#792
Check out the Update Guide for information on how to update your existing projects.

· 2 min read
Jacob

New features 🎉​

  • aarthificial's avatarThe Rect and Circle nodes now extend Curvegiving them access to all its properties and methods:#771#759
    Press play to preview the animation
    import ...

    export default makeScene2D(function* (view) {
      const ref = createRef<Circle>();
      view.add(
        <Circle
          ref={ref}
          size={160}
          stroke={'lightseagreen'}
          lineWidth={8}
          endAngle={270}
          endArrow
        />,
      );

      yield* all(ref().start(1, 1), ref().rotation(180, 1, easeInCubic));
      ref().start(0).end(0);
      yield* all(ref().end(1, 1), ref().rotation(360, 1, easeOutCubic));
    });

  • levirs565's avatarNew SVG Path component:#700
    Press play to preview the animation
    import ...

    export default makeScene2D(function* (view) {
      view.add(
        <Path
          scale={8}
          position={-96}
          fill={'lightseagreen'}
          data={
            'M4 6.47L5.76 10H20v8H4V6.47M22 4h-4l2 4h-3l-2-4h-2l2 4h-3l-2-4H8l2 4H7L5 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V4z'
          }
        />,
      );
    });

  • ksassnowski's avatarNew start and end signals for animating the Grid node.#761
  • aarthificial's avatarNew helper methods for managing references: #775
  • aarthificial's avatarImg and Video nodes with radius are automatically clipped.#773
  • ksassnowski's avatarBBox transformation methods accept PossibleMatrix2D.#770
  • aarthificial's avatarNew middle cardinal point.#758
  • ksassnowski's avatarNew rotate and polarLerp methods for Vector2.#756
  • Logon27's avatarThe editor now lets you copy the mouse coordinates by pressing P#737
  • aarthificial's avatarrestore() can be called without duration to restore the state immediately.#736

Fixed bugs 🐛​

  • aarthificial's avatarFixed the "Last updated by" information on documentation pages.#776
  • Caesarovich's avatarTimeline correctly displays small time ranges.#739
  • aarthificial's avatarIt's no longer possible to spawn multiple color pickers.#747
Check out the Update Guide for information on how to update your existing projects.

· 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