This is purposefully ambitious and aspirational. Some concepts that are worth understanding in addition to the principles outlined here include:
Here’s a CodePen I’ll periodically update with the compiled CSS to use as a testing playground.
mxmason
/ webflow-disable-scroll-prefers-reduced-motion.js
Last active
June 2, 2023 10:49
These snippets completely disable the smooth-scroll animation that is present on all Webflow sites. Animated scrolling can disorient or surprise users, or even cause motion sickness!
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Disable smooth scrolling for users who have set `prefers-reduced-motion` in their operating system | |
| // 1. Place this snippet before the end of the <body> tag; | |
| // NOT in the <head> tag! | |
| // 2.Make sure it's inside $(function() {})! | |
| $(function() { | |
| const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)'); | |
| if (mediaQuery.matches) $(document).off('click.wf-scroll'); | |
| }) |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* | |
| This is not meant to be a final CSSWG proposal, | |
| but reflects my immediate thoughts after reading | |
| [David Baron's](https://github.com/dbaron/container-queries-implementability) promising draft. | |
| This gist was created to demonstrate my idea for removing selectors from his query syntax. | |
| More of my thoughts & notes are online at css.oddbird.net/rwd/ | |
| */ | |
| main, |
OlderNewer