Skip to main content

Motion Canvas v3.15.0

ยท 3 min read

New features ๐ŸŽ‰โ€‹

  • aarthificial's avatarA brand-new Code node with dedicated code signals, customizable syntax highlighting, and more expressive animation system (Including automatic diff-based transitions).#946
    Press play to preview the animation
    import ...

    export default makeScene2D(function* (view) {
    const code = createRef<Code>();

    fontFamily={'JetBrains Mono, monospace'}
    code={'const number = 7;'}

    yield* waitFor(0.6);
    yield* all(
    code().code.replace(code().findFirstRange('number'), 'variable', 0.6),
    code().code.prepend(0.6)`function example() {\n `,

    yield* waitFor(0.6);
    yield* code().selection(code().findFirstRange('variable'), 0.6);

    yield* waitFor(0.6);
    yield* all(
    code().code('const number = 7;', 0.6),
    code().selection(DEFAULT, 0.6),

  • aarthificial's avatarNew withDefaults helper function lets you quickly extend nodes with your own defaults.#982
    import {Txt, withDefaults} from '@motion-canvas/2d';

    export const MyTxt = withDefaults(Txt, {
    fill: 'rgba(255, 255, 255, 0.6)',
    fontFamily: 'JetBrains Mono',
    fontSize: 28,
  • aarthificial's avatarWhen using loop, the iteration count can be omitted to create an infinite loop:#952
    // These two are equivalent:
    yield* loop(() => { /* animation */ });
    yield* loop(Infinity, () => { /* animation */ });
  • aarthificial's avatarNew spawn function lets you run animations in the background, from any place, without needing to yield them.#951
  • aarthificial's avatarPolygon now extendsCurve giving it access to all curve-related properties like startArrow and radius.#961
  • jmaen's avatarColor fields in the editor now come with a visual color picker.#962
  • aarthificial's avatarNew Vector2 methods: #985
  • aarthificial's avatarNew cardinalPoint method lets you mapOrigins and Directions to their corresponding cardinal points of the node.#988
  • aarthificial's avatarNew waitTransition lets you animate transitions using nodes.#983
  • aarthificial's avatarWhen passed to OpenGL, Matrix2D is now converted to a 3x3 square matrix (as opposed to a 3x2 matrix)#984
  • aarthificial's avatarThe view's cachePadding is now respected when calculating the cache size of individual nodes.#986
  • Niikelion's avatarPresentation Mode now supports PowerPoint shortcuts (Page Up, Page Down, etc.)#993
  • nvborisenko's avatarParts of the motion-canvas-player shadow root are now exposed using part and can be customized with CSS.#956
  • aarthificial's avatarFiddles on this website now play automatically when scrolled into view.#1001

Fixed bugs ๐Ÿ›โ€‹

  • CactusPuppy's avatarAccount for italic fonts in cache.#968
  • rogerpinho's avatarFix typo in the Quickstart Guide.#974
  • aarthificial's avatarProperly handle offset when retrieving the absolute position of a node.#987
  • aarthificial's avatarFix the spline warning for reactive points.#981
Check out the Update Guide for information on how to update your existing projects.