How to make a timeline view in Bubble.io: Step-by-Step Guide

Go to Data tab and create a 'TimelineEvent' Data Type with fields: title (text), description (text), event_date (date), icon (text — for emoji or icon name), color (text — hex color code), and user (User — optional, for user-specific timelines). Add sample data with 5-6 events at different dates.

On your page, add a Repeating Group with data source: Do a search for TimelineEvent, sorted by event_date ascending. Set the cell height to auto (Fit height to content). In each cell, add a Row container with three Groups: left content (40% width), center connector (20% width), and right content (40% width). In the left group, display the formatted date. In the center group, add a small circle icon. In the right group, display the title and description.

Add an HTML element inside the center Group of each Repeating Group cell. This HTML element draws a vertical line connecting the circle markers. The line should extend from the top to the bottom of each cell, creating a continuous visual timeline. Style the circle marker with a colored border and the line with a thin solid border.

1<style>
2  .timeline-connector {
3    width: 2px;
4    background-color: #3B82F6;
5    height: 100%;
6    margin: 0 auto;
7    position: relative;
8  }
9  .timeline-dot {
10    width: 16px;
11    height: 16px;
12    border-radius: 50%;
13    background-color: #3B82F6;
14    border: 3px solid #ffffff;
15    box-shadow: 0 0 0 2px #3B82F6;
16    margin: 0 auto;
17    position: relative;
18    z-index: 1;
19  }
20</style>
21<div class="timeline-connector">
22  <div class="timeline-dot"></div>
23</div>

To create the classic alternating timeline, use conditional formatting based on the cell index. Add a conditional on the left content Group: When Current cell's index is even → visible = no, Collapse when hidden = checked. Add the opposite conditional on the right content Group. Then duplicate the content to the other side. This creates alternating left-right content placement. On mobile, hide the alternating layout and show all content on one side.

Make each timeline entry clickable to reveal more details. Add a hidden Group below the title/description in each cell containing additional information (full description, images, links). Add a custom state 'expanded_event' on the page (type: TimelineEvent). When a timeline entry is clicked: Set state of page → expanded_event = Current cell's TimelineEvent. On the detail Group: Conditional: When page's expanded_event is Current cell's TimelineEvent → visible = yes.