About Ascent Timeline
About Ascent Timeline
Ascent Timeline is a Framer code component that turns your milestones into a scroll-driven roadmap section. As visitors scroll, the section stays pinned while a progress dial climbs through each date, the story slides in and a large counter counts up to that milestone's number, all over a glowing pixel field that rises with every step. It feels like a launch film, in one section.
What you can customize
Choose Scroll mode, where each milestone takes a set amount of scrolling, or Autoplay mode with its own interval, loop and pause on hover. Every milestone has a date, tag, title, text, a counter value with decimals, prefix, suffix and label, plus an optional link with its own text. Add a button with a label, link and Solid, Outline or Ghost style, and a corner badge with a label, link and position. Put the rail on the left or right and set its width, item gap, text width, max width and padding. The dial can show chevrons, an arrow, a dot or the step number, with its size, ring width and glow. The pixel grid sets its side, spread, color, cell size, gap, radius, density, intensity, twinkle, rise and cursor glow. Colors cover background, accent, text, muted, rail, tag fill and dial fill, with separate title, text, counter and label fonts. Also set counter separators, locale, count time, an aria label and a step-change event.
Great for (examples)
Add an Ascent Timeline to:
* SaaS and startup growth stories
* Product roadmaps and release history
* Company "our journey" pages
* Investor and pitch landing pages
* Agency case studies with results
* Fundraising and impact milestones
* Event and launch countdown pages
In the Framer canvas the section shows a still frame of the step you pick with Canvas Step, so editing stays fast. On preview and published pages it pins and climbs as you scroll, or autoplays, and the dates on the rail are clickable. Visitors who prefer reduced motion get instant transitions and a still grid.
