✨Text Animation

The Text Animation component simplifies animating text by automatically splitting it into individual words or characters, allowing for dynamic effects without manual wrapping.

Let's say you want to animate one letter at a time - instead of having to manually wrap each letter in an Animation Group, you can simply wrap a text instance (like a heading) in the Text Animation component.

Text Animation is one component of the animation engine. See Animations for an overview.

The Text Animation component handles splitting the text under the hood, making it easy to prepare text for animation.

Just remember that you'll need to wrap the Text Animation component in an Animation Group to define and control the actual animation behavior. The Animation Group must be the direct parent of the Text Animation.

You can split text by:

• Spaces (enabling you to animate each word)

• Characters (enabling you to animate each letter)

• #

• ~

Under the hood

Here's an example of what happens automatically under the hood.

If you wrap a heading component that outputs the following HTML:

<h2>Hello World</h2>

in a Text Component and split the text by spaces, it will appear as:

<h2>
  <span>Hello</span>
  <!-- The space is automatically ignored by the animation. -->
  <span> </span>
  <span>World</span>
</h2>

Now the parent Animation Group can effectively target each word individually.

Related

• Animation Group – Required parent for animations

• Stagger Animation – Stagger child animations

• Heading – Headings to animate

• Paragraph – Text to animate