Vertical time line

Hi everyone! Hope you are all doing well!

I need help with this design and interaction.

I need to create this sort of vertical timeline.
When users click the top and bottom buttons, the year (on the left) and icon (middle) are highlighted, and the description of the event is shown (on the right).
As can be seen for the year 2018.

So, in this case, when users click the up arrow, the year 2020 and its icon should to be highlighted, and the description of the event should be shown.

When users click the button below, the year 2016 and the icon are highlighted and the div block with the description of the event is shown.

Could anyone give me some recommendations on how to recreate this design?

Here is a pic of the design:

Here is my site Read-Only: **uploading the link soon **
(how to share your site Read-Only link)

There are Javascript libraries you can use to a certain extent however you’re usually somewhat limited in how you can present the timeline, and in how easy it is to work with the timeline content in Webflow’s designer.

For example this one has a left-right arrangement.
You’ll need to dig through github repos and docs to see if you can find something ready-made.

If I were building this, I’d probably try using swiper.js. If you can run the carousel vertically, and set it to show a certain number of cards at a time ( I’m assuming yes to both ), then you can create a timeline of N cards and prev/next buttons at the top and bottom.

Touching a card fires an event which you can capture, and assign a “current” class. You would use some CSS here to style the year differently, and make your right-side card visible - or you could “swap” between two card variations, unselected and selected, to give you better designer support.

This is fairly simple custom javascript and css, but it will definitely require a bit of both.

1 Like

Hi @dorik :wave:

That’s a great use-case for using Webflow Interactions.

You can find some chatter about that on the forum.

I’ve always loved Memberstack’s homepage, they have a killer example (scroll down to the how it works section), along with a cloneable and video how-to for it.

Not the exact example you’re looking for, but that’ll give you most (if not all) the answers you’ll need. Swap out the scroll trigger for a mouse click trigger.

Here’s a few other examples & cloneables.

This is totally doable within the Webflow Designer. I’d love to see you post a link once you’re done :smile:

1 Like