Scroll reveal · Lines

Line chapters

Responsive rendered lines stack into place and regroup whenever the layout changes.

Chapter one

The horizon moves when you do.

Chapter two

Distance becomes a different kind of detail.

Chapter three

Every arrival redraws the map.

Basic recipe

Trigger responsive lines

HTML

<h2 data-a11y-text-split
    data-split-type="lines"
    data-split-mode="visual"
    data-split-scroll
    data-scroll-once>
  The horizon moves when you do.
</h2>

JavaScript

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

splitAll();
scrollRevealAll();

The data-scroll-once option keeps each chapter visible after its first reveal and immediately removes that target from the observer.