Skip to main content

Motion Canvas v3.6.0

ยท 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.