Create a horizontal timeline

Hi everyone,

I’m trying to create a timeline for a biography page following the example found here: Timeline - Anne-Sophie Mutter .

However I’m getting incredibly stuck and I have no idea how to create this design and I’d really appreciate any ideas on how to go about achieving this (or if there are any tutorials even better!).

I’ve included my read only below; you can find my failed attempt on the sponsor page… Thanks!


Here is my site Read-Only: https://preview.webflow.com/preview/edwards-blank-site-143218?utm_medium=preview_link&utm_source=designer&utm_content=edwards-blank-site-143218&preview=7ea4f60bcabe539ebd89bdce358a19d3&pageId=5efc49f36697d475948ebb87&mode=preview

you really can’t do that exact style where the arrows move a little bit in Webflow but you can have each arrow swap the entire slide. Then you can use a div for your line and other divs to create your timeline points on that div. it will give the illusion of a moving timeline. This is pretty complicated so I can’t really walk you through it step by step.

2 Likes

Thanks for the reply. I definitely discovered how complicated something like this is! I think I might avoid movement altogether for simplicity’s sake (my timeline doesn’t require that many entries) as I think that would make my life much easier.

Do you know if the dot icon would be something built in CSS, or a separate image or SVG icon? Thanks!

You can use a simple div with 100% rounded corners at a set pixel size for your dot, no problem there. You can make it clickable to show a modal popup (search forum on how to create) using interactions.

1 Like

Thanks for the suggestions! I’ve fiddled around with things and managed to make a satisfactory example on my biography page. But now the left and right edges of the entire timeline are rather abrupt and I’d like to make a blurred transition to the whitespace on either margin.
Do you know how I might go about doing that? Thanks!

Hi, the way you have it set up I can’t think of any way to blur the edges like that. I’d suggest instead making a 1px tall div with a radial gradient where it fades to white/transparent right on the edges to soften them.

Also for your bullets, I’d use the transform filter instead of modifying the site and use transitions to make it grow smooth on hover. Also you want to adjust the hover state to sit right on the line.

I wasn’t able to make a radial gradient work, especially with a 1px height div, but I seem to have found a decent solution.

How would one go about using a transform filter? I’ve never used them before, so I’m not sure how they work.

Just go into your dot hover state and go to the bottom and add a transform filter to grow the dot. Then to back to the regular state and add a transition to transform to make it smooth

1 Like