How to create a scroll story with the Scroll Scene element

In TeleportHQ, you create a scroll story by adding a Scroll Scene: open Elements in the left sidebar, switch to Primitives, and in the Motion group click Scroll Scene. TeleportHQ adds a scene with three starter chapters and selects it. Replace the starter text with your own, add or change chapters, and open Preview to watch the story play as you scroll.

Before you start#

• Scroll Scenes work in every project, websites included. You don't need web app features.
• You need a role that can edit components. See What can each role do?
• To start from a finished story with five chapters instead, see How to add a ready-made scroll story.

1. Add the Scroll Scene#

1. On the canvas, choose where the scene goes. To add it at the end of the page, press Esc so nothing is selected. If an element is selected, the scene is added inside it, after its content.
2. In the TeleportHQ editor's left sidebar, click Elements (the first icon).
3. Open the Primitives tab.
4. Scroll to the Motion group. It holds Motion, Scroll Scene and Scroll Video.
5. Click Scroll Scene.

TeleportHQ adds the scene and selects it, and the canvas scrolls to it. The scene comes with three chapters that read "Every story starts here", "Build it beat by beat" and "Land the ending". The Scene Timeline opens under the canvas with one row per chapter.

To place the scene exactly, drag the Scroll Scene card onto the canvas, or into the layers tree, instead of clicking it.

2. Move through the story while you edit#

In the editor, a Scroll Scene shows one moment of its story at a time, on one screen. Scrolling the canvas doesn't play it.

1. Select the scene. The right panel shows the Scroll Scene section.
2. Drag the purple Editing position slider. At 0% you see the first chapter; at 100% the last one. The canvas follows as you drag.
3. To watch the whole story once, click the small play button (▶) at the right end of the Editing position row.

The editing position is for you only. It changes what the canvas shows, and nothing is saved to your site.

3. Put your own content in the chapters#

Each chapter is made of ordinary elements: a card with a small label, a headline, a line and a short text.

1. Drag Editing position until the chapter you want to change shows on the canvas.
2. Double-click the headline, then type your own text. See How to add and format text.
3. Change the other texts the same way. Restyle the card, or add images and buttons to it, like any other container. See How to add and replace images.

When you select a text or a picture inside a scene, the canvas moves to the moment where it shows, and the right panel's Scroll Scene section reads "Part of the Scroll Scene scene — its length, background and chapters are set on the scene itself." To get back to the scene's own settings, click the small arrow icon at the right of the Scroll Scene heading.

You can also select the whole scene from the layers tree: click its row, named Scroll Scene. A click on the canvas usually lands on a chapter or one of its texts instead. See How to use the layers tree to find and select elements.

4. Finish the scene#

With the scene selected, the Scroll Scene section has everything that belongs to the whole story:

• add, reorder and time chapters: How to add, reorder and time chapters in a Scroll Scene;
• set how long the story scrolls, what it plays over and whether it stays on screen: How to set a Scroll Scene's length, background and pinning;
• make elements move, texts appear word by word or numbers count up: How to animate an element as visitors scroll through a scene.

Check that it worked#

1. If the Scene Timeline covers the bottom toolbar, click Minimize (the dash at the timeline's top right).
2. In the bottom toolbar, click Preview.
3. Scroll down to your scene. It stays on screen while you scroll, and its chapters take turns.

See How to preview your site before publishing.

Troubleshooting#

"Your current role does not have permission to edit components" Your role can't add elements. Ask a workspace admin for a role that can edit components.

The scene landed inside another element An element was selected when you clicked the card, so the scene went inside it. Click Undo above the canvas, press Esc, and add the scene again. Or drag the scene's row in the layers tree to where it belongs. See How to move and rearrange elements by dragging.

Scrolling the canvas doesn't play the story That's expected: the editor shows one moment at a time. Use Editing position, the play button or the Scene Timeline. Real scrolling runs in Preview and on the published site.

The right panel has no Scroll Scene section Select the scene or an element inside it. If the AI Assistant is open, click Back To Dev Mode to get the right panel back. View-only projects don't show this section.

Good to know#

• One Undo removes the new scene with its three chapters.
• Starting length: the starter scene takes about 4.4 screens of scrolling, and grows each time you add a chapter, until you set the length yourself.
• Reduced motion: new scenes use Keep the story: visitors who turn on "reduce motion" still see the chapters change, without anything sliding or zooming. See What do visitors who turn on reduced motion see?