[I made] A Timeline of Webflow features & events, using Webflow CMS only

Hi everyone, the title says it all!

Apart from 2 lines of CSS calc, I used no-code and Webflow only to make this CMS timeline of important features releases and events. The layout is using CSS Sticky, and IX2 for the horizontal scroll bound on scroll. As the Timeline is CMS, you can add events as you like and they populate the timelines views. There are a few caveats that I will explain soon when I’ll release a clonable template of it.

19aejkw

Oh, and I renamed my blog. It’s no more inb4, now it’s Manifest! It’s still the same url for the time being: inb4.Webflow.io. So welcome to Manifest, a blog de to help you find techniques and solutions for your Webflow no-code website!

19 Likes

hahahah, I love the “IE6 is not even dead” at the very begining of the timeline !
awesome job :partying_face: really interesting to watch the evolution of the features !
Also love the colors and UX !

1 Like

The world would be a worse place without you :weary:

1 Like

@vincent Hey Vincent. Love your stuff.

I hava a question: I can’t figure out how to edit my objects in the Designer since most things in my sidescrolling wrapper is out of view when designing. How do you go about editing the, let’s say, most farthest object without having to take everything apart first? :wink: Since you can’t really scroll horisontally in the designer…

1 Like

Haha, very good question :slight_smile:

On all my projects, for me, for my clients, I’m using symbols to access difficulty placed content. Wether it’s a block at the end of a side scrolling section, like now, or the nth slide of a slider, or content that’s on the back of a card that is flipping with IX… anything that’s difficult to access is a symbol.

I then have utility pages where I just lay over the symbols, one after another, and I edit them from there :slight_smile: I very often give such power to my clients, with pages behind passwords, with all the content easily accessible.

So you gotta think your structure ahead and decide where to appropriately use Symbols.

This workflow can be supercharged with Symbol Content Override, as you only need to select a symbol element in the Navigator view, to change some of its content using the override panel, even though the symbol itself is out of view.

3 Likes

Thank you for that reply. But in the timeline page you created, which has such precise positioning of the objects in the timeline, did you create symbols for that as well? How big of chunks of the timeline is in symbols? When inspecting the timeline, it looks as if each year i wrapped in a div, which then could be the symbol I’m guessing?

Btw, any chance we could get a clonable version of the timeline page? :slight_smile:

Just finding this. Insanity. Incredible ideas, Vincent. :wink:

Yes, years = symbols

The horizontal placement of the events is set using CSS Calc with the components of the date as variables. The vertical offset is defined in the CMS in a numerical field, from 1 to 8. Vertical offset isn’t automatic, sadly, due to the custom code element being wrapped into an extra div by default.

I promised a cloneable project for this but I still haven’t taken the time to build it, sorry.

1 Like

This is amazing! :smiley: Thank you for making this! Looks and works great!

Vincent, first, thank you for creating this insane thing! (and also for the cloneable version). I’d like to use it for my degree project, showing the issues of an avantgarde magazine.
I hope you don’t mind if I ask for a little help (I’m quite new with Webflow…).
The flags seem to overlap though I didn’t touch the calc code… What am I doing wrong? *EDIT: found the vertical offset!!
Also, how can I edit the years in the timeline (to date them back to the 1910s)? Can I switch the months from English to a different language? (Do these come from PHP?) *EDIT: found the months on that separate page. :slight_smile: Still wondering how to date back…

Here’s my read only link: Webflow - Kassák-MA

TIA!
Annamari

That’s going to be so so cool!

So, overlapping, you got it.
1 list per year and filtering on the year, you got it.
So it’s only about those year and months labels? I’m answering in a video, because it’s easy and a bit complicated at the same time, however one technique makes it really easy.

The video is big, it’s slowly uploading, I’ll come back and edit this post soon, when it’s up.

Edit: here you go https://dl.dropboxusercontent.com/s%2Fv3ny48prmb0yshf%2Fscreencast%25202020-12-28%252013-10-53.mp4

1 Like

Thank you so much! Now it’s clear, I think I couldn’t edit the years and months because of the z-index. I’ll update you with the final result. :slight_smile:

1 Like

I didn’t want to fiddle with the z-index to make it work because there’s a reason the bubbles are on top, they need to be clickable, which they aren’t because I still ran into issues :smiley: V2 will be better.

I sure hope so!

Can’t wait to see V2! :slight_smile:

1 Like

V2 needs to fix 3 things:

  1. no break down of collection list into years
  2. clickable event bubbles
  3. automatic offset, which is currently impossible because Webflow wraps the Custom Code component into an extra div that you can’t style, and CSS doesn’t have a parent selector.

The hard part is 3. I may have to find a complete different approach. Maybe no V2 before new Webflow features…

I’m sure you’ll figure it out sooner or later. :slight_smile: Until then we’ll wait patiently. :smiley:

Hi Vincent, I’m mostly done with the site. :slight_smile:
I can’t display the last two years in the vertical part because of the Webflow collection list limit (what a shame…). I also wonder why the last year in the horizontal part isn’t displayed…

I’d like to add a little padding to the month name in the horizontal version but if I do, the thing seems to fall apart… What do you recommend? TIA! https://preview.webflow.com/preview/kassak-ma?utm_medium=preview_link&utm_source=designer&utm_content=kassak-ma&preview=a631f011c27723cb79eabb17486b1fc3&mode=preview

I also need to figure out why my menu doesn’t work outside the homepage (though it’s a symbol)…