Reduced Motion: System level support

[ItsJonQ]

Animation and transitions should be disabled anything from @wp-g2 respecting reducedMotion configs (whether that's an app specific config, or a user machine config).

From a DX perspective, Animation/transition disabling/enabling should be invisible.

Therefore, this has to be supported at the core system level.

I have the foundations of this working:
https://github.com/ItsJonQ/g2/blob/master/packages/styles/src/create-system/createSystemElement.js#L20

For this to work, reduceMotion needs to automatically kick in for anything using...

@wp-g2/animations

• Entire library

@wp-g2/styles

• css
• styled
• View

@wp-g2/components

• AnimatedView
• View

[ItsJonQ]

Oh boy! Was able to do this with a new useReducedMotion hook from @wp-g2/styles.

https://github.com/ItsJonQ/g2/blob/master/packages/styles/src/hooks/useReducedMotion.js

It uses the createStore function from @wp-g2/context (zustand under the hood) to track + coordinated state in a dedicated stream.

This allows for Animated components to recognize app controlled useReducedMotion without requiring a wrapping Provider!

The implementation of this is tricky as Animated (motion from Framer Motion) animates style properties in their own render loop(s). For example, manually incrementing height from 0px to 100px. Therefore, a blanket transition: none !important will not work.

To achieve the a seamless system-supported setup, we have to intercept and adjust the transition property being passed to motion.div based on our (new) useReducedMotion state.

[ItsJonQ]

Closing this up! We have system-wide reduced motion support via the Style System. This configuration can also be controlled programatically (via JS) in addition to understanding and respecting the user's device preference.