How to add, reorder and time chapters in a Scroll Scene
In a TeleportHQ Scroll Scene, chapters are the parts of the story that take turns as visitors scroll. To add one, select the scene and, in the right panel's Scroll Scene section, click + in the Chapters row (or + Chapter in the Scene Timeline), then pick a template. To reorder chapters, drag a chapter's row in the Scene Timeline or the layers tree. Re-deal evenly gives every chapter an equal share of the story again.
Before you start
- You need a Scroll Scene on the page. See How to create a scroll story with the Scroll Scene element or How to add a ready-made scroll story.
- Select the scene itself: in the layers tree, click its row (named Scroll Scene, or the story's name such as Product story). The right panel then shows the scene's Scroll Scene section.
How chapters share the story
A Scroll Scene's story runs from 0% (the visitor arrives at the scene) to 100% (the visitor scrolls past it). TeleportHQ splits that run evenly between the chapters, in their order: with four chapters, each one has a quarter of the scroll. Chapter order is story order.
Every time you add, move or delete a chapter, TeleportHQ splits the story evenly again. A chapter whose timing you changed yourself on the Scene Timeline keeps its timing. Re-deal evenly brings that one back in line too.
Add a chapter
With a Scroll Scene selected, the Chapters row of the right panel's Scroll Scene section has three parts:
- The number of chapters in the scene, for example "5 chapters".
- Re-deal evenly: gives every chapter an equal share of the story. It's greyed out when the chapters already share it evenly.
- + (Add chapter): opens the list of chapter templates.
To add a chapter:
- Select the scene. In the right panel, find the Chapters row of the Scroll Scene section.
- Click +. The list of chapter templates opens, with a search box (Search chapter templates…) at the top.
- Point at a template to see a short preview of how it moves. Glass card (the default chapter) has no preview.
- Click a template, for example Big number.
TeleportHQ adds the chapter at the end of the story and splits the story evenly again. A template chapter is selected, so you can edit its texts right away. While you haven't set the scene's Scroll length yourself, it grows by about 1.2 screens for the new chapter.
You can also add a chapter from the Scene Timeline: click + Chapter at the top of the timeline. It opens the same list.
The chapter templates
The list has Glass card (a headline and a line on a dark glass panel, the default chapter) and 23 templates in four groups.
| Group | Template | What visitors see |
|---|---|---|
| Say it | Title card | One huge headline; its words arrive one after another. |
| Cascade | Three short lines that land one after another. | |
| Read-along paragraph | A paragraph whose words light up one by one as the visitor scrolls. | |
| Caption | A small line in a corner, over a picture or video. | |
| Quote | A big quotation, with the name arriving last. | |
| Testimonial | A customer's photo, their words, then their name. | |
| Show it | Split reveal | Words on one side, a picture on the other, each arriving from its own edge. |
| Mask reveal | A picture wiped into view from left to right. | |
| Before / after | Scrolling wipes an "after" picture over a "before" picture. | |
| Zoom into detail | A picture pushes in toward one spot, with a label. | |
| Product spotlight | A product picture and a card with name, line, price and button. | |
| Logo wall | Six logos that light up one after another. | |
| Callout | A dot, a line growing out of it and a label: "this part here". | |
| Snapshot | A framed photo drops in, then its caption. | |
| Prove it | Big number | One number counting up, with the words that make it matter. |
| Three numbers | Three counters that count up side by side. | |
| Move it | Step marker | A numbered step with a title and a line. Add one per step of a process. |
| Sideways track | A row of stops slides across as the visitor scrolls down. | |
| Crossing line | One huge word or phrase crosses the screen. | |
| Colour wash | The whole stage shifts colour, then the words come into focus. | |
| Parallax depth | A picture, a headline and a label drift at different speeds. | |
| Theme shift | A new background colour washes in and stays for every chapter after it. | |
| Finale | The headline, a line and a button arrive last, and stay. |
Template chapters come with sample texts and placeholder pictures. Replace them like any other text or picture. To make numbers count up, see How to make numbers count up as visitors scroll.
Reorder chapters
Dragging is the way to reorder chapters. Either way, TeleportHQ splits the story again to follow the new order.
On the Scene Timeline:
- Select the scene or anything inside it. The Scene Timeline opens under the canvas, with one bold row per chapter.
- Drag a chapter's row by its name (or the ⠿ grip at its left) above or below another chapter's row. A purple line shows where it will land.
- Release. The chapter takes its new place in the story.
In the layers tree: drag the chapter's row to its new place inside the scene's row. See How to move and rearrange elements by dragging.
Change a chapter's timing
- To share the story evenly again, click Re-deal evenly in the Chapters row or at the top of the Scene Timeline. Every chapter gets an equal share, in its current order, including chapters you timed by hand. The animations inside each chapter stay as they are; only when they play moves.
- To change when one chapter, or a piece inside it, comes and goes, drag its bar on the Scene Timeline. See How to edit a Scroll Scene on the Scene Timeline.
- To choose the moment the story settles on for a chapter, see How to make a Scroll Scene settle on each chapter (Chapter snap).
Delete a chapter
- Select the chapter: click its row in the Scene Timeline or the layers tree.
- Press Delete or Backspace. Or, on the Scene Timeline, point at the chapter's row and click its bin icon ("Delete the chapter and everything in it — undo brings it back").
The other chapters share the story evenly again. Undo brings the chapter back.
Check that it worked
- The Chapters row shows the new number of chapters.
- The Scene Timeline has one bold row per chapter, in story order.
- Drag Editing position from 0% to 100%: the chapters take turns on the canvas in that order.
Troubleshooting
The Chapters row is missing from the Scroll Scene section It shows only while Pin while scrolling is on. Turn it on, or add chapters with + Chapter on the Scene Timeline. Also check that the scene itself is selected, not an element inside it: an element inside shows a shorter section that starts "Part of the … scene".
"… kept its hand-tuned timing, so chapters may overlap there." You changed that chapter's timing on the Scene Timeline, so adding a chapter didn't move it. Click Re-deal evenly to line the whole story up again.
"Could not add the Big number chapter. Please try again." The chapter couldn't be prepared. Click + and pick the template again.
Re-deal evenly is greyed out The chapters already share the story evenly, so there's nothing to change.
Good to know
- One Undo removes a chapter you added, undoes a reorder, or undoes Re-deal evenly.
- Numbered templates count on. A second Step marker in the same scene says 02, not 01 again.
- The AI Assistant can add a chapter for you, for example: "Add a Big number chapter to the scroll scene". See How to edit your website by chatting with the AI Assistant.