Split text

Words, or letters, rise into place one after another the first time the text scrolls into view.

enhancer
entrance
scroll
words
letters
since 0.1

Background Studio: tune it below, then copy the code

Your system asks for reduced motion: the demo shows its final state and nothing moves.

Live demo

Split text example

Words rise into place, one after another.

Code

It follows the controls above: change an option and the code changes with it.

<link rel="stylesheet" href="/axi0/motion/motion.css?v=6">
<script src="/axi0/motion/motion.js?v=10" defer></script>

<p class="demo-big" data-motion="split-text">Words rise into place, one after another.</p>

import { SplitText } from "./motion/react/SplitText";

<SplitText>Your content</SplitText>

<script setup lang="ts">
import SplitText from "./motion/vue/SplitText.vue";
</script>

<template>
  <SplitText>Your content</SplitText>
</template>

const el = document.querySelector("#title");
el.dataset.motion = "split-text";
// run the entrance again: axi0Motion.play(el, "split-text")

The wrappers: SplitText.tsx (React, TypeScript) and SplitText.vue (Vue). Both render the same attributes as the HTML; the loader does the rest.

Options

Attribute	Default	What it does
`data-motion-split`	`words`	`words` or `chars` (letters)
`data-motion-from`	`below`	where each piece comes from
`data-motion-stagger`	`0`	milliseconds between pieces; 0 picks 70 for words, 28 for letters
`data-motion-duration`	`650`	milliseconds per piece
`data-motion-delay`	`0`	milliseconds before the first piece

Text already on screen at load stays as it is. Links and other markup inside are kept; with chars on plain text, screen readers hear one copy of the sentence. In React, put it on an element whose text does not change after mount (or give it a key so a change remounts it).

Size

split-text.js is 1.3 KB gzip. A page loads the loader (2.7 KB) and core.js (1.4 KB) once, whatever it uses.