How to reveal text word by word as visitors scroll
In TeleportHQ, a heading or paragraph inside a Scroll Scene can appear one word at a time as visitors scroll. Select the text, and in the right panel's Scroll Scene section open Scroll animation and choose Word by word. TeleportHQ splits the text into words that arrive one after another. To undo the effect later, choose No animation, and the text joins back into one piece.
Before you start
- The text must be inside a Scroll Scene. See How to create a scroll story with the Scroll Scene element.
- It needs at least two words, written as one plain piece of text. Word by word isn't offered for text with bold or italic words, links inside it, or words that come from your data.
Steps
- On the canvas, click the heading or paragraph once to select it. Don't double-click: that starts editing the text.
- In the right panel, on the Visual tab, find the Scroll Scene section near the top.
- Click the Scroll animation list. It shows No animation.
- In the Reveal group, choose Word by word ("Splits this text so the words arrive one after another.").
The list now reads Word by word.
- Drag Editing position, or click ▶ next to it, to watch the words arrive on the canvas.
How the words arrive
- In the first chapter of a scene, or in a scene without separate chapters, visitors see the text before they start scrolling. So the words start dimmed and light up one after another.
- In a later chapter, the words are hidden until their turn, then rise into place one after another.
- In both cases, when the chapter hands over to the next one, the words leave with it.
Change when the words arrive
On the Scene Timeline under the canvas, the split text shows as one row, for example HeroTitle — 9 words, with one bar. Drag the bar to make the words arrive earlier or later, or drag its ends to make the reveal faster or slower. See How to edit a Scroll Scene on the Scene Timeline.
Edit the words
Double-click the text on the canvas and type, as with any text. When you finish, TeleportHQ splits the new words again and keeps the timing they had. If only one word is left, it stays a plain text.
Turn it off
- Select the text.
- In Scroll animation, click ✕ next to the list, or choose No animation.
The words join back into one text. If you change your mind, one Undo brings the reveal back. See How to undo and redo changes.
Check that it worked
On the canvas, drag Editing position: the words light up or rise one after another. To see it with real scrolling, click Preview in the bottom toolbar. See How to preview your site before publishing.
Troubleshooting
Word by word isn't in the list The text has only one word, has bold or italic words or links inside it, shows words from your data, or isn't inside a Scroll Scene. Remove the formatting, or choose another animation from the list.
"Word-by-word needs a text element with at least two words." The text couldn't be split. Make sure it has at least two words in one plain piece of text, then try again.
Good to know
- You can also ask the AI Assistant, for example:
Reveal the hero headline word by word. - For visitors who turn on reduced motion, a scene set to Keep the story (the default for new scenes) still shows the words one after another, without the rise. Show final state shows the whole text. See What do visitors who turn on reduced motion see?
- The Title card chapter template already brings its title in word by word. See How to add, reorder and time chapters in a Scroll Scene.