---
title: "Section Timeline — Framer component · Best of Framer"
description: "$10.00 · Framer component · by Kullen Jahnke · Sections. Section Timeline is a responsive Framer component for navigating long pages: a fixed rail of markers that tracks the section…"
canonical: "https://framer.elliotli.dev/component/section-timeline"
---

[Home](/)/[Components](/components)/[Sections](/components/category/sections)/Section Timeline

# Section Timeline

Section rail with hover previews

[View on Framer](https://framer.com/marketplace/components/section-timeline/?via=elliot-li)

![Section Timeline preview image 1](https://framer.elliotli.dev/og/component/section-timeline/1054e2c6ff32f8a1/1600x1200.jpg)

## Summary

Section Timeline is a responsive Framer component for navigating long pages: a fixed rail of markers that tracks the section you are reading, a hover fan across neighboring…

## Description

**Section Timeline** is a responsive Framer component for navigating long pages: a fixed rail of markers that tracks the section you are reading, a hover fan across neighboring markers, a preview card per section, click-to-scroll with header offset, and your own Framer components as the cards.

**Use Cases**

Works well for:

-   long-form articles
    
-   blog posts
    
-   documentation
    
-   case studies
    
-   portfolio pages
    
-   product landing pages
    
-   one-page sites
    
-   changelogs
    

Perfect when you want readers to see where they are and what is next, instead of a bare scrollbar.

\--------------------------------------------------------------

**Customization**

Fully customizable via the properties panel:

-   section list
    
-   preview side
    
-   alignment and gap
    
-   marker size
    
-   spacing
    
-   radius and colors
    
-   hover fan spread and falloff
    
-   card width
    
-   padding
    
-   background
    
-   border
    
-   radius
    
-   shadow
    
-   line limits
    
-   colors and fonts
    
-   transitions
    
-   travel and delay
    
-   activation line
    
-   scroll offset
    
-   URL hash
    
-   navigation label
    
-   focus ring
    

The preview can be the built-in card or your own Framer component linked per section, so the design stays yours.

\--------------------------------------------------------------

**Responsive Behavior**

-   **Desktop:** full rail with hover fan and preview card.
    
-   **Tablet:** same rail; tap a marker to scroll to its section.
    
-   **Mobile:** hide the rail with Framer's breakpoint visibility.
    

Keyboard accessible with a visible focus ring, aria-current on the active marker, and reduced-motion aware.

\--------------------------------------------------------------

**Preview:** [https://section-timeline-preview.framer.website/](https://section-timeline-preview.framer.website/)

**Included:** the Section Timeline component and a live preview with setup steps.

**Good to know:** sections need explicit IDs (no auto-detection), the page must scroll normally rather than in a scroll container, and linked preview cards carry their own content.

## Rank history [How rankings work →](/terms#rankings)

-   All · #5589

## Details

- **Author**: Kullen Jahnke
- **Price**: $10.00
- **Published**: 2026-07-28
- **Updated**: 2026-07-28
- **Added**: 2026-07-28
- **Categories**: Sections

## More like this

-   [Project Index](/component/project-index) — Bernardo Lickfold · Free — Editorial index: hover & scroll
-   [Face Parade](/component/face-parade) — RAjan · Free — Animated team profiles
-   [Staircase Cover Flow](/component/staircase-cover-flow) — Karim Saif · $7 — editorial-inspired image gallery
-   [In Their Words](/component/in-their-words) — Majed Monem · $9 — A wall of customer quotes