What it does
Add your tasks with a start and end date and Gantt Chart Timeline draws the whole schedule for you — time scale, bars, milestones and a "today" line are calculated automatically. No manual positioning, no screenshots, no nested frames.
Perfect for project pages, process sections, roadmaps and case studies on agency, studio and startup sites.
Customizable properties
- Tasks — name, group, start date, end date, progress %, milestone toggle and color for each task
- Time Scale — Auto, Day, Week or Month
- Today Line — on/off, or pin any date
- Collapsible groups — click a group to fold or unfold it (Start Folded option)
- Progress % labels and hover tooltips (dates, duration, progress)
- Layout — name column width, row height, bar height, bar radius, minimum chart width, corner radius
- Colors — background, header, text, grid, today line, border
- Fonts — separate name and scale fonts
Why this component
- Dates in, schedule out: change a date and the bars and scale update themselves.
- Folding groups and progress fills make a long plan readable at a glance.
- Names stay pinned while the chart scrolls sideways, so it works on small screens too.
Where it fits
- Agency and studio sites: show clients how a project runs, phase by phase
- SaaS and product sites: a public roadmap with progress on each item
- Case studies: the real timeline of a launch, with milestones marked
- Events, courses and renovations: a schedule visitors can scan at a glance
FAQ
- How do I enter dates? Type them as YYYY-MM-DD in each task. The time scale, bars and today line update on their own.
- Can visitors drag the bars? No. It is a display chart, edited in Framer's property panel. There is no code to touch.
- Does it link tasks with arrows (dependencies)? Not yet. Groups and milestones are supported.
- Can it read from the Framer CMS? Not yet. Tasks are entered in the property panel.
- Does it work on phones? Yes. Task names stay pinned and the chart scrolls sideways.
Need help?
Email hello@brandingupstudio.com — we usually reply within 72 hours. Custom edits are available from $75/hr.
