Text fill on scroll generator

Fill text as it scrolls

The box below is a small viewport. Scroll it, drag the slider or press Play: the text fills between the start and end lines, and what fills it is the engine you picked, given your settings and the box in place of the window.

/* Made with https://svg-scroll-draw.vercel.app/text-fill-scroll-generator */
.text-fill {
  color: #f2f0eb;
}

/* With scroll timelines it fills as it scrolls; without, it stays as above. */
@supports (animation-timeline: view()) {
  .text-fill {
    view-timeline-name: --text-fill;
  }
  .text-fill > span {
    color: transparent;
    background: linear-gradient(#f2f0eb, #f2f0eb) 0 0 / 0% 100% no-repeat #64625d;
    -webkit-background-clip: text;
    background-clip: text;
    animation-name: text-fill;
    animation-duration: auto;
    animation-timing-function: linear;
    animation-fill-mode: both;
    animation-timeline: --text-fill;
    animation-range: entry-crossing 20vh entry-crossing calc(100% + 50vh);
  }
  /* Selected text stays readable: the background’s colour on the fill colour. */
  .text-fill > span::selection {
    color: #0b0b0c;
    background: #f2f0eb;
  }
}

@keyframes text-fill {
  to { background-size: 100% 100%; }
}

How the fill works

The letters are see-through, and what shows through them is the background, clipped to their shapes by background-clip: text. The background has two colours: the unfilled one everywhere, and over it a gradient layer of the filled colour, sized to the progress. At progress 0 that layer has no width; at 1 it covers the text (fig. 1).

.text-fill > span {
  /* The letters show only what is behind them. */
  color: transparent;
  background:
    /* The filled colour, p of the way along... */
    linear-gradient(#f2f0eb, #f2f0eb) 0 0 / calc(var(--p) * 100%) 100% no-repeat
    /* ...and the unfilled colour under it. */
    #64625d;
  /* Both painted inside the letters only. */
  -webkit-background-clip: text;
  background-clip: text;
}

Which box carries the background decides the direction. Put it on an inline <span> and the fill runs through the text in reading order, because an inline box’s background is laid out as if its lines were one line, end to end. Put it on the block and one front crosses every line at once; size it downwards instead and it fills from the top (fig. 2).

CSS, scrollProgress or scrollText

The two gradient engines draw exactly the same thing; they differ in what drives it. scrollText is a different effect, words that brighten one after another, and the one to use when a sentence should light up a word at a time.

Readable before, during and after

The text stays text. The gradient engines change nothing but the paint: one text node, read by screen readers, indexed by search engines and selectable like any other. The CSS adds a ::selection rule, because selected see-through letters would otherwise show the browser’s highlight colour where the letters should be.

Split, but read once. scrollText wraps each word, letter or line in a span marked aria-hidden and adds one visually hidden copy of the whole text, which cannot be selected, so a screen reader reads the sentence once and a copy picks up the visible text once. Why a hidden copy and not an aria-label.

The unfilled text is still text. Someone may read a paragraph faster than they scroll it, so the dim state needs contrast too: WCAG asks 4.5:1 for body text and 3:1 for large text. The generator shows the ratio for both states as you pick the colours, the scrollText one blended from the text colour and its opacity as the browser composites it.

Reduced motion. For readers who ask their system for less motion, scrollText shows the text in full at once, and switches to that if they turn the setting on mid-visit. The gradient engines move nothing, only change colour in place, so they keep filling; to show the text filled for those readers as well, add this after the generated CSS.

/* Optional: show it filled for readers who ask for less motion. */
@media (prefers-reduced-motion: reduce) {
  .text-fill,
  .text-fill > span {
    animation: none;
    background-size: 100% 100%;
  }
}

Use it in your project

npm i svg-scroll-draw

Text fill on scroll questions

The rest of svg-scroll-draw 2.23.3: the docs, the scroll trigger visualizer for the start and end lines, and the CSS scroll-driven animation generator.