Skip to main content

How to Use the Timeline Layout in Storydoc

Learn how to add and customize a Timeline layout in your Storydoc presentations, including sections, styles, and layout options.

Written by Jack

Adding a Timeline to Your Story

The Timeline layout lets you present information in a sequential, scroll-driven format. As your reader scrolls through the slide, each section is highlighted in turn — making it a great way to walk through stages, milestones, or year-by-year results.

To add a Timeline, navigate to the slide you want to edit. On the right side of the editor, click Add a content block. From the menu that appears, select Timeline.

The

Adding Content to Timeline Sections

Once the Timeline is added, you'll see it appear on your slide with multiple empty sections. Each section has an Add element prompt where you can insert Text, Image, Video, or more.

Click on a section to start building it out. For example, you can add a title element to label the section, then insert a chart, image, or any other content beneath it.

The Timeline layout added to a slide, showing empty sections with

Each section on the left or right side of the timeline spine can hold different content independently. This lets you tell a richer story — for example, pairing a title like "Year 1 Results" with a chart showing that year's data.

v0_frame_005

Managing Timeline Sections

You can add more sections to your timeline at any time by clicking the Add a point option. You can also:

  • Reorder sections by clicking on the up and down arrows

  • Duplicate a section to reuse its structure

  • Delete a section you no longer need

As you scroll through the different sections in the editor, each one will highlight — just as it will for your readers when they view the published story.

v0_frame_015

Customizing the Timeline Layout

Click on the Timeline block itself (not an individual section) to access the full set of layout and style controls in the top toolbar. These include:

  • Align — Set the horizontal alignment to Left, Center, or Right

  • Style — Choose from vertical or horizontal layout variants

  • Timeline color — Change the color of the timeline spine and markers

  • Width — Adjust the overall width of the timeline block

  • Layout — Access Numeration, Style, and Container settings

v0_frame_017

Layout Options: Numeration, Style, and Container

Clicking Layout in the toolbar opens a panel with three additional settings:

  • Numeration — Choose how each section is marked: Bullets, Arrows, Numbers, or Text

  • Style — Select between a Line (straight vertical or horizontal line) or a Path (a curved, flowing path connecting sections)

  • Container — Set whether the content blocks appear Side by side (alternating left and right) or Full width

The Layout panel open, showing Numeration options (Bullets, Arrows, Numbers, Text), Style (Line/Path), and Container (Side by side/Full)

Switching between Line and Path changes the visual feel significantly — Line gives a clean, structured look, while Path adds a more dynamic, flowing appearance between timeline sections.

The timeline displayed with a Path style, showing a curved line connecting sections

How It Looks for Readers

When a reader views your story, each timeline section is progressively highlighted as they scroll down the page. The active section stands out while the others remain subtly in the background — keeping the reader focused on one step at a time.

This scroll-driven experience works automatically — no extra setup is required once your content is in place.

Did this answer your question?