Verify system movement settings

Webflow’s fluid-scroll animation now acknowledges your website visitor’s choice to deactivate animations on their operating system. This pertains to website visitors who have a limited-motion system preference configured on their operating system or browser.

In this tutorial, you will discover all about system movement settings which include:

1. The reason Webflow emphasizes visitor’s preferences
2. The impact of this modification on designs
3. How to inspect movement settings
4. Whether to supersede visitor’s limited-motion choices
5. How to eliminate fluid-scroll for all visitors
6. Upcoming strategies

Why Webflow values visitor’s preferences

We prioritize the preferences of your website visitors for certain grounds:

• For some individuals, motion and animation on the internet can induce tension, illness, and even seizures. Articles such as “Accessibility for Vestibular Disorders” and “Your Interactive Is Making Me Sick” share real experiences of the effects that design decisions regarding motion can have on people with motion sensitivities. You can also read further about internet accessibility for seizures and other physical reactions on Mozilla Developer Network.
• Webflow acknowledges its duty to enhance internet accessibility, and this is one small stride towards fulfilling that obligation.

Impact of this modification on designs

Fluid-scroll is an animation attribute that automatically implements to link navigation. It generates an animated scroll effect when a user selects a link targeting an on-page section.

For instance, if you possess 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 gently through all your page content prior to reaching the contact form section.

If your site visitor has the limited-motion setting activated on their system, selecting a link (e.g., the Contact button) targeting an on-page section (e.g., the contact form), will instantly scroll to the target section — without animating through all the content on the way to the contact form.

Behavior of section links with scroll motion on.

‍

Behavior of section links with scroll motion off.

‍Note: Limited-motion operating system or browser settings solely impact fluid-scroll behavior on published projects. Project previews will still depict fluid-scroll animation, even if limited-motion has been chosen as a user preference.

Inspecting movement settings

If your website visitors or clients make remarks about the alteration, you can assist them in examining whether they’ve activated motion settings on their operating system or browser. This setting is denoted as “Show Animations” (on Windows) and “Reduce Motion” (on Mac).

Examine the OS (operating system) setting

You can verify if this preference is enabled on different operating systems and browsers. To uphold fluid scrolling, ensure this setting is deactivated.

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

On Mac 

To maintain fluid scrolling:

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

On Windows 10

There are 3 locations to manage this setting. 

Visit the first location to maintain fluid 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 maintain fluid 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 maintain fluid 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. Untick “Turn off all unnecessary animations (when possible)”

iOS Solutions

To maintain smooth scrolling:

1. Proceed to Settings > Accessibility > Motion 
2. Toggle the “Reduce Motion” option to OFF

Android Instructions

To ensure smooth scrolling:

1. Access Settings > Accessibility > Visibility enhancements > Remove animations
2. Toggle the switch to OFF

Adjusting Browser Settings

While most users modify motion settings at the operating system level, some individuals make changes at the browser level. Refer to browser settings in the following manner:

Chrome

1. Type: chrome://flags/#smooth-scrolling
2. Make sure “Smooth scrolling” is turned off

Note: Configuration of Chrome browser settings affects Windows, Linux, Chrome OS, and Android operating systems only.

Firefox

1. Launch Firefox and visit: about:config
2. Add a numerical preference labeled ui.prefersReducedMotion and set its value to 1 (changes take immediate effect)

Safari

This setting is governed by the MacOS configuration.

Overriding Visitor Preferences

Overriding a visitor’s reduced-motion preferences isn’t ideal. Webflow stands behind the priority of user constituencies, emphasizing the prioritization of user preferences over author preferences whenever feasible.

Disabling Smooth-Scroll for All Visitors

Disabling smooth-scroll for all visitors might be necessary for various reasons, particularly concerning accessibility requirements for products or businesses. While the Web Content Accessibility Guidelines (WCAG) do not explicitly address smooth-scrolling, consideration for motion-induced discomfort remains critical, and preempting visitors opting out of smooth-scrolling is a valid approach.

As a designer, implement custom code to turn off our smooth scroll module across your entire project or on a specific page to minimize scroll motion. Add the below code to your project’s or page’s settings:

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

Applying this code to your project or page causes immediate navigation to on-page elements when clicking on a linked target.

Planned Enhancements

Webflow is aware of potential discomfort resulting from excessive motion effects and is committed to improving such experiences in the upcoming months.

If you encounter unexpected behavior, kindly inform us byposting on the forum.

 

Related articles: 

Enhance site accessibility

• Author
• Recent Posts

Ewan Mak

Webflow Expert at Tenten

Webflow expert and frontend developer with 4+ years of experience. I bring a versatile skillset (HTML, CSS, JS, Figma, Adobe) to craft exceptional Webflow experiences. 70+ projects honed my ability to seamlessly blend custom code and visual development. Organized, deadline-driven, and passionate about growth, I excel in dynamic environments. Let's push boundaries and create something amazing.

Latest posts by Ewan Mak (see all)

• Include or eliminate Workspace spots and members - April 15, 2024
• Centering box summary - April 15, 2024
• Store a site for future reference - April 15, 2024

Related Posts

• Adjust settings

  Adjust display settings to determine the fundamental layout behavior of an element.

• Scrolling for side-to-side movement

  Set up a page scroll animation for a continuous animation that moves and fades elements…

• Shifting focus effect

  Animate a custom rack focus interaction