What is Reduced Motion?
Many people suffer from vestibular motion disorders where, among other triggers, animated effects on a screen can cause intense discomfort, dizziness, headaches, or worse. Plenty of people (myself included) also can't stand distracting animations happenning in our peripheral vision.
Most major operating systems now feature some accessibility setting to reduce the number of animation effects that appear. For example, on macOS and iOS, this replaces the sliding animation when switching between desktops/apps with a fullscreen fade effect instead.
Most major web browsers also support this accessbility toggle; though they generally don't expose it as a browser-level setting, typically just inherititing the OS-level behavior. This is exposed to web pages via the prefers-reduced-motion CSS media query.
How does this affect cohost?
Because cohost posts can only use inline styles, they cannot define their own animation keyframes, so users depend on (ab)using the cohost-provided spin animation1 to create animated "css crime" posts. However, the spin animation is disabled for users who prefer reduced motion2 because of Reasons.3 This can offer a confusing experience for users with reduced motion enabled, as the posts will just not animate.
I think it'd be neat if cohost could identify and label such posts (since they're already doing all sorts of CSS parsing for the sanitizer), perhaps even providing some sort of override button. I completely understand that Other Things are much higher on the priority list though.
Do I have it enabled right now?
How do I toggle it?
(adapted from MDN)
- GTK/GNOME: Settings > Accessibility > Seeing > Reduced animation.
- Older versions of GNOME: GNOME Tweaks > General tab (or Appearance, depending on version) > Animations.
- Alternatively,
gtk-enable-animations = true|falsein the[Settings]block of the GTK 3 configuration file.
- Plasma/KDE: System Settings > Workspace Behavior -> General Behavior > Animation Speed
- Windows 10: Settings > Ease of Access > Display > Show animations in Windows.
- Windows 11: Settings > Accessibility > Visual Effects > Animation Effects.
- macOS: System Preferences > Accessibility > Display > Reduce motion.
- iOS: Settings > Accessibility > Motion.
- Android 9+: Settings > Accessibility > Remove animations.
- Firefox: In about:config, add a number preference called ui.prefersReducedMotion and set its value to either 0 for full animation or to 1 to indicate a preference for reduced motion.
Some browsers pick up the change immediately, while others require a page reload for the change to take effect. If you've toggled the setting but animations aren't behaving as you'd expect, try reloading the affected page.
-
Used for the rotating icon when shift-clicking the repost button.
-
There are a few other animations that are always available, but they're much less versatile for use in css crimes. Thanks to @iliana for pointing this out.
-
As pointed out by @iliana:
this was not done on purpose by cohost; tailwindcss is utterly bizarre and if you write
motion-safe:animate-spinit will stick the@keyframesfor spin inside the reduce motion media query. it is also incredibly likely that at any point tailwind might think this is a bug and it gets pulled into a cohost update without staff realizing it.
