Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?

Reduced scroll motion on Webflow sites

Webflow is changing some of its internal code to reduce the motion of its on-page scroll when a website visitor has indicated that they want a reduced-motion experience – and also giving you, the designer, the option to reduce motion in your projects by default. When this feature is enabled, all clicking on a link that targets an on-page element will instantly scroll to the target element.

Right now, this feature is behind a beta flag. Here's how you can test it, if you'd like!

Please do not share this gist with anyone!

Table of contents

🚩 Enabling the flag

To enable the beta flag:

  1. In the Designer, add the following custom data attribute to the body element: data-wf-reduce-scroll-motion. The value of this attribute can be anything.

⚙️ Enabling reduced scroll motion in Webflow

To reduce the motion of in-page scrolling after you click on a link, do the following:

  1. Turn on reduced motion in your operating system OR
  2. In the Designer, add the following custom attribute to the body element: data-wf-scroll-motion . Give it a value of none .

If a page's body element has data-wf-scroll-motion="none", scroll motion will be eliminated in all environments, regardless of whether or not the user has enabled reduced motion on their device.

😵 Enabling reduced motion in your operating system

Common settings, courtesy of Mozilla Developer Network.

  • In Windows 10: Settings > Ease of Access > Display > Show animations in Windows.
  • In Windows 7: Control Panel > Ease of Access > Make the computer easier to see > Turn off all unnecessary animations (when possible).
  • In macOS: System Preferences > Accessibility > Display > Reduce motion.
  • In iOS: Settings > General > Accessibility > Reduce Motion.
  • In Android 9+: Settings > Accessibility > Remove animations.

Advanced Windows settings and unexpected behavior

Windows 7 and Windows 10 also allow users to remove excessive motion with some performance options that are buried in advanced system settings, If a scroll animation is not executing when you expect it to, do the following:

  • Open Control Panel > System and Security > System > Advanced System Settings > Performance settings > Visual effects
  • Note the state of the first checkbox, "Animate controls and elements inside windows"

While the name of this checkbox doesn't mention the Web, unchecking it also reduces animations on the Web. Also, state of this checkbox takes precedent over other reduced-motion settings in Windows. If you're seeing unexpected behavior with animations in Winddows or on the Web, it's possible that this setting was changed at some point. It's best to only set your motion preferences in one location because these different settings tend to fall out of sync. If these settings are out of sync, make sure that "Animate controls and elements inside windows" is checked, and only toggle the ease-of-access center checkbox in the future.

You can read more about this on the TPGi blog.

🤔 Changing scroll behavior in Webflow

Webflow provides some options for changing the offset of the scroll animation's final position, as well as for changing the duration of the animation.

Changing the final position of the scroll animation

To offset the final position of the on-page scroll, do one or both of the following:

  1. Add a fixed header or nav to the page and ensure that the fixed element’s disable scroll offset when fixed setting is unchecked (it is unchecked by default). This should ensure that content is not lost behind the fixed element.
  2. Set the attribute data-scroll="mid" on the target element. These elements should be in the middle of the viewport once scroll is complete.

These scroll offsets should apply whether reduced motion is enabled or disabled.

Changing the duration of the scroll animation

To change the duration of the scroll animation, set the property data-scroll-time on the body element or the target element. Its value must be a number.

  • If data-scroll-time is set on the body, it will apply to all in-page scrolling on that page
  • If data-scroll-time is set on a target element, it will affect scroll time only to that element. It will also override the data-scroll-time set on the body

Scroll duration should behave as before if reduced motion is disabled, and instantaneous if it is enabled.

Reducing scroll motion with custon code

Add these JavScript asnippets to your project's settings to quickly reduce scroll motion across an entire project, or to a single page's settings to reduce scroll motion on that page.

Reducing scroll motion in all environments

Will apply regardless of the prefers-reduced-motion settings on the user's device.

$(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');
});

Disabling Webflow's smooth-scroll JavaScript

Note: This will prevent your project from honoring scroll-position offsets (as with fixed headers or navs, or elements with data-scroll="mid" attributes), but it slightly reduces the amount of JavaScript that is run on the published site. That might be what you want if you care about performance or want to animate scroll your own way!

In all environments, regardless of prefers-reduced-motion settings on the device:

$(function() {
  $(document).off('click.wf-scroll');
})

If the user has set prefers-reduced-motion on their device.

$(function() {	
  
  // Check that the user's browser can detect media queries
  if (typeof window.matchMedia === 'function') {
    const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)');	

    // Disable Webflow's code
    if (mediaQuery.matches) $(document).off('click.wf-scroll');	
  }
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment