Timeline Scroll

What is Timeline Scroll?

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. Questions or custom requests? We design and build custom Framer components. Get in touch at contact@teampixel.com.au .

Vertical timeline with 3D flip cards.