fix: make reducedMotion reactive to user preferences

Author: rick-hup

packages/motion/src/components/__tests__/motion-config.test.tsx

@@ -0,0 +1,24 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { motionValue } from 'framer-motion/dom'
+import { defineComponent, nextTick } from 'vue'
+import MotionConfig from '@/components/motion-config/MotionConfig.vue'
+import { Motion } from '@/components/motion'
+
+describe('reducedMotion', () => {
+  it('reducedMotion always', async () => {
+    const scale = motionValue(1)
+    const wrapper = mount(defineComponent({
+      setup() {
+        return () => (
+          <MotionConfig reducedMotion="always">
+            <Motion animate={{ scale: 0.5 }} style={{ scale }} />
+          </MotionConfig>
+        )
+      },
+    }))
+    await nextTick()
+    await new Promise(resolve => setTimeout(resolve, 20))
+    expect(scale.get()).toBe(0.5)
+  })
+})

packages/motion/src/components/motion/use-motion-state.ts

@@ -33,6 +33,7 @@ export function useMotionState(props: MotionProps) {
    */
   if (
     process.env.NODE_ENV !== 'production'
+    // @ts-expect-error
     && props.features?.length
     && lazyMotionContext.strict
   ) {

packages/motion/src/features/animation/animation.ts

@@ -12,6 +12,7 @@ import { isDef } from '@vueuse/core'
 import type { VisualElement } from 'framer-motion'
 import { animate, noop } from 'framer-motion/dom'
 import { createVisualElement } from '@/state/create-visual-element'
+import { prefersReducedMotion } from 'framer-motion/dist/es/utils/reduced-motion/state.mjs'
 
 const STATE_TYPES = ['initial', 'animate', 'whileInView', 'whileHover', 'whilePress', 'whileDrag', 'whileFocus', 'exit'] as const
 export type StateType = typeof STATE_TYPES[number]
@@ -42,6 +43,7 @@ export class AnimationFeature extends Feature {
       },
       reducedMotionConfig: this.state.options.motionConfig.reducedMotion,
     })
+
     this.state.animateUpdates = this.animateUpdates
     if (this.state.isMounted())
       this.state.startAnimation()
@@ -62,6 +64,10 @@ export class AnimationFeature extends Feature {
     isFallback,
     isExit,
   } = {}) => {
+    // check if the user has reduced motion
+    const { reducedMotion } = this.state.options.motionConfig
+    this.state.visualElement.shouldReduceMotion = reducedMotion === 'always' || (reducedMotion === 'user' && !!prefersReducedMotion.current)
+
     const prevTarget = this.state.target
     this.state.target = { ...this.state.baseTarget }
     let animationOptions: $Transition = {}

packages/motion/src/framer-motion.d.ts

@@ -67,3 +67,8 @@ declare module 'framer-motion/dist/es/render/utils/setters.mjs' {
 
   export const setTarget: (visualElement: VisualElement, definition: any) => void
 }
+
+declare module 'framer-motion/dist/es/utils/reduced-motion/state.mjs' {
+  export const prefersReducedMotion: { current: boolean }
+  export const hasReducedMotionListener: { current: boolean }
+}

packages/motion/vite.config.ts

@@ -32,6 +32,8 @@ export default defineConfig({
       'framer-motion/dist/es/render/svg/SVGVisualElement.mjs': path.resolve(__dirname, 'node_modules/framer-motion/dist/es/render/svg/SVGVisualElement.mjs'),
       'framer-motion/dist/es/animation/interfaces/motion-value.mjs': path.resolve(__dirname, 'node_modules/framer-motion/dist/es/animation/interfaces/motion-value.mjs'),
       'framer-motion/dist/es/render/utils/setters.mjs': path.resolve(__dirname, 'node_modules/framer-motion/dist/es/render/utils/setters.mjs'),
+      'framer-motion/dist/es/utils/reduced-motion/state.mjs': path.resolve(__dirname, 'node_modules/framer-motion/dist/es/utils/reduced-motion/state.mjs'),
+
     },
   },
   build: {

packages/motion/vitest.config.ts

@@ -25,6 +25,7 @@ export default defineConfig({
       'framer-motion/dist/es/render/html/HTMLVisualElement.mjs': path.resolve(__dirname, 'node_modules/framer-motion/dist/es/render/html/HTMLVisualElement.mjs'),
       'framer-motion/dist/es/render/svg/SVGVisualElement.mjs': path.resolve(__dirname, 'node_modules/framer-motion/dist/es/render/svg/SVGVisualElement.mjs'),
       'framer-motion/dist/es/animation/interfaces/motion-value.mjs': path.resolve(__dirname, 'node_modules/framer-motion/dist/es/animation/interfaces/motion-value.mjs'),
+      'framer-motion/dist/es/utils/reduced-motion/state.mjs': path.resolve(__dirname, 'node_modules/framer-motion/dist/es/utils/reduced-motion/state.mjs'),
     },
   },
 })

