{"id":5213,"date":"2024-04-14T22:22:10","date_gmt":"2024-04-14T14:22:10","guid":{"rendered":"https:\/\/webflow.tenten.co\/?p=5213"},"modified":"2024-04-14T22:22:10","modified_gmt":"2024-04-14T14:22:10","slug":"verify-system-movement-settings","status":"publish","type":"post","link":"https:\/\/webflow.tenten.co\/en\/verify-system-movement-settings\/","title":{"rendered":"Verify system movement settings"},"content":{"rendered":"\n<div class=\"docs_rich-text w-richtext\">\n<p>Webflow\u2019s fluid-scroll animation now acknowledges your website visitor\u2019s 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.<\/p>\n<p>In this tutorial, you will discover all about system movement settings which include:<\/p>\n<ol role=\"list\">\n<li>The reason Webflow emphasizes visitor&#8217;s preferences<\/li>\n<li>The impact of this modification on designs<\/li>\n<li>How to inspect movement settings<\/li>\n<li>Whether to supersede visitor&#8217;s limited-motion choices<\/li>\n<li>How to eliminate fluid-scroll for all visitors<\/li>\n<li>Upcoming strategies<\/li>\n<\/ol>\n<h2>Why Webflow values visitor&#8217;s preferences<\/h2>\n<p>We prioritize the preferences of your website visitors for certain grounds:<\/p>\n<ul role=\"list\">\n<li>For some individuals, motion and animation on the internet can induce tension, illness, and even seizures. Articles such as \u201c<a href=\"https:\/\/alistapart.com\/article\/accessibility-for-vestibular\/\" target=\"_blank\" rel=\"noopener\">Accessibility for Vestibular Disorders<\/a>\u201d and \u201c<a href=\"https:\/\/source.opennews.org\/articles\/motion-sick\/\" target=\"_blank\" rel=\"noopener\">Your Interactive Is Making Me Sick<\/a>\u201d share real experiences of the effects that design decisions regarding motion can have on people with motion sensitivities. You can also<a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/Accessibility\/Seizure_disorders\" target=\"_blank\" rel=\"noopener\"> read further about internet accessibility for seizures and other physical reactions on Mozilla Developer Network<\/a>.<\/li>\n<li>Webflow acknowledges its duty to enhance internet accessibility, and this is one small stride towards fulfilling that obligation.<\/li>\n<\/ul>\n<h2>Impact of this modification on designs<\/h2>\n<p>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.<\/p>\n<p>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.<\/p>\n<p>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 \u2014 without animating through all the content on the way to the contact form.<\/p>\n<figure class=\"w-richtext-align-fullwidth w-richtext-figure-type-video\">\n<div><iframe allowfullscreen frameborder scrolling=\"no\" src=\"https:\/\/player.vimeo.com\/video\/528562968\"><\/iframe><\/div>\n<\/figure>\n<p>Behavior of section links with scroll motion on.<\/p>\n<p>\u200d<\/p>\n<figure class=\"w-richtext-align-fullwidth w-richtext-figure-type-video\">\n<div><iframe allowfullscreen frameborder scrolling=\"no\" src=\"https:\/\/player.vimeo.com\/video\/528564291\"><\/iframe><\/div>\n<\/figure>\n<p>Behavior of section links with scroll motion off.<\/p>\n<blockquote><p>\u200d<strong>Note:<\/strong> Limited-motion operating system or browser settings solely impact fluid-scroll behavior on <em>published<\/em> projects. Project previews will still depict fluid-scroll animation, even if limited-motion has been chosen as a user preference.<\/p><\/blockquote>\n<h2>Inspecting movement settings<\/h2>\n<p>If your website visitors or clients make remarks about the alteration, you can assist them in examining whether they&#8217;ve activated motion settings on their operating system or browser. This setting is denoted as \u201c<strong>Show Animations<\/strong>\u201d (on Windows) and \u201c<strong>Reduce Motion<\/strong>\u201d (on Mac).<\/p>\n<h3>Examine the OS (operating system) setting<\/h3>\n<p>You can verify if this preference is enabled on different operating systems and browsers. To uphold fluid scrolling, ensure this setting is deactivated.<\/p>\n<ul role=\"list\">\n<li>Mac<\/li>\n<li>Windows 10<\/li>\n<li>iOS devices<\/li>\n<li>Android devices<\/li>\n<li>Browser settings (Chrome, Firefox, Safari)<\/li>\n<\/ul>\n<h4>On Mac\u00a0<\/h4>\n<p>To maintain fluid scrolling:<\/p>\n<ol role=\"list\">\n<li>Go to <strong>System Preferences<\/strong> &gt; <strong>Accessibility<\/strong> &gt; <strong>Display<\/strong>\u00a0<\/li>\n<li><strong>Untick<\/strong> \u201cReduce motion\u201d<\/li>\n<\/ol>\n<figure class=\"w-richtext-align-fullwidth w-richtext-figure-type-image\">\n<div><img decoding=\"async\" src=\"https:\/\/webflow-s3.tenten.co\/2024\/04\/64b9487c2f3b0e9d5a933793_606b89a2b64d3f358018945b_osayvgs7waajok01xbrg3vnzttglk2wgaix6dxehkgpey0l3fmmrlma6sitkdmbwj1kxsgjnfrvfiisyy5llhcjt9cucowk7axmwoy38stodjskarzilg4vvynll-ykp0jqjfogi.png\" alt=\"To maintain fluid scrolling on a Mac, go to System Preferences &gt; Accessibility &gt; Display and Untick \u201cReduce motion\u201d.\" title=\"64b9487c2f3b0e9d5a933793_606b89a2b64d3f358018945b_osayvgs7waajok01xbrg3vnzttglk2wgaix6dxehkgpey0l3fmmrlma6sitkdmbwj1kxsgjnfrvfiisyy5llhcjt9cucowk7axmwoy38stodjskarzilg4vvynll-ykp0jqjfogi\"><\/div>\n<\/figure>\n<h4>On Windows 10<\/h4>\n<p>There are 3 locations to manage this setting.\u00a0<\/p>\n<p>Visit the <strong>first location<\/strong> to maintain fluid scrolling:<\/p>\n<ol role=\"list\">\n<li>Go to <strong>Settings<\/strong> &gt; <strong>Ease of Access<\/strong> &gt; <strong>Display<\/strong> &gt; <strong>Simplify and personalize Windows<\/strong>\u00a0<\/li>\n<li>Toggle \u201cShow animations in Windows\u201d to<strong> ON<\/strong><\/li>\n<\/ol>\n<figure class=\"w-richtext-align-fullwidth w-richtext-figure-type-image\">\n<div><img decoding=\"async\" src=\"https:\/\/webflow-s3.tenten.co\/2024\/04\/64b9487c2f3b0e9d5a933788_606b89a281dc15a96bfaca41_uzvw9ec66rhqfzvww0qqfnrqvrwp2evs5khqqedqhlvn9gvmjktlebgpyrxufi9rb1duajtle-pfausblj0k1adrlpyabyq9ybwsricwqeuaggnjawkjqlmh7wy_mk5fiz4qfyco.png\" alt=\"To maintain fluid scrolling on Windows, go to Settings &gt; Ease of Access &gt; Display &gt; Simplify and personalize Windows and toggle \u201cShow animations in Windows\u201d to ON.\" title=\"64b9487c2f3b0e9d5a933788_606b89a281dc15a96bfaca41_uzvw9ec66rhqfzvww0qqfnrqvrwp2evs5khqqedqhlvn9gvmjktlebgpyrxufi9rb1duajtle-pfausblj0k1adrlpyabyq9ybwsricwqeuaggnjawkjqlmh7wy_mk5fiz4qfyco\"><\/div>\n<\/figure>\n<p>Visit the <strong>second location<\/strong> to maintain fluid scrolling:<\/p>\n<ol role=\"list\">\n<li>Go to <strong>Control Panel<\/strong> &gt; <strong>System and Security<\/strong> &gt; <strong>System<\/strong> &gt; <strong>Advanced System Settings<\/strong> &gt; <strong>Performance Optionssettings<\/strong> &gt; <strong>Visual Eeffects<\/strong><\/li>\n<li>Add a<strong> check<\/strong> to \u201cAnimate controls and elements inside windows\u201d<\/li>\n<\/ol>\n<figure class=\"w-richtext-align-fullwidth w-richtext-figure-type-image\">\n<div><img decoding=\"async\" src=\"https:\/\/webflow-s3.tenten.co\/2024\/04\/64b9487c2f3b0e9d5a93378f_606b89a381dc15f918faca42_ikgimwlogv2tfltzkrrgkzwkabbgfp0v_fpuu74ma6-bbiwse5nseuegvxxrnszqc5mjfazawele_renenflxpwcfnbzrtfel3lwtt1d2cyz5qjbwufvd2s63ycohel-6mgsijwe.png\" alt=\"To maintain fluid scrolling on Windows, go to Control Panel &gt; System and Security &gt; System &gt; Advanced System Settings &gt; Performance Optionssettings &gt; Visual Eeffects and add a check to \u201cAnimate controls and elements inside windows\u201d\" title=\"64b9487c2f3b0e9d5a93378f_606b89a381dc15f918faca42_ikgimwlogv2tfltzkrrgkzwkabbgfp0v_fpuu74ma6-bbiwse5nseuegvxxrnszqc5mjfazawele_renenflxpwcfnbzrtfel3lwtt1d2cyz5qjbwufvd2s63ycohel-6mgsijwe\"><\/div>\n<\/figure>\n<p>Visit the <strong>third location<\/strong> to maintain fluid scrolling:<\/p>\n<ol role=\"list\">\n<li>Go to <strong>Control Panel<\/strong> &gt; <strong>Ease of Access<\/strong> &gt; <strong>Ease of Access Center<\/strong> &gt; <strong>Make the computer easier to see <\/strong>&gt; <strong>Make things on the screen easier to see<\/strong><\/li>\n<li><strong>Untick <\/strong>\u201cTurn off all unnecessary animations (when possible)\u201d<\/li>\n<\/ol>\n<figure class=\"w-richtext-align-fullwidth w-richtext-figure-type-image\">\n<div>\n<figure><img decoding=\"async\" src=\"https:\/\/webflow-s3.tenten.co\/2024\/04\/64b9487c2f3b0e9d5a93378b_606b89a25075d33080f1df53_-y_azjkdddgblo1m4z66kd91wolzjztuyuaatt_hjxcnyhd3zkgjjfp-h6quicj4vgheck5pq6f9ctpqxiscbzesh9jezr2xe82ghgpdnpzep5zmwdz3czpjjfcqkngyy6k4nmws.png\" alt=\"To ensure smooth scrolling on Windows, navigate to the Control Panel &gt; Ease of Access &gt; Ease of Access Center &gt; Make the computer easier to see &gt; Make things on the screen easier to see, and disable \u201cTurn off all unnecessary animations (when possible)\u201d\" title=\"64b9487c2f3b0e9d5a93378b_606b89a25075d33080f1df53_-y_azjkdddgblo1m4z66kd91wolzjztuyuaatt_hjxcnyhd3zkgjjfp-h6quicj4vgheck5pq6f9ctpqxiscbzesh9jezr2xe82ghgpdnpzep5zmwdz3czpjjfcqkngyy6k4nmws\"><\/figure>\n<h4>iOS Solutions<\/h4>\n<p>To maintain smooth scrolling:<\/p>\n<ol role=\"list\">\n<li>Proceed to <strong>Settings<\/strong> &gt; <strong>Accessibility<\/strong> &gt; <strong>Motion\u00a0<\/strong><\/li>\n<li>Toggle the \u201cReduce Motion\u201d option to <strong>OFF<\/strong><\/li>\n<\/ol>\n<figure class=\"w-richtext-align-fullwidth w-richtext-figure-type-image\">\n<div><img decoding=\"async\" src=\"https:\/\/webflow-s3.tenten.co\/2024\/04\/64b9487c2f3b0e9d5a933771_606b89a38507115836b392dd_jiufmcgvlx0tph85yerk89-sn6qaiei641_xunqjpgx1cdourispqjv3c6_hnjoawu69xltlkpejkhfja9ndaoc1rffojw_qdunnrew2wncuz6vntpugzeaacpysxaotc_dt-thj.png\" alt=\"For smooth scrolling on iOS gadgets, access Settings &gt; Accessibility &gt; Motion and disable the \u201cReduce Motion\u201d switch.\" title=\"64b9487c2f3b0e9d5a933771_606b89a38507115836b392dd_jiufmcgvlx0tph85yerk89-sn6qaiei641_xunqjpgx1cdourispqjv3c6_hnjoawu69xltlkpejkhfja9ndaoc1rffojw_qdunnrew2wncuz6vntpugzeaacpysxaotc_dt-thj\"><\/div>\n<\/figure>\n<h4>Android Instructions<\/h4>\n<p>To ensure smooth scrolling:<\/p>\n<ol role=\"list\">\n<li>Access <strong>Settings<\/strong> &gt; <strong>Accessibility<\/strong> &gt; <strong>Visibility enhancements<\/strong> &gt; <strong>Remove animations<\/strong><\/li>\n<li>Toggle the switch to <strong>OFF<\/strong><\/li>\n<\/ol>\n<figure class=\"w-richtext-align-fullwidth w-richtext-figure-type-image\">\n<div><img decoding=\"async\" src=\"https:\/\/webflow-s3.tenten.co\/2024\/04\/64b9487c2f3b0e9d5a933774_606b89a3b5137ba37752d11b_v3zpym-swj0wnb2tq1ofluj2abrq8zcrki32hq8gzpeysghqq5turbphzh4172-occcimdx0lclon_vpt_larxagkkr5cqc5xocvtwx0kw5uccqpuyw0hz8biu5clkb7fbi5dhbu.png\" title=\"64b9487c2f3b0e9d5a933774_606b89a3b5137ba37752d11b_v3zpym-swj0wnb2tq1ofluj2abrq8zcrki32hq8gzpeysghqq5turbphzh4172-occcimdx0lclon_vpt_larxagkkr5cqc5xocvtwx0kw5uccqpuyw0hz8biu5clkb7fbi5dhbu\"><\/div>\n<\/figure>\n<h4>Adjusting Browser Settings<\/h4>\n<p>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:<\/p>\n<p><strong>Chrome<\/strong><\/p>\n<ol role=\"list\">\n<li>Type: <em>chrome:\/\/flags\/#smooth-scrolling<\/em><\/li>\n<li>Make sure \u201cSmooth scrolling\u201d is turned off<\/li>\n<\/ol>\n<blockquote><p><strong>Note:<\/strong> Configuration of Chrome browser settings affects Windows, Linux, Chrome OS, and Android operating systems only.<\/p><\/blockquote>\n<p><strong>Firefox<\/strong><\/p>\n<ol role=\"list\">\n<li>Launch Firefox and visit: <em>about:config<\/em><\/li>\n<li>Add a numerical preference labeled <em>ui.prefersReducedMotion<\/em> and set its value to <strong>1<\/strong> (changes take immediate effect)<\/li>\n<\/ol>\n<p><strong>Safari<\/strong><\/p>\n<p>This setting is governed by the MacOS configuration.<\/p>\n<h2>Overriding Visitor Preferences<\/h2>\n<p>Overriding a visitor&#8217;s reduced-motion preferences isn&#8217;t ideal. Webflow stands behind the<a href=\"https:\/\/www.w3.org\/TR\/html-design-principles\/#priority-of-constituencies\" target=\"_blank\" rel=\"noopener\"> priority of user constituencies<\/a>, emphasizing the prioritization of user preferences over author preferences whenever feasible.<\/p>\n<h2>Disabling Smooth-Scroll for All Visitors<\/h2>\n<p>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.<\/p>\n<p>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&#8217;s or page&#8217;s settings:<\/p>\n<pre>\n<code class=\"language-xml hljs\">\n&lt;script&gt;\n$(function() {\n  \/\/ Activate the beta feature\n  document.body.setAttribute('data-wf-reduce-scroll-motion');\n  \n  \/\/ Remove in-page scroll motion\n  document.body.setAttribute('data-wf-scroll-motion', 'none');\n});\n&lt;\/script&gt; \n<\/code>\n<\/pre>\n<p>Applying this code to your project or page causes immediate navigation to on-page elements when clicking on a linked target.<\/p>\n<h2>Planned Enhancements<\/h2>\n<p>Webflow is aware of potential discomfort resulting from excessive motion effects and is committed to improving such experiences in the upcoming months.<\/p>\n<p>If you encounter unexpected behavior, kindly inform us by<a href=\"https:\/\/forum.webflow.com\/t\/smooth-scroll-setting-will-soon-respect-user-preference\/165674\"><strong>posting on the forum<\/strong><\/a>.<\/p>\n<p>\u00a0<\/p>\n<p><strong>Related articles:\u00a0<\/strong><\/p>\n<p>Enhance site accessibility<\/p>\n","protected":false},"excerpt":{"rendered":"Learn how motion and animations in your design can affect your site visitor\u2019s experience, and determine how to check operating system and browser motion settings.","protected":false},"author":2,"featured_media":5330,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"om_disable_all_campaigns":false,"inline_featured_image":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"csco_display_header_overlay":false,"csco_singular_sidebar":"","csco_page_header_type":"","footnotes":""},"categories":[301],"tags":[],"class_list":{"0":"post-5213","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-interactions-animations","8":"cs-entry"},"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/5213","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/comments?post=5213"}],"version-history":[{"count":0,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/5213\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media\/5192"}],"wp:attachment":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media?parent=5213"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/categories?post=5213"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/tags?post=5213"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}