Scroll reveal · Letters

Letter cascade

Letters pour into place as each statement enters, then lift away when it leaves the viewport.

01 · Begin

Start before you feel ready.

02 · Continue

Momentum writes the next line.

03 · Arrive

Leave a bright trace behind.

Basic recipe

Reveal split letters on scroll

HTML

<h2 data-a11y-text-split
    data-split-type="letters"
    data-split-mode="visual"
    data-split-scroll>
  Start before you feel ready.
</h2>

JavaScript

import { splitAll } from
  '../dist/index.js';
import { scrollRevealAll } from
  '../dist/scroll.js';

splitAll();
scrollRevealAll();

Native view timelines drive the animation where supported. The add-on falls back to one shared IntersectionObserver in older browsers.