Learn how motion and animations in your design can affect your site visitor’s experience, and determine how to check operating system and browser motion settings.
Webflow’s smooth-scroll animation now respects your site visitor’s preference to disable animations on their operating system. This applies to site visitors who have a reduced-motion system preference set on their operating system or browser.
In this lesson, you’ll learn all about system motion settings with the following:
We prioritize your site visitor’s preferences for a couple of reasons:
Smooth-scroll is an animation feature that automatically applies to link navigation. It creates an animated scroll effect when a user clicks a link that targets an on-page section.
For example, if you have a navigation link at the top of your page (e.g., a Contact button) that links to your contact form at the bottom of your page, a visitor who clicks that Contact button will scroll smoothly through the entirety of your page content before landing on the contact form section.
If your site visitor has the reduced-motion setting enabled on their system, clicking a link (e.g., the Contact button) that targets an on-page section (e.g., the contact form), will instantly scroll to the target section — without animating all the page content on the way to the contact form.
How links to sections behave with scroll motion turned on.
How links to sections behave with scroll motion turned off.
Note: Reduced-motion operating system or browser settings only affect smooth-scroll behavior on published projects. Project previews will still show smooth-scroll animation, even if reduced-motion has been selected as a user preference.
If your site visitors or clients comment about the change, you can help them check whether they've enabled motion settings on their operating system or browser. This setting is called “Show Animations” (on Windows) and “Reduce Motion” (on Mac).
You can check whether this preference is set on various operating systems and browsers. If you want to keep smooth scrolling, make sure this setting is turned OFF.
To keep smooth scrolling:
There are 3 locations to manage this setting.
Visit the first location to keep smooth scrolling:
Visit the second location to keep smooth scrolling:
Visit the third location to keep smooth scrolling:
To keep smooth scrolling:
To keep smooth scrolling:
Most visitors will change the motion setting at the OS level, but some users set this at the browser level. You can check browser settings as follows:
On Chrome
Note: Adjusting the Chrome browser setting only impacts the following OS: Windows, Linux, Chrome OS, and Android.
On Firefox
On Safari
This is controlled by the MacOS setting
Overriding a site visitor’s reduced-motion preferences is not best for the visitor. Webflow believes in the priority of user constituencies. In other words, user preferences should always come before author preferences where possible.
You may want to turn off smooth-scroll for all visitors for a number of reasons, but especially if you have some kind of product or business requirement around accessibility. The Web Content Accessibility Guidelines (WCAG) does not say anything directly about smooth-scrolling, but motion-induced illness is still a major design consideration, and you may prefer not to wait for site visitors to opt out of smooth-scrolling.
As a designer, you can use custom code to turn off our smooth scroll module for all site visitors. Add the following code snippet to your project's settings to quickly reduce scroll motion across an entire project, or add the code to a single page's settings to reduce scroll motion on that page. Read more about adding custom code to your project or page’s settings.
When you add this code to your project or page, clicking on a link that targets an on-page element will instantly scroll to the target element.
Webflow acknowledges the harm site visitors may experience in excessive motion-related experiences, and we’re looking to improve those types of experiences in the upcoming months.
If you experience any unexpected behavior, please let us know by posting in the forum.
Related reading:
Something went wrong while submitting the form. Please contact support@webflow.com