How to make a Scroll Scene settle on each chapter (Chapter snap)

In TeleportHQ, Chapter snap makes a scroll story come to rest on a chapter instead of halfway between two. Select your Scroll Scene, and in the right panel's Scroll Scene section set Chapter snap to Gentle. When a visitor stops scrolling partway through the story, it glides to the nearest chapter. Chapter snap works in Preview and on your published site.

Before you start#

• You need a Scroll Scene with chapters. See How to create a scroll story with the Scroll Scene element and How to add, reorder and time chapters in a Scroll Scene.
• Pin while scrolling must be on. It's on for every new scene. Chapter snap only works on a pinned scene. See How to set a Scroll Scene's length, background and pinning.

Turn on Chapter snap#

1. On the canvas, click any element inside your scroll story, for example its heading.
2. In the right panel, on the Visual tab, find the Scroll Scene section near the top.
3. Click the small arrow button at the right end of the Scroll Scene title. This selects the Scroll Scene itself, and the section now shows all of the scene's settings. You can also click the scene's row in the layers panel.
4. Check that Pin while scrolling is on.
5. Click the Chapter snap list. It shows Off by default.

6. Choose Gentle.

Choose where each chapter settles (optional)#

By default, each chapter of a TeleportHQ Scroll Scene settles on the moment when everything in it has arrived. To choose another moment for one chapter, use the Scene Timeline under the canvas. It opens when the scene, or anything inside it, is selected. If it shows as a small Timeline · …% bar, click the bar.

1. Move the playhead to the moment you want: drag the slider in the timeline's header, or drag the playhead line itself.
2. In the timeline's left column, point at the chapter's row. A ⌖ button appears on the row.
3. Click ⌖ (Pin this chapter's settle point to the playhead). The ⌖ stays visible on the row, and a marker on the row shows the settle point.

To move the settle point, drag its marker along the row. To make it automatic again, click ⌖ once more. See How to edit a Scroll Scene on the Scene Timeline.

The settle point is also where links to the chapter land, and the moment the A Chapter Is Reached workflow trigger runs.

Check that it worked#

Chapter snap doesn't run on the TeleportHQ canvas. In the editor, a Scroll Scene shows one screen, and you move through the story with Editing position.

1. In the bottom toolbar, click Preview.
2. Scroll into your scroll story and stop between two chapters.
3. After a moment, the page glides to the nearest chapter.

See How to preview your site before publishing.

Troubleshooting#

The story doesn't settle on a chapter

• Pin while scrolling is off. Turn it on: Chapter snap only works on a pinned scene.
• You're scrolling on the canvas. Test it in Preview.
• Your computer or phone has "reduce motion" turned on. Chapter snap never moves visitors who ask for less motion.
• You stopped at the very start or the very end of the scene. Chapter snap only acts between the two.

It settles a little too early or too late

Pin the chapter's settle point, as described in "Choose where each chapter settles".

Good to know#

• Gentle never takes the scroll away from your visitors: nothing moves while they're still scrolling. A moment after they stop, the story settles in the direction they were going, so a short scroll forward lands on the next chapter, not back on the one they left.
• With a background video, the clip glides to that chapter's frame too.
• You can also ask the AI Assistant, for example: Turn on chapter snap for the hero scroll story.
• Visitors who turn on reduced motion are never moved. See What do visitors who turn on reduced motion see?
• In code downloads, Chapter snap plays in the Next.js and HTML downloads. React, Vue, Nuxt and Angular downloads show the same content without the animation.