How to edit a Scroll Scene on the Scene Timeline

The TeleportHQ Scene Timeline shows a Scroll Scene's story from start (0%) to end (100%), with one row per chapter. It opens under the canvas when you select a Scroll Scene or anything inside it. Play or scrub the story with its playhead, click the arrow beside a chapter to see what moves inside it, drag a bar to change when something plays, and drag a chapter's row to reorder the story.

Before you start#

• You need a Scroll Scene on the page. See How to create a scroll story with the Scroll Scene element.
• The Scene Timeline is for editing by mouse: most changes are drags. Every drag is one step you can undo.

Open the Scene Timeline#

1. Select the Scroll Scene, or any element inside it. For example, click its row in the layers tree, or click a text of the story on the canvas.
2. The Scene Timeline opens along the bottom of the canvas. Its title reads Scene Timeline and the scene's name, for example Scene Timeline Product story.

If you see a small Timeline · 0% button at the bottom right of the canvas instead, the timeline is minimized: click it to open it.

1. Play and playhead. The play button plays the whole story once on the canvas. The slider beside it and the percentage show where the story is. You can also drag the purple playhead line, or click the scale (0, 25, 50, 75, 100) to jump there.
2. Rows. Each chapter has a bold row, in story order. A background video, if the scene has one, has its own row at the top, with an orange bar.
3. Bars. A bar shows when something plays, from the scene's start on the left to its end on the right. A chapter's bar covers its share of the story.
4. Minimize folds the timeline into a small button, so you can see the whole canvas and the bottom toolbar again.

The top of the timeline also has Re-deal evenly and + Chapter. See How to add, reorder and time chapters in a Scroll Scene.

The playhead is purple because it's for you only. It moves the canvas through the story and changes nothing on your site.

See what moves inside a chapter#

1. Click the small arrow at the left of a chapter's row. The rows of the pieces that move inside the chapter open under it, for example Product picture or Product name.
2. Click a piece's name. TeleportHQ selects that element on the canvas and in the right panel, and the canvas moves to the moment it shows.

1. The piece's row. Its name is highlighted while it's selected.
2. The "All" bar spans everything that moves on this piece. Under it, one coloured bar per property, such as Opacity, Move Y or Scale.
3. Diamonds are keyframes: the points the movement passes through.

A chapter row without a bar of its own shows no animation when nothing inside it moves, or a bar such as 3 animated: click that bar to open the chapter.

Change when something plays#

• Move it in time: drag the middle of a bar left or right. Drag the All bar to move every property of the piece together.
• Make it longer or shorter: drag either end of a bar.
• A chapter's own bar sets when the chapter itself fades in and out. The pieces inside it keep their own timing. To change a chapter's place in the story, reorder it (see below).
• Fine-tune the movement: drag a diamond sideways to change when it happens, or up and down to change how strong it is. Click a diamond to type exact numbers (At and Value) or to click Remove keyframe. Double-click a bar's row to add a diamond there.

While you drag, the canvas shows the change at the playhead. A chapter you re-timed by hand keeps its timing when you add or move other chapters. Re-deal evenly gives every chapter an equal share again.

To pick a ready-made movement instead of shaping it yourself, select the piece and use Scroll animation in the right panel. See How to animate an element as visitors scroll through a scene.

Add or remove what moves#

Point at a row to show its buttons at the right of its name:

• + (Add animated property) opens a list such as Opacity, Move X, Scale, Blur or Count up. Click one to add a bar for it.
• On a piece, the remove button stops it moving ("Stop animating — the element stays on the page").
• On a chapter, the bin deletes the chapter and everything in it ("Delete the chapter and everything in it — undo brings it back").
• On the background video, the bin removes the video.

To remove one property, point at its bar and click the × that shows at the bar's right end.

Reorder chapters#

Drag a chapter's row by its name, or by the ⠿ grip at its left, above or below another chapter's row. A purple line shows where it lands. The story follows the new order. See How to add, reorder and time chapters in a Scroll Scene.

Each chapter row also shows where the story settles for that chapter. See How to make a Scroll Scene settle on each chapter (Chapter snap).

Move, resize or minimize the timeline#

• Move it: drag the timeline by its title bar.
• Make it taller or shorter: drag its top edge.
• Minimize it: click Minimize (the dash at its top right). It becomes a Timeline · N% button with a play button beside it. Click Timeline · N% (tooltip Open the Scene Timeline) to open it again.

Check that it worked#

Click the play button, or drag the playhead from 0% to 100%: the canvas plays the story with your changes. For real scrolling, open Preview. See How to preview your site before publishing.

Troubleshooting#

The Scene Timeline doesn't show Select the Scroll Scene or an element inside it; the timeline shows only then. View-only projects don't show it.

The timeline covers the bottom toolbar (Preview, Backups) Click Minimize at the timeline's top right.

"No chapters yet — add the first one with "+ Chapter" above" The scene has no chapters. Click + Chapter at the top of the timeline.

A change went wrong Click Undo above the canvas. Each drag is one step. See How to undo and redo changes.

Chapters overlap after I moved one by hand Click Re-deal evenly at the top of the timeline to give every chapter an equal share again.