---
title: "Scrolling Timeline — Framer component · Best of Framer"
description: "$8.00 · Framer component · by pankake · Sections. A timeline drawn as you scroll"
canonical: "https://framer.elliotli.dev/component/scrolling-timeline"
---

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

# Scrolling Timeline

A timeline drawn as you scroll

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

![Scrolling Timeline preview image 1](https://framer.elliotli.dev/og/component/scrolling-timeline/24c5501984304ad3/1600x1112.jpg)

## Summary

A timeline drawn as you scroll

## Description

A responsive Framer component that draws a timeline along a custom SVG path while scrolling.

## Features

-   Highlights the active event and matching button.
    
-   Supports scrolling and button navigation.
    
-   Snaps smoothly forward or backward.
    
-   Works with mouse, trackpad, touchscreen, and keyboard.
    
-   Customizable through Framer’s property panel.
    

## Setup

Create and arrange the timeline sections manually in Framer. Set the number of events, scroll start position, and corresponding section numbers in the component properties.

## Customization

Customize the SVG path, font, colors, circle size, stroke, highlight speed, and snapping behavior.

Copy a single SVG path from Figma or another vector tool and paste it into the **SVG Path** field.

## Notes

Keep the event count, buttons, and Framer sections aligned. Ensure the page is tall enough to reach the final event.

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

-   All · #1357

## Details

- **Author**: pankake
- **Price**: $8.00
- **Published**: 2026-09-06
- **Updated**: 2026-09-30
- **Added**: 2026-09-06
- **Categories**: Sections

## More like this

-   [Sale Bar](/component/sale-bar) — Brandon Grimes · $12 — Auto-start Black Friday promo bar
-   [Show and Tell](/component/show-and-tell) — Majed Monem · $9 — Feature tabs that play themselves
-   [Infinite Picker Whee](/component/infinite-picker-whee) — Karim Saif · Free — Rotating 3D text selector
-   [Resource Preview Dec](/component/resource-preview-dec) — felix strobel · Free — Editorial guides with folding cove