Navbar & smooth scrolls
Navbar & smooth scrolls
Learn how to control your smooth scrolls in Webflow
The Webflow Features & Events Timeline is made with no code* with Webflow. It's CMS based so events can be added through the Editor interface? The category they're assign will decide of their color and icon.
* There's actually 2 lines of custom CSS Calc code as Calc is not yet covered by Webflow's native features.
Each year is a collection list set to position:relative. Collection items are set to position:absolute, and positioned horizontally and vertically in a year-table using two custom code divs which dimensions are set using CSS Calc with CMS variables.
The horizontal section, page title and section title are positionned using CSS Sticky. The horizontal scroling of the Timeline is achieved using Webflow Interactions, learn about it here.
As all events elements in the timeline are overlapping each other, this prevents to be able to click on individual elements. This is because we're using a CSS Calc trick to position the events vertically and horizontally.
Another specificity is that the date must be spread into numerical fields in the CMS in order to be used as variables in the CSS Calcession later. The vertical position is also an editorial CMS decision, so adding new CMS nodes must be planned ahead.
If you want to develop such a CMS Timeline, you shoud develop a Javascrip code to make positionning better, easier to maintain, and click friendly. This is just a demo, although it can be used in production if you're OK with the limitations.
Clonable Webflow CMS template for this timeline is coming soon.