Best way to get the "Timeline" effect?

Something like this

I want to use it on my “Our Process” page


Here is my site Read-Only: https://preview.webflow.com/preview/marks-fantabulous-project-8bb5d7?preview=f1172e7f74fc49aec611802a07e294c7
(how to share your site Read-Only link)

Looks easy enough. Though your link is broken, fix it first for anyone to be able to help you.

edit: yeah, fixed now and I nearly fell from the chair loading that intro.

Anyway, you will need main container that will hold your timeline and all the blocks with content. The timeline can be an absolutely positioned centered thin and 100% of height div coloured to whatever you need. Then add your blocks of content around the timeline using flex positioning for example. Hopefully this will set you to a good start

No “best way” - you have endless techniques for this idea. Maybe try this references:

Is the scary wolf too much?

Well, yeah. I don’t think any b2b service would want seeing their potential customers scared sh*tless on the first second of acquaintance with the company. Also you never know if your user is one of the poor sods with this condition.

Still a work in progress. I’ve gone through several iterations of the background. Would love any input you have on how to incorporate a wolf without it being too off putting.

Don’t want to sound like a dick but honestly when thinking of wolves marking something I can only think of their vicious bites, which is not the prettiest thought (for someone who actually know what it looks like in the wild) or… well… the other kind of marking, which is also not exactly the most marketable concept.

As for how to incorporate a wolf - well, they are magnificent creatures and having them on hero section is nothing off-putting in itself. Just don’t select the “staring at the camera” kind of shots and it’ll be fine. Just ask your art director to come up with the right kind of footage/images

Lol. At this point, you’re talking to the art director :wink:

Do you think there’s anyway to do this with IX2?

Why not. But first you need to solve the “static” (without animation) style and design. Than connect the cards & dotes & line - to scroll effects / show-hide / and so on (I think only on desktop/tablet - on mobile the timeline is with to much detials “no room” for to much interactions).

Take a look now. Made some revisions.

No more crying in the bathroom out of fear of wolves from me at least! :+1:

I guess that’s a good step forward.

I did it! (I think)

www.scalableb2b.com

1 Like

This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.