Navbar & smooth scrolls
Navbar & smooth scrolls
Learn how to control your smooth scrolls in Webflow
Clone this project, duplicate it, explore how it's made, make it your own, add it to your own site, for free.Let's go!
Set custom easing curves for each step of your interactions.
Simplify checkout for orders that don’t need shipping.
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
Improve readability and accessibility of text on your site with the “ch” unit, which lets you control the width of text elements by character count.
Symbols have their own panel on the left side of the designer to make them easier to find
new controls for managing image alt tags that let you more efficiently and thoroughly ensure your website images are screen reader accessible.
Uniquely style first, last, even, and odd items in ecommerce and CMS-driven Collection Lists.
More control over the promotions you run with start and expirations dates, free shipping, limited usage and more.
Select various product types when setting up your store to automatically show or hide relevant fields during product creation.
Set the base canonical tag for your site to avoid duplicate content issues and tell search engines which version of your site pages to index.
Organize files in your asset manager by folders to keep things tidy within your projects.
A handful of controls that let you fine tune some details of how your site loads and performs.
Map CSV content to reference fields when importing CMS content.
See high-impact accessibility issues on your site with the new Audit panel in the Designer.
The power of Webflow backed by the security, scalability, and support that enterprises demand.
Nest symbols within other symbols to build and maintain complex layouts more easily and efficiently.
Vision Preview mode in the canvas settings lets you to simulate color blindness or focus impairments on your site’s design.
You can view, fulfill, and manage orders effortlessly within the Designer without redirecting the Editor.
Form submissions/month: Basic plan: previously 500/mo → now 100/mo,Business plan: previously unlimited/mo → now 2,000/mo. Pageviews/month: Business plan: previously 1,000,000/mo → now 500,000/mo
New setting to the style panel that lets users focus on the properties section they're currently working in by collapsing all other sections.
Enterprise customers can upload custom SSL certificates.
Free Designer Extension from Finsweet, brings dozens of useful features to the Designer.
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 Calcession later. The vertical position is also an editorial CMS decision, 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.
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.