Scroll reveal · Enter and exit

Exit echo

Words arrive from below, hold their shape, and recede upward. Scroll back to reverse the story.

Signal 01

What enters will eventually leave.

Signal 02

The echo carries a changed version.

Signal 03

Return and the motion answers back.

Basic recipe

Animate entry and exit

HTML

<h2 data-a11y-text-split
    data-split-type="words"
    data-split-mode="visual"
    data-split-scroll>
  What enters will eventually leave.
</h2>

JavaScript

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

splitAll();
scrollRevealAll();

The fallback records whether an element left above or below the viewport, allowing CSS to choose the correct exit direction without a scroll event listener.