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?
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.
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.
