5d:I[333483,["/creators-assets/_next/static/immutable/chunks/16d0e6blr3zvd.js","/creators-assets/_next/static/immutable/chunks/1rc641binzbjp.js","/creators-assets/_next/static/immutable/chunks/12ci1vsd8nj4u.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/1jubx4t_1hq7l.js","/creators-assets/_next/static/immutable/chunks/30hhj9fl_j_en.js","/creators-assets/_next/static/immutable/chunks/2ply_q-h6u_2z.js","/creators-assets/_next/static/immutable/chunks/33adfll0sgxzj.js","/creators-assets/_next/static/immutable/chunks/1pb7yncyfm9fe.js","/creators-assets/_next/static/immutable/chunks/1j6jg0y72xk13.js","/creators-assets/_next/static/immutable/chunks/2njnkxjf39nsf.js","/creators-assets/_next/static/immutable/chunks/26nhnsanh2piz.js","/creators-assets/_next/static/immutable/chunks/03itqfxm4gmj8.js","/creators-assets/_next/static/immutable/chunks/114fkj16mhe97.js","/creators-assets/_next/static/immutable/chunks/3zq_69yv5l6lg.js","/creators-assets/_next/static/immutable/chunks/19-jcjdymr-fa.js","/creators-assets/_next/static/immutable/chunks/16inv17cv83xq.js","/creators-assets/_next/static/immutable/chunks/2760bhhttj0zo.js","/creators-assets/_next/static/immutable/chunks/3_z6gb0g1nigd.js","/creators-assets/_next/static/immutable/chunks/3vlbhrh3-zofo.js","/creators-assets/_next/static/immutable/chunks/120bipr4k16wv.js","/creators-assets/_next/static/immutable/chunks/3ea2l_ol8wqqa.js","/creators-assets/_next/static/immutable/chunks/3o3dwck1w1ue6.js","/creators-assets/_next/static/immutable/chunks/19r4rf2zyng-y.js","/creators-assets/_next/static/immutable/chunks/2qrxli96_t9cq.js","/creators-assets/_next/static/immutable/chunks/3edl5e308nytq.js","/creators-assets/_next/static/immutable/chunks/05i2jce8amocn.js","/creators-assets/_next/static/immutable/chunks/14pxn0b6e1dc9.js","/creators-assets/_next/static/immutable/chunks/1zr4ew02k6y_l.js","/creators-assets/_next/static/immutable/chunks/2504rifrkrd_l.js","/creators-assets/_next/static/immutable/chunks/08ajsjh8ypdt2.js","/creators-assets/_next/static/immutable/chunks/1ddgh6mv1wg4x.js","/creators-assets/_next/static/immutable/chunks/3o1z26bd2_9eh.js","/creators-assets/_next/static/immutable/chunks/3t6k2_m2gc3-k.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/1_2vu9p6mra4j.js","/creators-assets/_next/static/immutable/chunks/2qeyp4zfa4qwb.js","/creators-assets/_next/static/immutable/chunks/0w6oa8_ba59u4.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/3sa-o_ztvtkwe.js","/creators-assets/_next/static/immutable/chunks/3c3kl-ixsd844.js"],"PostDetailCard"] 5e:Ta8c,

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/

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.

5a:[["$","$L5d",null,{"post":{"id":"019faace-2ae9-7549-b619-8b3903d148d3","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"64ab2b22-4ac4-4ae8-bdc3-691afb8ee6b1","name":"Kullen Jahnke","slug":"kullen","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/534579/avatar-0ElvrFI1uFRAsMmJsB8iv8CRDfqXKY.jpg","badges":["available","expert"],"followed":false,"followsYou":false},"media":[],"resources":[{"id":"qfZCMQx6sEpV7FnM4Eal","resolved":true,"title":"Section Timeline","body":"$5e","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Section Timeline","marks":[{"type":"bold"}]},{"type":"text","text":" 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."}]},{"type":"paragraph","content":[{"type":"text","text":"Use Cases","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Works well for: "}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"long-form articles"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"blog posts"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"documentation"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"case studies"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"portfolio pages"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"product landing pages"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"one-page sites"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"changelogs"}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"Perfect when you want readers to see where they are and what is next, instead of a bare scrollbar."}]},{"type":"paragraph","content":[{"type":"text","text":"--------------------------------------------------------------"}]},{"type":"paragraph","content":[{"type":"text","text":"Customization","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Fully customizable via the properties panel: "}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"section list"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"preview side"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"alignment and gap"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"marker size"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"spacing"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"radius and colors"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"hover fan spread and falloff"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"card width"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"padding"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"background"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"border"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"radius"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"shadow"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"line limits"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"colors and fonts"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"transitions"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"travel and delay"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"activation line"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":" scroll offset"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"URL hash"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"navigation label"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"focus ring"}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"The preview can be the built-in card or your own Framer component linked per section, so the design stays yours."}]},{"type":"paragraph","content":[{"type":"text","text":"--------------------------------------------------------------"}]},{"type":"paragraph","content":[{"type":"text","text":"Responsive Behavior","marks":[{"type":"bold"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Desktop:","marks":[{"type":"bold"}]},{"type":"text","text":" full rail with hover fan and preview card. "}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Tablet: ","marks":[{"type":"bold"}]},{"type":"text","text":"same rail; tap a marker to scroll to its section."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Mobile:","marks":[{"type":"bold"}]},{"type":"text","text":" hide the rail with Framer's breakpoint visibility. "}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"Keyboard accessible with a visible focus ring, aria-current on the active marker, and reduced-motion aware."}]},{"type":"paragraph","content":[{"type":"text","text":"--------------------------------------------------------------"}]},{"type":"paragraph","content":[{"type":"text","text":"Preview: ","marks":[{"type":"bold"}]},{"type":"text","text":"https://section-timeline-preview.framer.website/","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://section-timeline-preview.framer.website/","target":"_blank"}}]}]},{"type":"paragraph","content":[{"type":"text","text":"Included:","marks":[{"type":"bold"}]},{"type":"text","text":" the Section Timeline component and a live preview with setup steps."}]},{"type":"paragraph","content":[{"type":"text","text":"Good to know:","marks":[{"type":"bold"}]},{"type":"text","text":" 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."}]}]},"introduction":"Section rail with hover previews","slug":"section-timeline","author":{"framerUserId":"64ab2b22-4ac4-4ae8-bdc3-691afb8ee6b1","name":"Kullen Jahnke","slug":"kullen","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/534579/avatar-0ElvrFI1uFRAsMmJsB8iv8CRDfqXKY.jpg","badges":["available","expert"],"followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/64ab2b22-4ac4-4ae8-bdc3-691afb8ee6b1/019faac3-6635-743c-8845-370988bd19b5.png","metadata":{"tint":{"h":0,"s":0,"l":57},"width":2714,"height":2035}}],"post":null,"createdAt":"2026-07-28T22:17:45.474Z","updatedAt":"2026-07-28T22:27:38.855Z","publishedAt":"2026-07-28T22:17:45.470Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://section-timeline-preview.framer.website/","price":"10","paymentUrl":"https://contra.com/payment-link/2WcnOTlk-section-timeline-or-section-rail-with-previews-framer-component","workshop":false,"categories":[{"id":"5c50a4d9-4405-49ca-8956-4909a204480d","name":"Sections","slug":"sections"}],"lastSaveId":"gcqjbTDQxQrDs0y3gsGw","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":6,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-07-28T22:17:45.961Z","updatedAt":"2026-07-28T22:17:45.961Z","reported":false}}],"$L5f"]

Suggested for you