playground/nuxt/pages/test.vue

@@ -1,82 +1,22 @@
 <script setup lang="tsx">
 /** @jsxImportSource vue */
-import { AnimateNumber } from 'motion-plus-vue'
-import { motion } from 'motion-v'
 import { ref } from 'vue'
 
-const isCompact = ref(false)
-const isCurrency = ref(false)
-
-function Switch({ isOn, toggle }: { isOn: boolean, toggle: () => void }) {
-  return (
-    <motion.button
-      class="switch-container"
-      style={{
-        justifyContent: `flex-${isOn ? 'end' : 'start'}`,
-      }}
-      initial={false}
-      animate={{
-        backgroundColor: isOn
-          ? 'var(--hue-6-transparent)'
-          : '#586d8c33',
-      }}
-      onClick={toggle}
-      focus={{
-        outline: '2px solid #4ff0b7',
-      }}
-    >
-      <motion.div
-        class="switch-handle"
-        layout
-        data-is-on={isOn}
-        transition={{
-          type: 'spring',
-          visualDuration: 0.2,
-          bounce: 0.2,
-        }}
-      />
-    </motion.button>
-  )
-}
+const isShow = ref(false)
 </script>
 
 <template>
-  <div class="container">
-    <AnimateNumber
-      :format="{
-        notation: isCompact ? 'compact' : undefined,
-        compactDisplay: isCompact ? 'short' : undefined,
-        roundingMode: isCompact ? 'trunc' : undefined,
-        style: isCurrency ? 'currency' : undefined,
-        currency: isCurrency ? 'USD' : undefined,
-      }"
-      locales="en-US"
-      class="number"
-      :transition="{
-        visualDuration: 0.6,
-        type: 'spring',
-        bounce: 0.25,
-        opacity: { duration: 0.3, ease: 'linear' },
+  <button @click="isShow = !isShow">
+    show
+  </button>
+  <MotionConfig reduced-motion="user">
+    <Motion
+      class="w-[100px] h-[100px] bg-red-500"
+      :animate="{
+        scale: isShow ? 1 : 0.5,
       }"
-      :value="123.49"
     />
-    <div class="controls">
-      <div>
-        Currency:
-        <Switch
-          :is-on="isCurrency"
-          :toggle="() => isCurrency = !isCurrency"
-        />
-      </div>
-      <div>
-        Compact:
-        <Switch
-          :is-on="isCompact"
-          :toggle="() => isCompact = !isCompact"
-        />
-      </div>
-    </div>
-  </div>
+  </MotionConfig>
 </template>
 
 <style>

playground/vite/src/views/dynamic-variant.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { MotionConfig, motion } from '@/components'
+
+const show = ref(true)
+const toggle = () => (show.value = !show.value)
+const variants = {
+  initial: { y: 20, opacity: 0 },
+  visible: { y: 0, opacity: 1 },
+  hidden: { y: 0, opacity: 0.25 },
+}
+</script>
+
+<template>
+  <MotionConfig reduced-motion="always">
+    <div style="padding: 40px">
+      <button
+        data-testid="toggle-btn"
+        @click="toggle"
+      >
+        Toggle
+      </button>
+      <motion.button
+        data-testid="motion-btn"
+        initial="initial"
+        :variants="variants"
+        :while-in-view="show ? 'visible' : 'hidden'"
+        style="width: 120px; height: 40px; margin-top: 20px"
+      >
+        CLICK ME
+      </motion.button>
+    </div>
+  </MotionConfig>
+</template>