Timeline Scroll: Premium Interactions Component by Aidan Looker

A premium vertical timeline that reveals content as visitors scroll. Numbered nodes, animated progress line, 3D-flippable cards with image galleries, and full dark theme customisation — built for company histories, product roadmaps, and milestone showcases.

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.

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.