Adding more values to reduced motion

packages/framer-motion/src/animation/interfaces/visual-element-target.ts

@@ -1,6 +1,6 @@
 import { AnimationPlaybackControls, getValueTransition } from "motion-dom"
 import { frame } from "../../frameloop"
-import { transformProps } from "../../render/html/utils/transform"
+import { positionalKeys } from "../../render/html/utils/keys-position"
 import type { AnimationTypeState } from "../../render/utils/animation-state"
 import { setTarget } from "../../render/utils/setters"
 import type { VisualElement } from "../../render/VisualElement"
@@ -96,7 +96,7 @@ export function animateTarget(
                 key,
                 value,
                 valueTarget,
-                visualElement.shouldReduceMotion && transformProps.has(key)
+                visualElement.shouldReduceMotion && positionalKeys.has(key)
                     ? { type: false }
                     : valueTransition,
                 visualElement,

packages/framer-motion/src/animation/optimized-appear/store-id.ts

@@ -1,4 +1,4 @@
-import { transformProps } from "../../render/html/utils/transform"
+import { transformProps } from "../../render/html/utils/keys-transform"
 
 export const appearStoreId = (elementId: string, valueName: string) => {
     const key = transformProps.has(valueName) ? "transform" : valueName

packages/framer-motion/src/animation/utils/default-transitions.ts

@@ -1,5 +1,5 @@
 import { ValueAnimationOptions } from "motion-dom"
-import { transformProps } from "../../render/html/utils/transform"
+import { transformProps } from "../../render/html/utils/keys-transform"
 
 const underDampedSpring: Partial<ValueAnimationOptions> = {
     type: "spring",

packages/framer-motion/src/motion/utils/is-forced-motion-value.ts

@@ -1,6 +1,6 @@
-import { scaleCorrectors } from "../../projection/styles/scale-correction"
 import { MotionProps } from "../.."
-import { transformProps } from "../../render/html/utils/transform"
+import { scaleCorrectors } from "../../projection/styles/scale-correction"
+import { transformProps } from "../../render/html/utils/keys-transform"
 
 export function isForcedMotionValue(
     key: string,

packages/framer-motion/src/render/VisualElement.ts

@@ -1,21 +1,33 @@
-import { frame, cancelFrame } from "../frameloop"
 import {
     MotionConfigContext,
     ReducedMotionConfig,
 } from "../context/MotionConfigContext"
+import type { PresenceContextProps } from "../context/PresenceContext"
+import { cancelFrame, frame } from "../frameloop"
+import { time } from "../frameloop/sync-time"
+import { featureDefinitions } from "../motion/features/definitions"
+import { Feature } from "../motion/features/Feature"
 import { FeatureDefinitions } from "../motion/features/types"
 import { MotionProps, MotionStyle } from "../motion/types"
+import { createBox } from "../projection/geometry/models"
 import type { Box } from "../projection/geometry/types"
 import { IProjectionNode } from "../projection/node/types"
+import { isNumericalString } from "../utils/is-numerical-string"
+import { isZeroValueString } from "../utils/is-zero-value-string"
 import { initPrefersReducedMotion } from "../utils/reduced-motion"
 import {
     hasReducedMotionListener,
     prefersReducedMotion,
 } from "../utils/reduced-motion/state"
 import { SubscriptionManager } from "../utils/subscription-manager"
+import { warnOnce } from "../utils/warn-once"
 import { motionValue, MotionValue } from "../value"
+import { complex } from "../value/types/complex"
 import { isMotionValue } from "../value/utils/is-motion-value"
-import { transformProps } from "./html/utils/transform"
+import { getAnimatableNone } from "./dom/value-types/animatable-none"
+import { findValueType } from "./dom/value-types/find"
+import { transformProps } from "./html/utils/keys-transform"
+import { visualElementStore } from "./store"
 import {
     ResolvedValues,
     VisualElementEventCallbacks,
@@ -26,21 +38,9 @@ import {
     isControllingVariants as checkIsControllingVariants,
     isVariantNode as checkIsVariantNode,
 } from "./utils/is-controlling-variants"
+import { KeyframeResolver } from "./utils/KeyframesResolver"
 import { updateMotionValuesFromProps } from "./utils/motion-values"
 import { resolveVariantFromProps } from "./utils/resolve-variants"
-import { warnOnce } from "../utils/warn-once"
-import { featureDefinitions } from "../motion/features/definitions"
-import { Feature } from "../motion/features/Feature"
-import type { PresenceContextProps } from "../context/PresenceContext"
-import { visualElementStore } from "./store"
-import { KeyframeResolver } from "./utils/KeyframesResolver"
-import { isNumericalString } from "../utils/is-numerical-string"
-import { isZeroValueString } from "../utils/is-zero-value-string"
-import { findValueType } from "./dom/value-types/find"
-import { complex } from "../value/types/complex"
-import { getAnimatableNone } from "./dom/value-types/animatable-none"
-import { createBox } from "../projection/geometry/models"
-import { time } from "../frameloop/sync-time"
 
 const propEventHandlers = [
     "AnimationStart",

packages/framer-motion/src/render/dom/DOMKeyframesResolver.ts

@@ -1,20 +1,17 @@
 import { isNone } from "../../animation/utils/is-none"
-import { getVariableValue } from "./utils/css-variables-conversion"
-import { isCSSVariableToken } from "./utils/is-css-variable"
-import {
-    isNumOrPxType,
-    positionalKeys,
-    positionalValues,
-} from "./utils/unit-conversion"
-import { findDimensionValueType } from "./value-types/dimensions"
+import { MotionValue } from "../../value"
+import { positionalKeys } from "../html/utils/keys-position"
+import { makeNoneKeyframesAnimatable } from "../html/utils/make-none-animatable"
 import {
     KeyframeResolver,
     OnKeyframesResolved,
     UnresolvedKeyframes,
 } from "../utils/KeyframesResolver"
-import { makeNoneKeyframesAnimatable } from "../html/utils/make-none-animatable"
 import { VisualElement } from "../VisualElement"
-import { MotionValue } from "../../value"
+import { getVariableValue } from "./utils/css-variables-conversion"
+import { isCSSVariableToken } from "./utils/is-css-variable"
+import { isNumOrPxType, positionalValues } from "./utils/unit-conversion"
+import { findDimensionValueType } from "./value-types/dimensions"
 
 export class DOMKeyframesResolver<
     T extends string | number

packages/framer-motion/src/render/dom/utils/unit-conversion.ts

@@ -1,23 +1,10 @@
-import { MotionValue } from "../../../value"
-import { transformPropOrder } from "../../html/utils/transform"
 import type { Box } from "../../../projection/geometry/types"
-import type { VisualElement } from "../../VisualElement"
-import { ValueType } from "../../../value/types/types"
+import { MotionValue } from "../../../value"
 import { number } from "../../../value/types/numbers"
 import { px } from "../../../value/types/numbers/units"
-
-export const positionalKeys = new Set([
-    "width",
-    "height",
-    "top",
-    "left",
-    "right",
-    "bottom",
-    "x",
-    "y",
-    "translateX",
-    "translateY",
-])
+import { ValueType } from "../../../value/types/types"
+import { transformPropOrder } from "../../html/utils/keys-transform"
+import type { VisualElement } from "../../VisualElement"
 
 export const isNumOrPxType = (v?: ValueType): v is ValueType =>
     v === number || v === px

packages/framer-motion/src/render/html/HTMLVisualElement.ts

@@ -1,18 +1,18 @@
-import { HTMLRenderState } from "./types"
-import { DOMVisualElementOptions } from "../dom/types"
-import { buildHTMLStyles } from "./utils/build-styles"
-import { isCSSVariableName } from "../dom/utils/is-css-variable"
-import { transformProps } from "./utils/transform"
-import { scrapeMotionValuesFromProps } from "./utils/scrape-motion-values"
-import { renderHTML } from "./utils/render"
-import { getDefaultValueType } from "../dom/value-types/defaults"
-import { measureViewportBox } from "../../projection/utils/measure"
+import { MotionConfigContext } from "../../context/MotionConfigContext"
 import { MotionProps } from "../../motion/types"
 import type { Box } from "../../projection/geometry/types"
+import { measureViewportBox } from "../../projection/utils/measure"
 import { DOMVisualElement } from "../dom/DOMVisualElement"
-import { MotionConfigContext } from "../../context/MotionConfigContext"
+import { DOMVisualElementOptions } from "../dom/types"
+import { isCSSVariableName } from "../dom/utils/is-css-variable"
+import { getDefaultValueType } from "../dom/value-types/defaults"
 import type { ResolvedValues } from "../types"
 import { VisualElement } from "../VisualElement"
+import { HTMLRenderState } from "./types"
+import { buildHTMLStyles } from "./utils/build-styles"
+import { transformProps } from "./utils/keys-transform"
+import { renderHTML } from "./utils/render"
+import { scrapeMotionValuesFromProps } from "./utils/scrape-motion-values"
 
 export function getComputedStyle(element: HTMLElement) {
     return window.getComputedStyle(element)

packages/framer-motion/src/render/html/utils/__tests__/build-transform.test.ts

@@ -1,6 +1,6 @@
 import "../../../../../jest.setup"
 import { buildTransform } from "../build-transform"
-import { transformProps } from "../transform"
+import { transformProps } from "../keys-transform"
 
 describe("transformProps.has", () => {
     it("Correctly identifies only transformPerspective as a transform prop", () => {

packages/framer-motion/src/render/html/utils/build-styles.ts

@@ -1,11 +1,11 @@
 import { MotionProps } from "../../../motion/types"
-import { HTMLRenderState } from "../types"
-import { ResolvedValues } from "../../types"
-import { buildTransform } from "./build-transform"
 import { isCSSVariableName } from "../../dom/utils/is-css-variable"
-import { transformProps } from "./transform"
 import { getValueAsType } from "../../dom/value-types/get-as-type"
 import { numberValueTypes } from "../../dom/value-types/number"
+import { ResolvedValues } from "../../types"
+import { HTMLRenderState } from "../types"
+import { buildTransform } from "./build-transform"
+import { transformProps } from "./keys-transform"
 
 export function buildHTMLStyles(
     state: HTMLRenderState,

packages/framer-motion/src/render/html/utils/build-transform.ts

@@ -1,9 +1,9 @@
-import { transformPropOrder } from "./transform"
 import { MotionProps } from "../../../motion/types"
 import { getValueAsType } from "../../dom/value-types/get-as-type"
 import { numberValueTypes } from "../../dom/value-types/number"
 import { ResolvedValues } from "../../types"
 import { HTMLRenderState } from "../types"
+import { transformPropOrder } from "./keys-transform"
 
 const translateAlias = {
     x: "translateX",

packages/framer-motion/src/render/html/utils/keys-position.ts

@@ -0,0 +1,11 @@
+import { transformPropOrder } from "./keys-transform"
+
+export const positionalKeys = new Set([
+    "width",
+    "height",
+    "top",
+    "left",
+    "right",
+    "bottom",
+    ...transformPropOrder,
+])

packages/framer-motion/src/render/svg/SVGVisualElement.ts

@@ -1,20 +1,20 @@
-import { scrapeMotionValuesFromProps } from "./utils/scrape-motion-values"
-import { SVGRenderState } from "./types"
+import { MotionProps, MotionStyle } from "../../motion/types"
+import { createBox } from "../../projection/geometry/models"
+import { IProjectionNode } from "../../projection/node/types"
+import { MotionValue } from "../../value"
 import { DOMVisualElement } from "../dom/DOMVisualElement"
 import { DOMVisualElementOptions } from "../dom/types"
-import { buildSVGAttrs } from "./utils/build-attrs"
 import { camelToDash } from "../dom/utils/camel-to-dash"
-import { camelCaseAttributes } from "./utils/camel-case-attrs"
-import { transformProps } from "../html/utils/transform"
-import { renderSVG } from "./utils/render"
 import { getDefaultValueType } from "../dom/value-types/defaults"
-import { MotionProps, MotionStyle } from "../../motion/types"
-import { MotionValue } from "../../value"
+import { transformProps } from "../html/utils/keys-transform"
 import { ResolvedValues } from "../types"
-import { createBox } from "../../projection/geometry/models"
-import { IProjectionNode } from "../../projection/node/types"
-import { isSVGTag } from "./utils/is-svg-tag"
 import { VisualElement } from "../VisualElement"
+import { SVGRenderState } from "./types"
+import { buildSVGAttrs } from "./utils/build-attrs"
+import { camelCaseAttributes } from "./utils/camel-case-attrs"
+import { isSVGTag } from "./utils/is-svg-tag"
+import { renderSVG } from "./utils/render"
+import { scrapeMotionValuesFromProps } from "./utils/scrape-motion-values"
 
 export class SVGVisualElement extends DOMVisualElement<
     SVGElement,

packages/framer-motion/src/render/svg/utils/scrape-motion-values.ts

@@ -1,8 +1,8 @@
 import { MotionProps } from "../../../motion/types"
 import { isMotionValue } from "../../../value/utils/is-motion-value"
 import type { VisualElement } from "../../VisualElement"
+import { transformPropOrder } from "../../html/utils/keys-transform"
 import { scrapeMotionValuesFromProps as scrapeHTMLMotionValuesFromProps } from "../../html/utils/scrape-motion-values"
-import { transformPropOrder } from "../../html/utils/transform"
 
 export function scrapeMotionValuesFromProps(
     props: MotionProps,

packages/framer-motion/src/value/use-will-change/get-will-change-name.ts

@@ -1,6 +1,6 @@
 import { acceleratedValues } from "../../animation/animators/utils/accelerated-values"
 import { camelToDash } from "../../render/dom/utils/camel-to-dash"
-import { transformProps } from "../../render/html/utils/transform"
+import { transformProps } from "../../render/html/utils/keys-transform"
 
 export function getWillChangeName(name: string): string | undefined {
     if (transformProps.has(name)) {