Cycle through words in any Webflow heading or text block

A heading that communicates one idea is good. A heading that communicates three ideas in the same space - each one sliding into view with a smooth transition - is more powerful. The scroll word effect has become one of the most recognisable patterns in modern web design precisely because it works. It draws attention, holds it, and gives a headline room to say more without taking up more space. Building it in Webflow without a kit means writing custom CSS animations, managing timing loops in JavaScript, and rebuilding the same logic every time a new project needs it.

The Fractional ScrollWriter kit solves this with a single lightweight script and a set of custom attributes applied directly in the Webflow Designer.

Here is what you need to know:

• The Fractional ScrollWriter Kit works by targeting an inline span element placed inside any Webflow heading or text element. The span is where the animated text appears - the rest of the heading remains completely static. This means you can have a heading that reads Built for with the scroll effect cycling through founders., agencies., and growing teams. — all controlled through attributes with no JavaScript required.
• Two transition styles are available. Scroll mode transitions words with a vertical movement — the current word slides upward out of view as the next slides in from below, exactly like the animated headings seen on modern SaaS and DTC sites. Fade mode crossfades between words — the current word fades out as the next fades in. Choose the transition that fits the tone and pace of your design.
• Each word in the cycle can have its own colour. Set a list of hex colours using the /,/ separator and each colour maps to the word in the same position. If no colours are set all words inherit the span's existing styles from Webflow — giving you full control whether you want colour variation or a consistent look.
• The transition speed is configurable. Set how long each word stays visible and how fast the transition between words plays in milliseconds. The default is 400ms which feels smooth and readable at most heading sizes. Adjust it to match the pace and energy of your page.
• Multiple ScrollWriter instances work independently on the same page. Each span runs its own animation with its own word list, its own colours, and its own timing — a page with two different animated headings each cycles through its own content without any interference.
• The Fractional ScrollWriter Kit is fully GDPR, CCPA, and PIPEDA compliant. It sets no cookies, makes no external requests, and collects no personal data of its own.

‍