Vertical Responsive TImeline in Webflow

Hi Everyone,
I’m new to Webflow - i’ve gone through the forum and read all of the posts re: this, and can’t seem to find a video tutorial, or a site that’s active that’s got what i’m looking for. I’m trying to create a single vertical line with staggered boxes, as you scroll down, the year (between each box) shows up. Anyone know of any tutorials? I followed the instructions that were a reply to another… and to say it showed up as a complete mess would be an understatement, and the demo the designer Stephen had done as a ref. doesn’t look to be active anymore

Any help would be appreciated. Last part of a site i have to do by Friday!
Thanks,

Here is what i’m trying to build
c1ddc81a20210fcff8c316c8255a1b860766e2de

@Brian_Hutton

Please post the read only link to your site and an example (or a better explanation) of the goal you are trying to achieve…

No problem - updated!

What about a read only link to what you have done thus far?

@IVG I haven’t built it yet - I have no idea how to build it. I keep following various instructions from other Forums posts, and Nothing is either a) close to this, or B) seems to have a working link, so i can’t even double check my work.

The section on my site so far is just a blank section block with a container in it- so there’s nothing to see on the read only link - like i mentioned, new to Webflow so it’s not like i’m close and just need a tweak, I am looking for some sort of Tutorial

Vertical Timelines on Wordpress are just a plug in, easy peasy - I’m surprised there doesn’t seem to be an easy way of doing this on any of the replies i’ve read to other inquiries (it seems to come up every 6 months or so on the forum)

there is an easy way of doing it - first layout the timeline how you like it as if it is all visible - and then apply a scroll animation to various parts so they appear as you scroll…

@IVG - Tried that… It doesn’t seem to be responsive if I do that at all. It’s just so many over lay elements that when its opened on say, a 24" screen (vs my 15" screen) it’s just a jumbled mess.

I mean, i can create 1px div boxes to create the lines, and then Headers for the years, Text blocks, and then insert logos etc. it just turns into a completely jumbled mess though as soon as i change screen sizes.

I tried just building it in Illustrator and putting it in as an image/animation, and setting the section to a set size, but same problem.

I also tried the Container method that individuals were suggesting (Putting in Columns, adding boarders to create the line, etc) but it just looks … clunky.

Do you know of any tutorials on how to build something similar?

here is a little test page i made… is this what you are looking for? (go to the timeline page and preview)

Along those lines - i would add text in the boxes, dates opposite, boxes with $ volume along the line - but will that be response to screen size? (Desktop, understanding that i would need to redesign the page for mobile) it looks like the elements are all just fixed?

PS How did you manage to place the boxes like that without having them set up as Relative ? They’re all static but on different sides ? (never mind figured that out :slight_smile: ) - I don’t see how to have boxes on both sides of the line without relative positioning though.

so it is all responsive to different screen sizes because the box sizes are in VW/VH - or you can do it in percentages…

just go to the viewer and press 2, 3, 4 to see different breakpoints…

as for positions- its inherited from the parent - all I did is give the boxes alignment… left or right

as you can see its pretty easily done - so you can just make additional animation just like I did which will animate as someone scrolls down the page…

Thanks,
Yes, i see the positioning - but how do you put things beside them. i.e. something both left and right? Without it being relative and floating.

I’m struggling to keep things in the same places after a design something based on screen size. getting the hang of it, but it’s def a WiP. I’ll share the end product once i’m done :slight_smile:

if you will look at the example that I have provided, you will see the following:
the timeline container is flex/vertical
the text boxes are flex children and if you click on “alignment and order” in the designer you can align them left or right and thats how they are positioned on different sides…

as for responsiveness it works just fine, just like i said, so long as you keep sizes in relative units (%'s or VW/VH) and then you can make slight adjustments at various breakpoints…

Did you get this working? Also looking to create something of a similar theme. Be great to share your result

1 Like