Split Text

The splitText plugin breaks a text element into smaller parts—characters, words, and lines—
making it easy to apply fine-grained animations. It returns an object with arrays of elements you can animate individually or in groups.

Import

import { splitText } from 'animatry'

Basic Example: Lines and Characters

In this example, we split the text into lines and characters and animate the characters entering from below with a staggered delay.

const split = splitText(element, { type: 'lines, chars' });

animatry.timeline()
  .set(split.lines, {
    overflow: 'clip',
  })
  .from(split.chars, {
    y: '100%',
    duration: 0.5,
    stagger: { duration: 1.5 },
  });

This is just some text to show how split text plugin makes your life way too easy. Especially when it comes to these cool reveal animations.

Example: Characters Only with Random Stagger

You can also animate only characters with a randomized stagger sequence.

const split = splitText(element, { type: 'chars' });

animatry.from(split.chars, {
  opacity: 0,
  duration: 0.25,
  stagger: {
    from: 'random',
    duration: 1,
  },
});

This is just some text to show how split text plugin makes your life way too easy.

Configuration Options

type

Specifies how the text should be split. Accepted values: "chars", "words", "lines", or any comma-separated combination like "lines, chars".

Return Object

The splitText function returns an object with the following structure:

chars

Array of individual character elements.

words

Array of word elements (if "words" was requested).

lines

Array of line-wrapped elements (if "lines" was requested).

original

The original DOM element that was passed to <code>splitText</code>.

Tips

Line splitting requires the text to wrap naturally. Use CSS like display: block and ensure the container has a constrained width.
To animate with clipping, set overflow: clip or overflow: hidden on the wrapping line elements.
Combine types (e.g., lines, chars) to achieve nested control over the animation flow.