Fill Text on Scroll
Fill text as you scroll the page in Framer. Three different options: fill a paragraph, a line, or a word at a time. The component is fully customisable.
Made with Workshop
Build your own component with AI
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.
