How to set a Scroll Scene's length, background and pinning

In TeleportHQ, a Scroll Scene's settings are in the Scroll Scene section of the right panel, shown when the scene itself is selected. Scroll length sets how many screens of scrolling the story takes. Background sets what it plays over: a colour, the dark story gradient or a video. Pin while scrolling keeps the scene on screen while it plays, and Reduced motion sets what visitors who ask for less motion see.

Before you start#

• Select the scene itself. In the layers tree, click its row, named Scroll Scene (or the story's name, such as Product story). If an element inside the scene is selected, click the small arrow icon at the right of the Scroll Scene heading in the right panel: it selects the scene.
• If the AI Assistant is open, click Back To Dev Mode to get the right panel back.

Set how long the story scrolls#

Scroll length is how much scrolling a visitor spends inside the scene, counted in screens. One screen is one full scroll of the visitor's window.

1. Select the scene. In the right panel, find the Scroll Scene section.
2. Drag the Scroll length slider. The number beside it shows the length, for example "4.5 screens".
3. Read the line under the slider. It tells you how the pace feels, for example "≈ 1.5 screens per chapter — comfortable". Under 0.8 screens per chapter reads as brisk; over 1.8 as slow and cinematic.

1. Scroll length and the pace line under it.
2. Background (see the next part).

Three to four screens suit most stories. Longer scenes feel slower and more deliberate. The slider goes from 1 screen up to 8, or further for long stories (2 screens per chapter).

Until you set the length yourself, TeleportHQ sets it for you: about 1.2 screens per chapter, and enough for a background video to play without rushing. Each chapter you add makes the scene longer. Once you move the slider, the length is yours and stays as you set it.

Choose a background#

The Background row holds one choice at a time:

• A colour. Click the colour square and pick a colour, or type one in the box next to it (it reads "None" when nothing is set) and press Enter.
• The dark story gradient. Click the small dark square at the end of the row (tooltip Use the dark story gradient). Ready-made stories start with it, because their chapters use white text. The row then reads Gradient, with a × to remove it.
• A video that plays as visitors scroll. Click + Video at the right of the Background label. TeleportHQ adds a Scroll Video inside the scene, behind the chapters, and selects it so you can pick its clip. The row then shows the video's name, and a × at the right that removes it. See How to add a video that plays as visitors scroll (Scroll Video) and How to make a scroll video with AI.

The colour and the gradient are the same setting as the scene's background in the style panel: change one and the other follows. A video plays on top of them; they show while the video loads.

Set smoothing, pinning and reduced motion#

The lower part of the Scroll Scene section has four more settings:

1. Smoothing lets the scene trail the scroll with a little weight, so a fast flick of the mouse wheel reads as smooth movement instead of a jump. 0 follows the scroll exactly. New scenes start at 0.3.
2. Pin while scrolling (on for new scenes) holds the scene's content on screen while the visitor scrolls through its whole length, and the story plays over it. Turned off, the content scrolls past like the rest of the page, still animated. The Chapters row shows only while this is on.
3. Chapter snap (Off or Gentle) makes the story settle on the nearest chapter when the visitor stops scrolling. See How to make a Scroll Scene settle on each chapter (Chapter snap).
4. Reduced motion sets what visitors see when their phone or computer is set to "reduce motion".

The Reduced motion list has three choices:

• Keep the story: chapters still change as the visitor scrolls, but nothing slides or zooms. A row too wide for the screen can be swiped. New scenes and ready-made stories use this.
• Show final state: everything shows fully arrived.
• Stay start state: the scene holds its opening frame.

It applies only to visitors who turned on "reduce motion". Everyone else sees the full story. See What do visitors who turn on reduced motion see?

Check that it worked#

These settings show on your site, not in the editor: the editor always shows one screen of the scene at the Editing position. Open Preview and scroll through the scene. With pinning on, it stays on screen for its whole length. See How to preview your site before publishing.

Troubleshooting#

"This scene already has a background video — selected it. One clip per scene; use another Scroll Scene for the next shot." A scene holds one background video. TeleportHQ selected the one it already has. To use another clip, change that video's source, or add a second Scroll Scene.

The Background row shows Gradient or Image, and no colour square The scene has a gradient or a picture as its background. Click the × next to Gradient (or Image) to remove it. The colour square comes back.

The slider stops before the length I want The longest length grows with the number of chapters. Add chapters, or split the story into two scenes.

The settings I need aren't in the section An element inside the scene is selected, so the section only shows its editing position and animation. Click the arrow icon at the right of the Scroll Scene heading to select the scene.

Good to know#

• Editing position (the purple slider at the top of the section) is for you only. It moves the canvas through the story and saves nothing.
• A scene stored before the Reduced motion setting existed, and never changed, shows Show final state. That's what its visitors get.
• Websites too. All of these settings work in website projects, and publish with the site.