About Fill Text on Scroll

Fill text as you scroll the page in Framer

There are three options: fill a paragraph, a line, or a word at a time.

The component is super customisable. Choose whether the text is filled early, normal or late in the viewport. You can choose whether the text fill transition replays when you scroll back up or not.

And of course, you can fully customise your typography: all font properties, the base color, the fill color, and extra options like whether your paragraph lines should be balanced, and whether the text is user-selectable.

Key features

Fully customisable to suit your design
Works with paragraphs too
Three different fill modes: paragraph, line and word
Style responsively as you would any other Framer element
Free updates for life

What you can customise

Fill mode: Fill in the text a paragraph, line or word at a time
Colors: Base and fill color
Typography: Font, weight, size, line-height, alignment, letter spacing, Opentype features, text transform, balance
Trigger: Choose if you want the fill colour to trigger early, normal, or late‍
Play once: Choose if you want the animation to replay if you scroll back up
User Select: Turn off to prevent text selection‍
Accessibility: Pick the html tag for text (H1–H6, P, Span)