What is a scroll story (Scroll Scene)?

A scroll story is a section of your TeleportHQ site that plays as visitors scroll. It's built with the Scroll Scene element: the section stays on screen while the visitor scrolls through it, and its chapters take the stage one after another, with their words, pictures and numbers moving into place. Add an empty scene from Elements → Primitives → Motion → Scroll Scene, or a finished story from Elements → Sections → Stories.

What a TeleportHQ scroll story is made of#

A scroll story in TeleportHQ has a few parts. Each one has its own article.

• The scene. The Scroll Scene element holds the whole story. In its settings you choose how much scrolling the story takes (Scroll length), what it plays over (Background) and whether it stays on screen while it plays (Pin while scrolling). See How to set a Scroll Scene's length, background and pinning.
• Chapters. A chapter is one part of the story, such as a title, a product, a number or a quote. Chapters take turns: each one arrives, stays a moment and hands over to the next. You add them from 24 ready-made chapter templates. See How to add, reorder and time chapters in a Scroll Scene.
• What moves inside a chapter. Any element in a scene can move, fade or zoom as visitors scroll. Texts can appear word by word and numbers can count up. See How to animate an element as visitors scroll through a scene, How to reveal text word by word as visitors scroll and How to make numbers count up as visitors scroll.
• A background video. A Scroll Video plays frame by frame as the visitor scrolls, behind the chapters. See How to add a video that plays as visitors scroll (Scroll Video).
• The Scene Timeline. A panel under the canvas that shows every chapter as a row, so you can see and change when each part plays. See How to edit a Scroll Scene on the Scene Timeline.

When to use a scroll story#

Use a scroll story for the parts of a page you want visitors to take in one step at a time, for example:

• a product tour: the product, what makes it special, a number that proves it, a customer quote, a Buy button;
• how your service works, one numbered step per scroll;
• proof: numbers that count up, a wall of client logos, a testimonial;
• a gallery where pictures reveal, compare and slide past.

The Stories category in the Sections tab has seven finished stories for these cases. See How to add a ready-made scroll story.

How a scroll story looks while you edit#

In the TeleportHQ editor, a Scroll Scene doesn't scroll. It shows as one screen, frozen at one moment of the story. You choose that moment with the purple Editing position slider in the right panel, or with the playhead of the Scene Timeline. Both are editor-only: they change what you see, never what visitors see.

1. The layers tree. The scene has its own row, named Scroll Scene (or the story's name, such as Product story). Its chapters are the rows inside it. Click the row to select the whole scene.
2. The canvas. It shows the story at the editing position. Click a text or a picture to edit it, like anywhere else on the page.
3. The Scroll Scene section of the right panel. With the scene selected, it holds the scene's settings. With an element inside the scene selected, it shows the editing position and that element's scroll animation.
4. The Scene Timeline. It opens under the canvas whenever the scene, or anything inside it, is selected.

To see the story play with real scrolling, open Preview, or publish the site. Pinning and scrolling run there. See How to preview your site before publishing.

What visitors who ask for less motion see#

Some visitors turn on "reduce motion" in their phone or computer settings. A TeleportHQ Scroll Scene has a Reduced motion setting that decides what they see:

• Keep the story: the chapters still change as the visitor scrolls, but nothing slides or zooms. New scenes and ready-made stories use this.
• Show final state: everything is shown fully arrived.
• Stay start state: the scene holds its opening frame.

See What do visitors who turn on reduced motion see?

Good to know#

• Websites too. Scroll stories work in website projects. You don't need to turn on web app features to add one.
• Who can add one. Adding a scene, a story or a chapter needs a role that can edit components. Otherwise the editor says "Your current role does not have permission to edit components". See What can each role do?
• View-only projects don't show the Scroll Scene settings or the Scene Timeline.
• The AI Assistant can add a ready-made story or a chapter for you. For example, ask: "Add a Trust story to the homepage". See How to edit your website by chatting with the AI Assistant.
• Other kinds of animation (an element that fades in once, a hover effect, a page transition) don't need a scene. See Which animation options does TeleportHQ have?

Articles in this section#

• How to create a scroll story with the Scroll Scene element
• How to add a ready-made scroll story
• How to add, reorder and time chapters in a Scroll Scene
• How to set a Scroll Scene's length, background and pinning
• How to edit a Scroll Scene on the Scene Timeline
• How to make a Scroll Scene settle on each chapter (Chapter snap)
• How to animate an element as visitors scroll through a scene
• How to reveal text word by word as visitors scroll
• How to make numbers count up as visitors scroll
• How to add a video that plays as visitors scroll (Scroll Video)
• How to make a scroll video with AI