Check system motion settings

Updated

Learn how to check operating system and browser motion settings.

Webflow’s smooth scroll animation 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.

Why Webflow prioritizes site visitor’s preferences

We prioritize your site visitor’s preferences for a couple of reasons:

How this change impacts designs

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.

Important

Reduced motion operating system or browser settings only affect smooth scroll behavior on published sites. Site previews will still show smooth scroll animation, even if reduced motion has been selected as a user preference.

How to check motion settings

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 “Reduce Motion” (on Mac) or “Show Animations” (on Windows). 

Check the OS (operating system) setting

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.

On Mac 

To keep smooth scrolling:

  1. Go to System Preferences > Accessibility > Display
  2. Uncheck “Reduce motion”

On Windows 10

You can manage this setting in three different locations on Windows.

Visit the first location to keep smooth scrolling:

  1. Go to Settings > Ease of Access > Display > Simplify and personalize Windows
  2. Toggle “Show animations in Windows” to on

Visit the second location to keep smooth scrolling:

  1. Go to Control Panel > System and Security > System > Advanced System Settings > Performance Options settings > Visual Eeffects
  2. Check “Animate controls and elements inside windows”

Visit the third location to keep smooth scrolling:

  1. Go to Control Panel > Ease of Access > Ease of Access Center > Make the computer easier to see > Make things on the screen easier to see
  2. Uncheck “Turn off all unnecessary animations (when possible)”

On iOS devices

To keep smooth scrolling:

  1. Go to Settings > Accessibility > Motion
  2. Switch the “Reduce Motion” toggle to off

On Android devices 

To keep smooth scrolling:

  1. Go to Settings > Accessibility > Visibility enhancements > Remove animations
  2. Switch the toggle to off

Check the browser setting

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 

  1. Go to chrome://flags/#smooth-scrolling
  2. Ensure “Smooth scrolling” is disabled

Note

The Chrome browser setting only impacts Windows, Linux, Chrome OS, and Android operating systems.

‍On Firefox 

  1. Go to about:config
  2. Add a number preference called ui.prefersReducedMotion and set its value to 1 (changes to this preference take effect immediately)

On Safari 

This is controlled by the MacOS setting.

Whether to override site visitors’ reduced-motion preferences

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. 

How to remove smooth-scroll for all visitors

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. 

You can use custom code to turn off our smooth scroll module for all site visitors. Add the following code snippet to your site’s settings to quickly reduce scroll motion across an entire site, or add the code to a single page’s settings to reduce scroll motion on that page:

<script>
$(function() {
  // Enable the beta flag
  document.body.setAttribute('data-wf-reduce-scroll-motion');
  
  // Eliminate in-page scroll motion
  document.body.setAttribute('data-wf-scroll-motion', 'none');
});
</script>

When you add this code to your site or page, clicking on a link that targets an on-page element instantly scrolls to the target element. Learn more about adding custom code to your site.

Related articles