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.

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) Refund policy 30-day money-back guarantee if you’re not fully satisfied with the purchase. Questions and Support Email me at hello@bryntaylor.co.uk — happy to help.