Have you ever seen an animated timeline of events? As the visitor scrolls down and new events enter the viewport, the timeline animates any additional events into view. A linear visual, like a timeline, can tell a story. The events may represent critical milestones in a person or company’s history. Similarly, animation can help reinforce storytelling and appeal to a visitor’s creative interest.
I want to walk you through creating a unique timeline experience. You will learn to build it with blocks, register some custom CSS for animation, and use JavaScript to observe intersecting elements in the viewport. Of course, not everybody wants to experience elements moving on a page, so we will show you how you can opt to turn off animations.
Below is a video that captures the final timeline appearance that you’ll create:
Table of Contents
Create the timeline with blocks
First, you’ll build the timeline layout and appearance with blocks. I ended up using the following blocks:
- A Group block with a custom timeline CSS class assigned.
- A Columns block with three nested columns.
- The first Column block represents the date of the event. Example: “2024, April 2”
- The second Column block represents a visual timeline divider. Iused block locking to prevent the editor from accidentally removing or moving this block.
- The third Column block is where the content will live for each event on the timeline.
- A Columns block with three nested columns.
Below is a visual, breaking down the blocks that make up the final Vertical Timeline pattern: