How to add a video that plays as visitors scroll (Scroll Video)

In TeleportHQ, a Scroll Video is a clip that plays forward as visitors scroll down and backward as they scroll up. Add it from the Motion group in Elements → Primitives, then click Choose or upload a video on its card, or Make one with AI. TeleportHQ makes a copy of the clip optimized for scrolling, and files it in the Scroll videos folder of your assets.

Before you start#

• Uploading your own video needs a trial or a paid plan. The file must be an MP4, M4V or MOV. See Which files can I upload, and how big can they be?
• Short clips work best: every second of video needs more scrolling, and makes the page heavier.
• A Scroll Video always lives inside a Scroll Scene, which drives it as visitors scroll. Adding one from the Elements panel adds the scene too. See What is a scroll story (Scroll Scene)?

1. Add the Scroll Video#

1. Select the section or container the video should go into. With nothing selected, it's added at the end of the page.
2. In the left sidebar, click Elements, then the Primitives tab.
3. In the Motion group, click Scroll Video.

A new Scroll Scene is added, with the Scroll Video filling it as its background. The video is selected, and its card on the canvas reads Scroll video.

To add a video to a Scroll Scene you already have, select the scene and click + Video in the Background row of its Scroll Scene section. See How to set a Scroll Scene's length, background and pinning.

2. Give it a clip#

1. On the video's card, click Choose or upload a video. The Assets Manager opens.

2. To use your own file, open the Uploads tab and drag the video file from your computer into it. Wait until the upload finishes.
3. Point at the video and click its replace asset button. The video becomes the clip.
   • For a free stock clip instead, open Stock, then Pexels, and click a video.
4. A cover on the video reads Optimizing clip for scrolling…, and the Source row says encoding…. When it disappears, the clip is ready.

The optimized copy is saved in the Scroll videos folder of the Assets Manager, together with a still picture (the poster) and a lighter copy that phones load.

To make the clip with AI instead, see How to make a scroll video with AI.

3. Adjust how it plays#

Select the video. In the right panel, on the Visual tab, the Scroll Video section has these settings:

1. Source: the clip. ✦ (Generate a clip with AI) makes one with AI; the picture button next to it opens the Assets Manager to pick another clip.
2. Encoding: Balanced (the default) looks almost the same as Max quality at about half the file size. Max quality gives the sharpest frames; Small file is the lightest. Changing it optimizes the clip again from your original video. If you pasted a video address into Source, click Optimize here.
3. Active window (%): the part of the scene during which the clip plays, from 0 (the start of the scene) to 100 (its end). Before it, the video shows its first frame; after it, its last frame.
4. Reduced motion: what visitors who turn on reduced motion see instead of the moving clip: Show the poster image (the default) or Show the final frame.

The section also has:

• Extend clip (once the video has a clip): makes it longer with AI. See How to make a scroll video with AI.
• Editing position and ▶: move through the clip on the canvas. This only changes what you see in the editor.
• Play back to the start: the clip plays to its end by the middle of the window, then back to its first frame, so the scene ends where it began.
• Smoothing: how long the clip keeps gliding after visitors stop scrolling. 0 stops it at once.

Check that it worked#

On the TeleportHQ canvas, drag Editing position or click ▶ in the Scroll Video section: the clip moves through its frames. To see it with real scrolling, click Preview in the bottom toolbar and scroll through the scene. See How to preview your site before publishing.

Troubleshooting#

"… Videos are not compressed when published: visitors download the whole file." TeleportHQ shows this for every uploaded video of 5 MB or more. For a Scroll Video, your page uses the optimized copy, not the file you uploaded. A shorter clip still makes a lighter page.

"This clip is heavier than the page can load quickly, so it was compressed more than usual …" The clip was too heavy to keep its full sharpness, so its optimized copy looks softer. It still scrolls fine. For a sharper result, use a shorter or simpler clip. This notice stays until you close it.

"Could not prepare the clip for scrolling" Click Retry encoding in the Encoding row. If it fails again, choose the clip again.

"This scene already has a background video — selected it. One clip per scene; use another Scroll Scene for the next shot." You added a Scroll Video inside a scene that already has one. A scene plays one clip. Select something outside the scene first, then add the Scroll Video again: it comes with a new scene.

The video doesn't show in Preview or on the live site A Scroll Video without a clip shows nothing outside the editor. Give it a clip.

"No Scroll Scene is driving this clip" The video isn't inside a Scroll Scene, so it can't follow the scroll. Click Wrap in Scroll Scene next to the message.

Good to know#

• Visitors who turn on reduced motion see a still picture instead of the moving clip, as set in Reduced motion. See What do visitors who turn on reduced motion see?
• A scene has one background video. To tell a second clip, use another Scroll Scene.
• AI clips are made in the background. If you reload or close the editor before one is ready, it still reaches your project the next time the project is opened in the editor. See How to make a scroll video with AI.
• Old optimized copies that no element uses any more can be removed with Clean up unused scroll video encodes in the command palette. See How to use the command palette.
• For an ordinary video that plays on its own, use the Video element. See How to add a video from your computer.