Text Fill Scroll

Progressively fills text color as the element scrolls into view. It is shown in the block inserter as Canvas Text Fill Scroll and registered as canvas-core/text-fill-scroll.

Select the block on a page and its own settings open in the sidebar, in the panels below:

Settings

Each setting is named exactly as the block editor names it, followed by what it does and what it starts as. Where a setting carries a Shown when line, it stays hidden until that condition is met, which is the usual reason a setting looks missing from the sidebar:

Settings

• Text ContentDefaultEmpty

  The words that fill with colour as the visitor scrolls. The block renders nothing while this is empty.

• HTML TagDefaultp

  Whether the text counts as a heading in the page outline, and at which level. Choose a paragraph for a statement that is not a heading.

  ChoicesH1H2H3H4H5H6pdivspan

• Scroll OffsetDefault40%

  How far the element must enter the viewport before filling begins.

• Transition Duration (ms)Default100

  How smoothly the fill follows the scroll, in milliseconds. Raise it to soften the movement, lower it to have the colour track the scroll exactly.

• Fill DirectionDefaultLeft to Right

  Which way the colour sweeps across the words. Left to Right reads as the words being written; Bottom to Top suits a single large line.

  ChoicesLeft to RightRight to LeftTop to BottomBottom to Top

Style

• Fill ColorDefaultEmpty

  Colour the words take as the fill passes over them.

• Base (Unfilled) ColorDefaultEmpty

  Colour the words start in, before the fill reaches them. A pale grey is the usual choice.

Related

Every Canvas block also carries the Animation, Scroll Effects and Advanced panels, which are described in Controls every Canvas block has.

Other blocks in Interactive: Accordions, AJAX Buttons, Carousels, Cookie Consent, Countdowns, Flip Cards.