Vertical timeline section with progressive scroll animation and 3 layout styles.
Timeline
The Timeline section displays a vertical chronology with progressive scroll animation. Events appear as the user scrolls down the page, creating an immersive storytelling experience.
3 layout styles
| Style | Description | Ideal for |
|---|---|---|
| Left | All events aligned to the left of the line | Mobile-first, simple content |
| Centered | Events centered below the line | Symmetrical design, few events |
| Alternating | Events alternating left/right | Rich storytelling, maximum impact |
Main settings
| Setting | Description | Options |
|---|---|---|
| Style | Event layout | Left / Centered / Alternating |
| Line color | Vertical line color | Accent 1 / Accent 2 / Foreground |
| Point style | Junction point appearance | Circle / Diamond / Icon |
| Animation | Scroll animation | Fade-in / Slide / Scale / None |
| Progression | Line that fills on scroll | On / Off |
Timeline Event block
Each event is a block with the following fields:
| Field | Description |
|---|---|
| Date / Label | Time marker text (date, year, milestone) |
| Heading | Event title |
| Text | Detailed description (rich text) |
| Image | Event illustration (optional) |
| Icon | Custom icon for the junction point |
Use cases
Brand history
- Alternating style for a rich narrative
- Key company dates
- Archive images for each event
- Fade-in animation with progression enabled
Project milestones
- Left style for simplicity
- Labels: "Phase 1", "Phase 2", etc.
- Descriptive texts with details
- Diamond point style
Product journey (from conception to delivery)
- Centered style for smooth reading
- Custom icons per step
- Images illustrating each phase
- Scale animation for impact
💡Enable progression for a line "fill" effect on scroll. This gives a sense of progression and encourages the user to keep scrolling to see the rest.
⚠️On mobile, the Alternating style automatically switches to Left style for better readability. Make sure your content works well in both layouts.