Adding Text

Shapes are great, but most animations need words. Let's add a title to our scene using the Text node.

Your first Text node

Text works just like any other node: add it with stage.add() and style it with props.

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

export default createScene(function* (stage) {
  const title = createRef<Text>();

  stage.add(
    <Text
      ref={title}
      text="Motion Script"
      fontSize={80}
      fontWeight={800}
      fill="white"
    />
  );
});

The props you'll reach for most:

• text: the words to show
• fontSize: size in pixels
• fontWeight: how bold, from 100 (thin) to 900 (black)
• fill: the text color

Animate it in

Text animates exactly like the square did. A common move is to fade and drift it into place. We can play both at once with parallel, which you met on the last page.

import { parallel, easeOut } from '@motion-script/core';

// start invisible and slightly high
stage.add(
  <Text ref={title} text="Motion Script" fontSize={80} fontWeight={800} fill="white" opacity={0} y={-20} />
);

yield* parallel(
  title().to({ opacity: 1 }, 0.8, easeOut),
  title().to({ y: 0 }, 0.8, easeOut),
);

The title fades up and settles down at the same time. Clean and simple.

A couple of handy tricks

Type it out. Use append to grow text character by character, like a typewriter:

stage.add(<Text ref={title} text="Motion" fontSize={80} fill="white" />);

yield* title().append(' Script', 1);

Add some color. A fill can be a gradient, not just a flat color. Build one with the Fills helper:

import { Fills } from '@motion-script/core';

<Text
  text="Motion Script"
  fontSize={80}
  fontWeight={900}
  fill={Fills.linearGradient(['#4f80ff', '#e84393'])}
/>

That's everything you need to get words on screen and moving. If you later want mixed styles inside a single block (different colors or weights per word), there's a RichText node for exactly that.

So far we've been placing things by hand with x and y. On the next page we'll let MotionScript do the arranging for us.