Motion Canvas Fun

Intro

Some of my favorite content on YouTube are education channels that have lots of visuals to accompany the topic. Think 3Blue1Brown or Freya Holmér. Both use animations to help explain complex topics.

Recently at work there was some logic that was confusing to most of us and to understand the issue better I started drawing a diagram. (I'm a visual person.) But it fell short because it was static. I really needed a way to show the process through time. I had stumbled across Motion Canvas a few weeks ago and honestly, couldn't get it to work the first night I tried. But I gave it another crack last night and it was fun. I only animated 1 scene and probably will only show it to the people who put up with me (my family). But I had so much fun! (I wear my geek badge with pride.)

What is it?

Motion Canvas is a TypeScript library to "Visualize Complex Ideas Programmatically". It is a combination of TypeScript and JSX-like syntax to animate different objects in the browser.

It looks like video editing software with play, forward and back buttons along with a sidebar for debug messages and other information.

After setting up the project, you start by creating a scene and adding objects to that scene. Then you use Javascript generators to describe to the library different animations. Motion Canvas will calculate the different property values to create the animation in the browser.

export default makeScene2D(function* (view) {

view.add(
  <Layout direction={'column'}
    ref={group2}
    position={() => [0, -screenHeight]}
    layout
    justifyContent={'start'}
    alignItems={'center'}
    gap={20}
    opacity={recordOpacity}
  >
    <Circle
      ref={recordCircle}
      scale={.7}
      width={100}
      height={100}
      fill={RED}
    />
    <Txt
      x={-150}
      y={-30}
      {...textStyle}
      fill={RED}
    >Incoming Record</Txt>
  </Layout>);

yield* chain(
  waitFor(1),
  sequence(.2, outerLayout().opacity(1, 1.5),
    windowRect().ripple(1),),
  waitFor(.5),
  all(
    timeText().opacity(1, .8),
    timeText().position(() => [windowRectSignal() / -2, -108], 1),
  ),
  waitFor(1),
  timeText().opacity(0, 1),
  timeText().text(() => `Defined time: ${(windowRectSignal() / 10).toFixed(0)}`, 0.3),
  timeText().opacity(1, 1),
  waitFor(1),
  windowRectSignal(400, 2, easeInOutCubic),
  waitFor(.3),
  windowRectSignal(600, 1.5, easeInOutCubic),
  waitFor(.3),
  windowRectSignal(500, 1, easeInOutCubic),
  waitFor(1),
);

If you want to see my project, head on over to Github.