diff --git a/packages/framer-motion/src/animation/interfaces/visual-element-target.ts b/packages/framer-motion/src/animation/interfaces/visual-element-target.ts index c63be4a7ef..c76d777187 100644 --- a/packages/framer-motion/src/animation/interfaces/visual-element-target.ts +++ b/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, diff --git a/packages/framer-motion/src/animation/optimized-appear/store-id.ts b/packages/framer-motion/src/animation/optimized-appear/store-id.ts index 26d1040d77..728b3eab4c 100644 --- a/packages/framer-motion/src/animation/optimized-appear/store-id.ts +++ b/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 diff --git a/packages/framer-motion/src/animation/utils/default-transitions.ts b/packages/framer-motion/src/animation/utils/default-transitions.ts index 1e03576763..30643167a7 100644 --- a/packages/framer-motion/src/animation/utils/default-transitions.ts +++ b/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 = { type: "spring", diff --git a/packages/framer-motion/src/motion/utils/is-forced-motion-value.ts b/packages/framer-motion/src/motion/utils/is-forced-motion-value.ts index 67e3e39e8e..805cd3dc92 100644 --- a/packages/framer-motion/src/motion/utils/is-forced-motion-value.ts +++ b/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, diff --git a/packages/framer-motion/src/render/VisualElement.ts b/packages/framer-motion/src/render/VisualElement.ts index da30839aa0..a5880deac2 100644 --- a/packages/framer-motion/src/render/VisualElement.ts +++ b/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", diff --git a/packages/framer-motion/src/render/dom/DOMKeyframesResolver.ts b/packages/framer-motion/src/render/dom/DOMKeyframesResolver.ts index e749de7bd1..0372444ec8 100644 --- a/packages/framer-motion/src/render/dom/DOMKeyframesResolver.ts +++ b/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 diff --git a/packages/framer-motion/src/render/dom/utils/unit-conversion.ts b/packages/framer-motion/src/render/dom/utils/unit-conversion.ts index f778105206..d26db338fd 100644 --- a/packages/framer-motion/src/render/dom/utils/unit-conversion.ts +++ b/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 diff --git a/packages/framer-motion/src/render/html/HTMLVisualElement.ts b/packages/framer-motion/src/render/html/HTMLVisualElement.ts index ebe2e7fcb6..53691e238a 100644 --- a/packages/framer-motion/src/render/html/HTMLVisualElement.ts +++ b/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) diff --git a/packages/framer-motion/src/render/html/utils/__tests__/build-transform.test.ts b/packages/framer-motion/src/render/html/utils/__tests__/build-transform.test.ts index 4361c8849e..c2e5a5bfd9 100644 --- a/packages/framer-motion/src/render/html/utils/__tests__/build-transform.test.ts +++ b/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", () => { diff --git a/packages/framer-motion/src/render/html/utils/build-styles.ts b/packages/framer-motion/src/render/html/utils/build-styles.ts index 7d10dd8291..e2b621dc97 100644 --- a/packages/framer-motion/src/render/html/utils/build-styles.ts +++ b/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, diff --git a/packages/framer-motion/src/render/html/utils/build-transform.ts b/packages/framer-motion/src/render/html/utils/build-transform.ts index 68fa0899cc..5709bec265 100644 --- a/packages/framer-motion/src/render/html/utils/build-transform.ts +++ b/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", diff --git a/packages/framer-motion/src/render/html/utils/keys-position.ts b/packages/framer-motion/src/render/html/utils/keys-position.ts new file mode 100644 index 0000000000..5c23934078 --- /dev/null +++ b/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, +]) diff --git a/packages/framer-motion/src/render/html/utils/transform.ts b/packages/framer-motion/src/render/html/utils/keys-transform.ts similarity index 100% rename from packages/framer-motion/src/render/html/utils/transform.ts rename to packages/framer-motion/src/render/html/utils/keys-transform.ts diff --git a/packages/framer-motion/src/render/svg/SVGVisualElement.ts b/packages/framer-motion/src/render/svg/SVGVisualElement.ts index 93681ebec8..20e1bb4f03 100644 --- a/packages/framer-motion/src/render/svg/SVGVisualElement.ts +++ b/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, diff --git a/packages/framer-motion/src/render/svg/utils/scrape-motion-values.ts b/packages/framer-motion/src/render/svg/utils/scrape-motion-values.ts index fc230fd5e6..714d4db2c1 100644 --- a/packages/framer-motion/src/render/svg/utils/scrape-motion-values.ts +++ b/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, diff --git a/packages/framer-motion/src/value/use-will-change/get-will-change-name.ts b/packages/framer-motion/src/value/use-will-change/get-will-change-name.ts index 34d71fed5f..ffcbef3f0d 100644 --- a/packages/framer-motion/src/value/use-will-change/get-will-change-name.ts +++ b/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)) {