How to build a dynamic timeline?

[joeliomartini (Joel Martin)]

Hello brilliant webflow community.

I am scoping out a web design project to possibly to a build in webflow, and I came across a difficult section, and I am wondering the best way to code it.

Here it is:

In essence it is a timeline. When you click on different elements on the right side of the panel, the background image, and text content of the div will change to reflect that specific entry.

Ideally I could do this with Webflow CMS to allow the client to add, remove, or re-arrange timeline entries. But if that is horrifically complicated, I would also consider just building it just statically.

Does anyone have any helpful tips on how I could accomplish something like this?

Thank you.

---

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

[nwdsha (Naweed)]

Hey @joeliomartini,

Here are some helpful tips from previous forum posts;

Design a timeline

Hello, Thanks for your help in advance. I’m trying to recreate the following “timeline” design on the Mission page of my website. [image] It doesn’t need to have any interactions, and should cover the full width of a container. The text font and size doesn’t matter as much, as I can edit that on my own. It seems like I can use the feature lists, but it doesn’t provide the diagram of the timeline (vertical rod, divided into segments by circles). Any ideas would be appreciated! Thank you. B…

Create Vertical Timeline

No, I did not style it in regards of the tablet / mobile queries, but that’s not very hard. You just have to adjust things accordingly to your content. If your boxes don’t contain loads of info, there might be a chance you can just “scale” it down from the desktop mode. If not, setting everything to block so they line up underneath eachother is the way to go!

Hope this helps!

Best,
Naweed

[lo_h (laurent)]

have you a fresh link for it?

thx