5b:I[473921,["/creators-assets/_next/static/immutable/chunks/2bxtessbrg0z1.js","/creators-assets/_next/static/immutable/chunks/0lpbs3388m8i9.js","/creators-assets/_next/static/immutable/chunks/1cyyov0z5q-kt.js","/creators-assets/_next/static/immutable/chunks/3283ev4bymz-y.js","/creators-assets/_next/static/immutable/chunks/1tyeiicl34tqo.js","/creators-assets/_next/static/immutable/chunks/24bk4ojcoor5n.js","/creators-assets/_next/static/immutable/chunks/19vaojedolulr.js","/creators-assets/_next/static/immutable/chunks/1zalsqf-ioaic.js","/creators-assets/_next/static/immutable/chunks/00hohn9l3ocx9.js","/creators-assets/_next/static/immutable/chunks/09klh1t314i6_.js","/creators-assets/_next/static/immutable/chunks/0vxt9zvn936s0.js","/creators-assets/_next/static/immutable/chunks/1eyot9c9uwocm.js","/creators-assets/_next/static/immutable/chunks/15qb5jvtj_j-a.js","/creators-assets/_next/static/immutable/chunks/3p2-jhwmdt2w4.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/102julo6bufcv.js","/creators-assets/_next/static/immutable/chunks/2e-sz6cfsc9_9.js","/creators-assets/_next/static/immutable/chunks/0mgwzh6o644jl.js","/creators-assets/_next/static/immutable/chunks/3uo-268z2xnq9.js","/creators-assets/_next/static/immutable/chunks/3fujn21cf_mt1.js","/creators-assets/_next/static/immutable/chunks/2ypcsbrcjzeke.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/3nnozhk_k4v6s.js","/creators-assets/_next/static/immutable/chunks/2ch5kewqiwntv.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/3xmobvbzj3637.js","/creators-assets/_next/static/immutable/chunks/26fs9mkd8gzie.js","/creators-assets/_next/static/immutable/chunks/0toe1wcov_38e.js","/creators-assets/_next/static/immutable/chunks/21ae0xqjlej6m.js","/creators-assets/_next/static/immutable/chunks/3xnhxg14xjx1h.js","/creators-assets/_next/static/immutable/chunks/0q4_4jbe5r70f.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/2warb3xv9rce7.js","/creators-assets/_next/static/immutable/chunks/1tvhyiuh-gmez.js","/creators-assets/_next/static/immutable/chunks/3un-l23eued0s.js","/creators-assets/_next/static/immutable/chunks/0u_jiik6ovv_e.js","/creators-assets/_next/static/immutable/chunks/3nd1mzwm7q_f7.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js"],"PostDetailCard"] 5c:T913,

■ 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

■ Need help?

Reach out anytime at hello@brandingupstudio.com — we usually reply within 72 hours.

Custom edits are available from $75/hr.

■ More resources

Explore more components at BrandingUp → https://brandingupstudio.com

Built with code but fully customizable via property controls — no coding needed.

Unlink is not provided so we can keep delivering updates. When an update is available, just click the Update button on the component.

58:[["$","$L5b",null,{"post":{"id":"01a11fca-34d6-7533-b2e2-f4309695f928","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"cc7993de-4f5d-4209-b3f0-695614bf8a8b","name":"BrandingUp","slug":"-ds491f","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/cc7993de-4f5d-4209-b3f0-695614bf8a8b/55t3m3ms","followed":false,"followsYou":false},"media":[],"resources":[{"id":"yPcYgr2qkcrtSNzlulRV","resolved":true,"title":"06 Gantt Chart","body":"$5c","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"■ What it does"}]},{"type":"paragraph","content":[{"type":"text","text":"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."}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"Perfect for project pages, process sections, roadmaps and case studies on agency, studio and startup sites."}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"■ Customizable properties"}]},{"type":"paragraph","content":[{"type":"text","text":"- Tasks — name, group, start date, end date, progress %, milestone toggle and color for each task"}]},{"type":"paragraph","content":[{"type":"text","text":"- Time Scale — Auto, Day, Week or Month"}]},{"type":"paragraph","content":[{"type":"text","text":"- Today Line — on/off, or pin any date"}]},{"type":"paragraph","content":[{"type":"text","text":"- Collapsible groups — click a group to fold or unfold it (Start Folded option)"}]},{"type":"paragraph","content":[{"type":"text","text":"- Progress % labels and hover tooltips (dates, duration, progress)"}]},{"type":"paragraph","content":[{"type":"text","text":"- Layout — name column width, row height, bar height, bar radius, minimum chart width, corner radius"}]},{"type":"paragraph","content":[{"type":"text","text":"- Colors — background, header, text, grid, today line, border"}]},{"type":"paragraph","content":[{"type":"text","text":"- Fonts — separate name and scale fonts"}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"■ Why this component"}]},{"type":"paragraph","content":[{"type":"text","text":"- Dates in, schedule out: change a date and the bars and scale update themselves."}]},{"type":"paragraph","content":[{"type":"text","text":"- Folding groups and progress fills make a long plan readable at a glance."}]},{"type":"paragraph","content":[{"type":"text","text":"- Names stay pinned while the chart scrolls sideways, so it works on small screens too."}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"■ Where it fits"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"- Agency and studio sites: show clients how a project runs, phase by phase"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"- SaaS and product sites: a public roadmap with progress on each item"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"- Case studies: the real timeline of a launch, with milestones marked"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"- Events, courses and renovations: a schedule visitors can scan at a glance"}]}]}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"■ Need help?"}]},{"type":"paragraph","content":[{"type":"text","text":"Reach out anytime at hello@brandingupstudio.com — we usually reply within 72 hours."}]},{"type":"paragraph","content":[{"type":"text","text":"Custom edits are available from $75/hr."}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"■ More resources"}]},{"type":"paragraph","content":[{"type":"text","text":"Explore more components at BrandingUp → "},{"type":"text","text":"https://brandingupstudio.com","marks":[{"type":"link","attrs":{"href":"https://brandingupstudio.com","target":"_blank","rel":"noopener noreferrer nofollow"}}]}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"Built with code but fully customizable via property controls — no coding needed."}]},{"type":"paragraph","content":[{"type":"text","text":"Unlink is not provided so we can keep delivering updates. When an update is available, just click the Update button on the component."}]}]},"introduction":"Auto project schedule + progress","slug":"06-gantt-chart","author":{"framerUserId":"cc7993de-4f5d-4209-b3f0-695614bf8a8b","name":"BrandingUp","slug":"-ds491f","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/cc7993de-4f5d-4209-b3f0-695614bf8a8b/55t3m3ms","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/cc7993de-4f5d-4209-b3f0-695614bf8a8b/01a11fc9-ec9f-7685-a881-cb98166daba5.jpg","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-10-09T08:31:47.181Z","updatedAt":"2026-10-13T04:36:23.053Z","publishedAt":"2026-10-09T08:31:47.178Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://small-convention-270138.framer.app/gantt-chart","price":"14","paymentUrl":"https://brandingup.lemonsqueezy.com/checkout/buy/16156a1d-bfe6-44b9-831c-88df7301a4bf","workshop":false,"categories":[{"id":"51314a1b-a5bd-4ae8-acf0-bd3d5058c367","name":"Charts","slug":"charts"}],"lastSaveId":"2WwUmNlz7JEAnEtcoEac","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":0,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-10-09T08:31:47.926Z","updatedAt":"2026-10-09T08:31:47.926Z","reported":false,"type":"post"}}],"$L5d"]

Suggested for you