Scroll stories

How to reveal text word by word as visitors scroll

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

Steps

  1. On the canvas, click the heading or paragraph once to select it. Don't double-click: that starts editing the text.
  2. In the right panel, on the Visual tab, find the Scroll Scene section near the top.
  3. Click the Scroll animation list. It shows No animation.
  4. In the Reveal group, choose Word by word ("Splits this text so the words arrive one after another.").
The open Scroll animation list for a heading in a TeleportHQ scroll story, with Word by word highlighted in the Reveal group

The list now reads Word by word.

The Scroll Scene section of a TeleportHQ heading after Word by word was chosen, with the Scroll animation list reading Word by word
  1. 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.

The TeleportHQ Scene Timeline with the split heading shown as one row, HeroTitle — 9 words, and its single bar

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

  1. Select the text.
  2. 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

Share

Related Articles

How to animate an element as visitors scroll through a scene

In TeleportHQ, select any element inside a Scroll Scene and choose a Scroll animation in the right panel's Scroll Scene section, such as Rise in or Parallax, or choose Custom (keyframes) to decide what changes, when and by how much, so the element moves with the visitor's scroll.

How to edit a Scroll Scene on the Scene Timeline

In TeleportHQ, select a Scroll Scene or anything inside it and the Scene Timeline opens under the canvas, with one row per chapter; play or scrub the story with its playhead, open a chapter to see what moves inside it, drag bars to change when things play, and reorder chapters by dragging their rows.

How to add, reorder and time chapters in a Scroll Scene

In TeleportHQ, select a Scroll Scene and click + in the Chapters row of the right panel (or + Chapter in the Scene Timeline) to add a chapter from 24 templates; drag a chapter's row in the Scene Timeline or the layers tree to reorder it, and click Re-deal evenly to give every chapter an equal share of the story again.

What is a scroll story (Scroll Scene)?

A scroll story in TeleportHQ is a section built with the Scroll Scene element that stays on screen while visitors scroll through it, so its chapters take the stage one after another; add one from Elements → Primitives → Motion → Scroll Scene, or a ready-made one from Elements → Sections → Stories.

What do visitors who turn on reduced motion see?

TeleportHQ sites respect the "reduce motion" setting of a visitor's device automatically; Motion animations show the content in place without moving, rows that slide by themselves stand still and can be swiped, page transitions become instant, and each Scroll Scene and Scroll Video shows what you choose in its Reduced motion setting.