Customize your designs for larger screens with 3 new device breakpoints at 1280px, 1440px, and 1920px.
Nest a ‘child’ collection list into a ‘parent’ to display categories, tags — or any referenced content — in your designs.
Keep your Ecommerce orders synced in Shippo, easily create shipping labels, and automate order tracking for your customers.
Connect your Webflow Ecommerce store to Printful to get a print-on-demand store.
Select multiple (or all) of your assets at once in the wide view of the asset manager to delete unneeded files.
Buy Now checkout option for your Ecommerce store lets your customers check out faster
Most commonly used elements and components are now keyboard and screen reader accessible
Clean your interactions panel up by bulk selecting and removing all unused interactions and animations
New library of lessons covering everything from layout and typography to interactions and 3D transforms
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, some custom code using the pointer-events property is needed. It has to be set to none on the content of the Collection item itself, then restrored to Auto on the link element. Concurrently, the link element has to get the highest z-index of the context.
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 Calc expression later. The vertical position is also an editorial CMS decision — you chose between vertical spots 1 to 8 for each event, in an Options list — so adding new CMS nodes must be planned ahead. The date also has to be entered a second time, in date field, in order to filter on years for each year-block.