Introduction

MotionScript is a TypeScript-first animation library for creating programmatic 2D (and 3D) animations. You describe scenes as generator functions passed to createScene, compose animations with yield*, and render to video.

Quick start

The fastest way to get going is to scaffold a new project:

How scenes work

Every animation is a Scene, created by passing a generator function to createScene and exporting it as the file's default. Inside that function you add nodes to the stage and use yield* to drive animations frame by frame.

import { createScene, Rect, createRef, wait } from '@motion-script/core';

export default createScene(function* (stage) {
  const box = createRef<Rect>();

  stage.add(
    <Rect ref={box} width={200} height={200} fill="royalblue" cornerRadius={16} />
  );

  // Slide right over 1 second, then wait
  yield* box().to({ x: 400 }, 1);
  yield* wait(0.5);
});

Key concepts:

• stage.add(node): attach a node to the scene
• createRef<T>(): get a typed reference to a JSX node
• yield* node.to(props, duration): animate properties over time
• yield* wait(seconds): pause for a duration