---
title: "Timeline Scroll — Framer component · Best of Framer"
description: "$14.00 · Framer component · by Aidan Looker · Sections. What is Timeline Scroll?"
canonical: "https://framer.elliotli.dev/component/timeline-scroll"
---

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

# Timeline Scroll

Vertical timeline with 3D flip cards.

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

![Timeline Scroll preview image 1](https://framer.elliotli.dev/og/component/timeline-scroll/842d6a918cb4ae61/1600x1200.jpg)

## Summary

What is Timeline Scroll?

## Description

## What is Timeline Scroll?

Timeline Scroll is a production-ready vertical scroll timeline component that combines scroll-driven animations with interactive 3D card flipping. Each milestone features a numbered node, connecting progress line, and a dual-sided content card — front for the overview, back for the deep dive. Purpose-built for company histories, product roadmaps, project milestones, and portfolio case studies.

[![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-8vjwbcr2-RQLDut7AgLOovQEwgaJNpNG4n3n3B6)](https://teampixelau.lemonsqueezy.com/checkout/buy/3b016e8d-2ba4-4944-8431-e2c592334df1)

## Core Features

-   Scroll-driven progress line with configurable glow, animated numbered nodes, and per-card reveal as each card enters the viewport
    
-   3D card flip with animated hover hint — front card shows image/video, description, stat pills, and CTA; back card shows extended copy, highlight bullets, stat pills, auto-scrolling image ticker with fullscreen lightbox, and a secondary CTA
    
-   Three dark theme presets (Obsidian, Slate, Carbon) plus a full custom colour panel with 13 individually configurable colour tokens for complete brand alignment
    
-   Five independent native Framer font controls — Heading, Body, Category, CTA, and Stat — so every text element responds to your project's typography
    
-   Link selector for all CTA buttons, responsive image support, and video file upload throughout
    

## Controls inside Framer

### Display

-   Node Style — Number, Dot, or Icon
    
-   Category — Show / Hide
    
-   Date — Show / Hide
    
-   Image/Video — Show / Hide
    
-   Stats — Show / Hide
    
-   CTA — Show / Hide
    

### Theme and Layout

-   Theme — Obsidian, Slate, Carbon, Custom
    
-   Card Radius — 0 to 24px
    
-   Image Height — 80 to 400px
    
-   Custom Colours — 13 tokens including card background, text, accent, connector, node, CTA, and highlight colours
    

### Connector

-   Line Width — 1 to 4px
    
-   Node Size — 28 to 48px
    
-   Arm Length — 8 to 48px
    
-   Glow Intensity — 0 to 1
    

### Animation

-   Reveal Speed — 300 to 800ms
    
-   Stagger Delay — 50 to 200ms
    
-   Hover Lift — On / Off
    

### Flip

-   Enable Flip — On / Off
    
-   Flip Duration — 300 to 800ms
    
-   Auto Flip Back — On / Off with configurable delay
    

### Typography

-   Heading Font
    
-   Body Font
    
-   Category Font
    
-   CTA Font
    
-   Stat Font
    

### Per-Milestone Content

-   Title, Description, Category, Date
    
-   Image (responsive) or Video (file upload)
    
-   Up to 3 stat value/label pairs
    
-   Front CTA with native link picker
    
-   Back title, description, and 3 highlight bullets
    
-   Back CTA with native link picker
    
-   Image ticker toggle with up to 6 responsive images and fullscreen lightbox
    

## Best use cases

-   Company history and founding story timelines for About pages
    
-   Product roadmaps and feature release timelines for SaaS landing pages
    
-   Portfolio case study showcases for agencies and freelancers
    
-   Event chronologies and project milestone tracking for startups and nonprofits
    

Every milestone tells two stories — the overview on the front, the details on the back. Drop it onto any dark-background section and your timeline is live in under a minute.

## Questions or custom requests?

We design and build custom Framer components. Get in touch at [**contact@teampixel.com.au**](mailto:contact@teampixel.com.au).

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

-   All · #6817

## Details

- **Author**: Aidan Looker
- **Price**: $14.00
- **Published**: 2026-05-05
- **Updated**: 2026-06-13
- **Added**: 2026-04-22
- **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