Studio
CMS Timeline · Documentation · Version 1.0
Your story, straight from the CMS.
How to connect any collection with dates, the four layouts, date formats, the line that fills as you scroll, every setting in the panel, and five looks to start from.
01
Start here.
Add it to your project. Open the link in your purchase email (or the Marketplace page) and drop CMS Timeline on a page. It arrives with a demo story of eight milestones so you can see it work.
Feed it your collection. Set Source to CMS, add a Collection List of your collection on the same page and put a Timeline Item inside its item. The next sections show the steps.
Pick a layout. Vertical, Alternating, Horizontal or Roadmap.
Choose the dates. Year, month, day or quarter, in the language of your site. Then preview and scroll.
02
How it works.
The timeline shows milestones from any collection with dates: a company history, a product roadmap, project milestones, a changelog, a list of awards. Each Timeline Item hands one Collection List item to the timeline.
The Collection List decides which items reach the timeline: its own filters, sort and limit apply first. The timeline can then sort them by date.
Add an item in the CMS and it takes its place by date. Nothing to rebuild.
No API keys, no backend, no tracking. The component makes no network requests of its own. Only your images load.
Projects
First restoration: Villa Nova
Studio
Interiors becomes its own team
Projects
Lumbre hotel courtyard
Studio
The London studio
Awards
Casa Solara wins the RIBA award
Projects
Luna House completes
StudioUpcoming
A third studio, in Madrid
Live component with the demo story. With Source on CMS it reads the Timeline Items in your Collection List.
03
Connect your collection, step by step.
Use any collection with a title and a Date field. A category (an Option field or plain text), a status, a description, an image and a page per item are all optional.
Add a Collection List anywhere on the same page, connected to it.
Put a Timeline Item inside its item and connect its fields: Title, Date, Category, Status, Description, Image and Link (the item’s own page). For an Option field, keep Category or Status and pick Display option when you connect it.
Select the timeline and set Source to CMS.
Use the same Kit name on the timeline and on the Timeline Item. “timeline” is the default on both. With two timelines on one page, give each its own name and its Timeline Item the matching one.
Preview. Every milestone shows up once.
On the published site, Timeline Items show nothing and take no space. Set the Collection List’s gap and padding to 0 so the list itself takes no space either. In the canvas, each Timeline Item shows a small dashed label like “Timeline Item · Villa Nova · 2022-09-15”, so you can check it reads the right fields.
Good to know:
Date label is a plain text field that wins over the formatted date: “Q3 2026”, “Spring 2024”, “Since 1998”. Keep the Date as well if you want the milestone sorted.
A description can be plain text or a Formatted Text field connected as text. Leave an empty line between paragraphs.
With Source on Manual, add milestones in the panel instead. Use it for a page without a CMS.
04
Layouts
The line on the left, a dot and a card per milestone.
The line in the middle and cards on both sides, each starting halfway down the one before. On screens narrower than 640 px it turns into Vertical.
One row that scrolls sideways, with the date above each dot, cards of equal height and arrows that stop at both ends. With a mouse, drag the row; the edges fade while there is more to see. Card width sets how wide each milestone is.
A column per Status, in the order statuses first appear, each with its colour and count. When no milestone has a status, two columns come from the dates: Done and Next.
Year headings add the year between milestones of different years, on Vertical and Alternating.
Different layout per breakpoint. Each breakpoint keeps its own settings. A common setup: Alternating on Desktop, Vertical on Phone.
05
Dates
Date: 2026, May 2026, 12 May 2026 or Q2 2026.
Language: the language of the month names, like en-US, en-GB, es-ES or fr-FR. With Framer Localization, give each locale its own.
Order: the list’s own order, oldest first or newest first. Milestones without a date go last.
Upcoming: milestones after today get a dashed dot and an Upcoming badge (unless they have a status).
Dates from the CMS are read in UTC, so the day never moves with the visitor’s time zone.
06
Movement
Fill on scroll: on Vertical and Alternating, the line fills as the visitor scrolls, led by a soft glowing tip, and each dot lights up with a ring as the line reaches it.
Entrance: cards fade in and come into focus as they reach the screen. On Alternating they come from their own side; on Horizontal and Roadmap, one after another. Cards already on screen when the page opens are never hidden, and cards above it (a reload halfway down, an anchor link) are shown.
Visitors who prefer reduced motion get neither: the line and the cards are simply there.
07
Cards
, Image ratio (16:9, 3:2, 4:3 or 1:1), Radius.
How many lines of the description show. 0 shows the whole description.
And Status: show them on the card. Statuses are coloured badges; Status 1–4 set their colours in the order statuses first appear.
A milestone with a Link gets a small arrow beside its title and the whole card opens the page. On a computer the card lifts slightly under the pointer and its photo moves closer.
08
Filters
Filters adds a button for each category, after an All button, with Counts like “Projects 4”. Pressing the active button again shows everything. On narrow screens the buttons scroll sideways.
09
Customize the look.
Text
Title font and Title colour, Date font and Date colour (also for the category), Text font and Text colour for descriptions, Year font for year headings, the dates on Horizontal and the Roadmap column names.
Line and cards
Line, Progress (the part already scrolled past and the dots it has reached), Dot fill and Line width. Card fill and Card border.
Recipes
Layout Alternating · Order Oldest first · Year headings on · Date 2026 · Images on
Layout Roadmap · Status on every item (Shipped, In progress, Planned) · Images off · Text lines 0
Layout Vertical · Order Newest first · Date 12 May 2026 · Images off · Filters on
Layout Horizontal · Order Newest first · Date 2026 · Card width 260 · Text lines 0
Layout Vertical · Order Oldest first · Date 12 May 2026 · Upcoming on
10
Settings reference.
In the order they appear in the property panel. Settings that don’t apply are hidden.
Content
CMS (Timeline Items with the same Kit name) or Manual.
CMS: the name shared with the Timeline Items.
Manual: Title, Date, Date label, Category, Status, Description, Image, Link and Alt text. Up to 60.
Layout
Layout — Vertical, Alternating, Horizontal or Roadmap.
Order — List order, Oldest first or Newest first.
Year headings — Vertical and Alternating.
Card width — Horizontal.
Gap.
Dates
2026, May 2026, 12 May 2026 or Q2 2026.
For the month names.
Mark milestones after today.
Cards
Images, Image ratio, Radius, Text lines, Category, Status.
Card fill, Card border, Title font, Title, Date font, Date, Text font, Text, Year font.
Line
Line, Progress, Dot fill, Line width.
Fill on scroll, Entrance.
Status 1, Status 2, Status 3, Status 4.
Filters
Filters, Counts, Button font, Button fill, Button text, Active fill, Active text.
Focus ring — the keyboard focus colour.
Labels
Timeline label — what screen readers call the section.
Filter label, All label, Upcoming label, Done label, Next label, Previous label, Next arrow label.
All of them are translated by Framer Localization.
Timeline Item
Kit name, Title, Date, Date label, Category, Status, Description, Image, Link, Alt text.
11
Performance
No network requests of its own, no scripts from other sites, no tracking.
Images use Framer’s srcSet with a sizes value worked out from the card’s real width, and load lazily.
The scroll fill and the entrance run once per frame at most, and only measure the component’s own elements.
On the canvas and in Framer’s static previews, it renders still: no animation.
12
Accessibility
The timeline is a labelled section with a list of milestones, in reading order on every layout, Alternating included.
Every date is a real time element with the full date, so screen readers and search engines read it right.
A milestone with a Link has a real link on its title; the whole card is clickable around it, and the arrow beside it is decoration that screen readers skip.
The filter buttons are real toggle buttons in a labelled group. The Horizontal arrows have labels and stop at both ends.
Visitors who prefer reduced motion get no fill and no entrance.
13
Troubleshooting
Source is Manual. Set it to CMS.
No Timeline Item uses the timeline’s Kit name, or the Timeline Items have no title and no date connected.
Set Language, like es-ES, on the timeline (or per locale).
Order is List order and the Collection List sorts differently. Pick Oldest first or Newest first.
The Option field was connected without Display option.
No milestone has a Status. Connect Status, or rename the two columns with Done label and Next label.
Set its gap and padding to 0.
14
Updates
New versions are free and listed here. To update, insert the component again from the Marketplace page or from the link in your Polar order, which always points to the latest version, and copy your settings across.
1.0 · October 2026 — First release: Vertical, Alternating, Horizontal and Roadmap, Timeline Items for any CMS collection, four date formats in any language, date labels, order, year headings, upcoming milestones, a line that fills on scroll, status colours, category filters and full documentation.
15
Support and licence.
Questions or a bug? Write to info@miguelrecio.es. A person replies within two business days (Mon–Fri, CET).
One licence covers one website or project, the same Single-Use licence as Framer’s Marketplace. For several sites, buy one licence per site. Reselling or redistributing the component isn’t allowed.
The demo story and the projects are made up. Replace them with your own before you publish.