Check system 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:

1. Why Webflow prioritizes site visitor's preferences
2. How this change impacts designs
3. How to check motion settings 
4. Whether to override site visitors’ reduced-motion preferences
5. How to remove smooth-scroll for all visitors 
6. Future plans

Why Webflow prioritizes site visitor’s preferences

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

• For some people, motion and animation on the web can cause stress, illness, and even seizures. Articles like “Accessibility for Vestibular Disorders” and “Your Interactive Is Making Me Sick” share firsthand stories of the consequences that design choices around motion can have for people with motion sensitivities. You can also read more about web accessibility for seizures and other physical reactions on Mozilla Developer Network.
• Webflow recognizes its responsibility to make the web more accessible, and this is one small step toward honoring that responsibility. 

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.

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.

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

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.

• Mac
• Windows 10
• iOS devices
• Android devices
• Browser settings (Chrome, Firefox, Safari)

On Mac 

To keep smooth scrolling:

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

On Windows 10

There are 3 locations to manage this setting. 

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 Optionssettings > Visual Eeffects
2. Add a check to “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. Load: chrome://flags/#smooth-scrolling 
2. Ensure “Smooth scrolling” is disabled

Note: Adjusting the Chrome browser setting only impacts the following OS: Windows, Linux, Chrome OS, and Android.

‍On Firefox 

1. Open Firefox and 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. 

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.

<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 project or page, clicking on a link that targets an on-page element will instantly scroll to the target element.

Future plans

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: 

Make your site more accessible