[pull] main from motiondivision:main

CHANGELOG.md

@@ -4,6 +4,12 @@ Motion adheres to [Semantic Versioning](http://semver.org/).
 
 Undocumented APIs should be considered internal and may change without warning.
 
+## [12.26.2] 2026-01-13
+
+### Fixed
+
+-   Internal refactor of projection system into `motion-dom`.
+
 ## [12.26.1] 2026-01-12
 
 ### Fixed

dev/html/package.json

@@ -1,7 +1,7 @@
 {
     "name": "html-env",
     "private": true,
-    "version": "12.26.1",
+    "version": "12.26.2",
     "type": "module",
     "scripts": {
         "dev": "vite",
@@ -10,9 +10,9 @@
         "preview": "vite preview"
     },
     "dependencies": {
-        "framer-motion": "^12.26.1",
-        "motion": "^12.26.1",
-        "motion-dom": "^12.24.11",
+        "framer-motion": "^12.26.2",
+        "motion": "^12.26.2",
+        "motion-dom": "^12.26.2",
         "react": "^18.3.1",
         "react-dom": "^18.3.1"
     },

dev/next/package.json

@@ -1,7 +1,7 @@
 {
     "name": "next-env",
     "private": true,
-    "version": "12.26.1",
+    "version": "12.26.2",
     "type": "module",
     "scripts": {
         "dev": "next dev",
@@ -10,7 +10,7 @@
         "build": "next build"
     },
     "dependencies": {
-        "motion": "^12.26.1",
+        "motion": "^12.26.2",
         "next": "15.4.10",
         "react": "19.0.0",
         "react-dom": "19.0.0"

dev/react-19/package.json

@@ -1,7 +1,7 @@
 {
     "name": "react-19-env",
     "private": true,
-    "version": "12.26.1",
+    "version": "12.26.2",
     "type": "module",
     "scripts": {
         "dev": "vite",
@@ -11,7 +11,7 @@
         "preview": "vite preview"
     },
     "dependencies": {
-        "motion": "^12.26.1",
+        "motion": "^12.26.2",
         "react": "^19.0.0",
         "react-dom": "^19.0.0"
     },

dev/react/package.json

@@ -1,7 +1,7 @@
 {
     "name": "react-env",
     "private": true,
-    "version": "12.26.1",
+    "version": "12.26.2",
     "type": "module",
     "scripts": {
         "dev": "yarn vite",
@@ -11,7 +11,7 @@
         "preview": "yarn vite preview"
     },
     "dependencies": {
-        "framer-motion": "^12.26.1",
+        "framer-motion": "^12.26.2",
         "react": "^18.3.1",
         "react-dom": "^18.3.1"
     },

lerna.json

@@ -1,5 +1,5 @@
 {
-  "version": "12.26.1",
+  "version": "12.26.2",
   "packages": [
     "packages/*",
     "dev/*"

packages/framer-motion/package.json

@@ -1,6 +1,6 @@
 {
     "name": "framer-motion",
-    "version": "12.26.1",
+    "version": "12.26.2",
     "description": "A simple and powerful JavaScript animation library",
     "main": "dist/cjs/index.js",
     "module": "dist/es/index.mjs",
@@ -88,7 +88,7 @@
         "measure": "rollup -c ./rollup.size.config.mjs"
     },
     "dependencies": {
-        "motion-dom": "^12.24.11",
+        "motion-dom": "^12.26.2",
         "motion-utils": "^12.24.10",
         "tslib": "^2.4.0"
     },

packages/framer-motion/src/animation/animate/subject.ts

@@ -1,27 +1,27 @@
 import {
+    animateTarget,
     AnimationPlaybackControlsWithThen,
     AnimationScope,
     AnyResolvedKeyframe,
     DOMKeyframesDefinition,
     AnimationOptions as DynamicAnimationOptions,
     ElementOrSelector,
+    isMotionValue,
     MotionValue,
     TargetAndTransition,
     UnresolvedValueKeyframe,
     ValueAnimationTransition,
-    isMotionValue,
+    visualElementStore,
 } from "motion-dom"
 import { invariant } from "motion-utils"
-import { visualElementStore } from "../../render/store"
-import { animateTarget } from "../interfaces/visual-element-target"
 import { ObjectTarget } from "../sequence/types"
 import {
     createDOMVisualElement,
     createObjectVisualElement,
 } from "../utils/create-visual-element"
 import { isDOMKeyframes } from "../utils/is-dom-keyframes"
 import { resolveSubjects } from "./resolve-subjects"
-import { animateSingleValue } from "./single-value"
+import { animateSingleValue } from "motion-dom"
 
 export type AnimationSubject = Element | MotionValue<any> | any
 

packages/framer-motion/src/animation/hooks/animation-controls.ts

@@ -1,8 +1,11 @@
-import type { AnimationDefinition, LegacyAnimationControls } from "motion-dom"
+import {
+    animateVisualElement,
+    setTarget,
+    type AnimationDefinition,
+    type LegacyAnimationControls,
+    type VisualElement,
+} from "motion-dom"
 import { invariant } from "motion-utils"
-import { setTarget } from "../../render/utils/setters"
-import type { VisualElement } from "../../render/VisualElement"
-import { animateVisualElement } from "../interfaces/visual-element"
 
 function stopAnimation(visualElement: VisualElement) {
     visualElement.values.forEach((value) => value.stop())

packages/framer-motion/src/animation/hooks/use-animated-state.ts

@@ -1,13 +1,15 @@
 "use client"
 
-import { TargetAndTransition } from "motion-dom"
+import {
+    animateVisualElement,
+    createBox,
+    ResolvedValues,
+    TargetAndTransition,
+    VisualElement,
+} from "motion-dom"
 import { useLayoutEffect, useState } from "react"
 import { makeUseVisualState } from "../../motion/utils/use-visual-state"
-import { createBox } from "../../projection/geometry/models"
-import { ResolvedValues } from "../../render/types"
-import { VisualElement } from "../../render/VisualElement"
 import { useConstant } from "../../utils/use-constant"
-import { animateVisualElement } from "../interfaces/visual-element"
 
 interface AnimatedStateOptions {
     initialState: ResolvedValues

packages/framer-motion/src/animation/optimized-appear/start.ts

@@ -1,18 +1,17 @@
 import {
     AnyResolvedKeyframe,
     Batcher,
+    getOptimisedAppearId,
     MotionValue,
+    optimizedAppearDataId,
     startWaapiAnimation,
     ValueAnimationTransition,
+    type WithAppearProps,
 } from "motion-dom"
 import { noop } from "motion-utils"
-import { optimizedAppearDataId } from "./data-id"
-import { getOptimisedAppearId } from "./get-appear-id"
 import { handoffOptimizedAppearAnimation } from "./handoff"
 import { appearAnimationStore, appearComplete, AppearStoreEntry } from "./store"
 import { appearStoreId } from "./store-id"
-import "./types"
-import type { WithAppearProps } from "./types"
 
 /**
  * A single time to use across all animations to manually set startTime

packages/framer-motion/src/animation/utils/create-visual-element.ts

@@ -1,8 +1,11 @@
-import { isSVGElement, isSVGSVGElement } from "motion-dom"
-import { HTMLVisualElement } from "../../render/html/HTMLVisualElement"
-import { ObjectVisualElement } from "../../render/object/ObjectVisualElement"
-import { visualElementStore } from "../../render/store"
-import { SVGVisualElement } from "../../render/svg/SVGVisualElement"
+import {
+    HTMLVisualElement,
+    isSVGElement,
+    isSVGSVGElement,
+    ObjectVisualElement,
+    SVGVisualElement,
+    visualElementStore,
+} from "motion-dom"
 
 export function createDOMVisualElement(element: HTMLElement | SVGElement) {
     const options = {

packages/framer-motion/src/context/LayoutGroupContext.ts

@@ -1,7 +1,7 @@
 "use client"
 
 import { createContext } from "react"
-import { NodeGroup } from "../projection/node/group"
+import type { NodeGroup } from "motion-dom"
 
 export interface LayoutGroupContextProps {
     id?: string

packages/framer-motion/src/context/MotionContext/index.ts

@@ -1,7 +1,7 @@
 "use client"
 
+import type { VisualElement } from "motion-dom"
 import { createContext } from "react"
-import type { VisualElement } from "../../render/VisualElement"
 
 export interface MotionContextProps<Instance = unknown> {
     visualElement?: VisualElement<Instance>

packages/framer-motion/src/context/MotionContext/utils.ts

@@ -1,7 +1,6 @@
+import { isControllingVariants, isVariantLabel } from "motion-dom"
 import type { MotionContextProps } from "."
 import { MotionProps } from "../../motion/types"
-import { isControllingVariants } from "../../render/utils/is-controlling-variants"
-import { isVariantLabel } from "../../render/utils/is-variant-label"
 
 export function getCurrentTreeVariants(
     props: MotionProps,

packages/framer-motion/src/context/PresenceContext.ts

@@ -1,19 +1,9 @@
 "use client"
 
 import { createContext } from "react"
-import { VariantLabels } from "../motion/types"
+import type { PresenceContextProps } from "motion-dom"
 
-/**
- * @public
- */
-export interface PresenceContextProps {
-    id: string
-    isPresent: boolean
-    register: (id: string | number) => () => void
-    onExitComplete?: (id: string | number) => void
-    initial?: false | VariantLabels
-    custom?: any
-}
+export type { PresenceContextProps }
 
 /**
  * @public

packages/framer-motion/src/context/SwitchLayoutGroupContext.ts

@@ -1,8 +1,7 @@
 "use client"
 
-import type { Transition } from "motion-dom"
+import type { Transition, IProjectionNode } from "motion-dom"
 import { createContext } from "react"
-import { IProjectionNode } from "../projection/node/types"
 
 export interface SwitchLayoutGroup {
     register?: (member: IProjectionNode) => void

packages/framer-motion/src/dom.ts

@@ -16,5 +16,5 @@ export * from "./animation/sequence/types"
 /**
  * Utils
  */
-export { delayInSeconds as delay, DelayedFunction } from "./utils/delay"
+export { delayInSeconds as delay, type DelayedFunction } from "motion-dom"
 export * from "./utils/distance"

packages/framer-motion/src/events/add-pointer-event.ts

@@ -1,4 +1,4 @@
-import { addDomEvent } from "./add-dom-event"
+import { addDomEvent } from "motion-dom"
 import { addPointerInfo, EventListenerWithPointInfo } from "./event-info"
 
 export function addPointerEvent(

packages/framer-motion/src/events/use-dom-event.ts

@@ -1,7 +1,7 @@
 "use client"
 
 import { RefObject, useEffect } from "react"
-import { addDomEvent } from "./add-dom-event"
+import { addDomEvent } from "motion-dom"
 
 /**
  * Attaches an event listener directly to the provided DOM element.

packages/framer-motion/src/gestures/drag/VisualElementDragControls.ts

@@ -1,32 +1,29 @@
 import {
-    isElementKeyboardAccessible,
-    PanInfo,
-    ResolvedConstraints,
-    Transition,
+    addValueToWillChange,
+    animateMotionValue,
+    calcLength,
+    convertBoundingBoxToBox,
+    convertBoxToBoundingBox,
+    createBox,
+    eachAxis,
     frame,
+    isElementKeyboardAccessible,
+    measurePageBox,
     mixNumber,
+    PanInfo,
     percent,
+    ResolvedConstraints,
     setDragLock,
+    Transition,
+    type VisualElement,
 } from "motion-dom"
 import { Axis, Point, invariant } from "motion-utils"
-import { animateMotionValue } from "../../animation/interfaces/motion-value"
-import { addDomEvent } from "../../events/add-dom-event"
+import { addDomEvent, type LayoutUpdateData } from "motion-dom"
 import { addPointerEvent } from "../../events/add-pointer-event"
 import { extractEventInfo } from "../../events/event-info"
 import { MotionProps } from "../../motion/types"
-import {
-    convertBoundingBoxToBox,
-    convertBoxToBoundingBox,
-} from "../../projection/geometry/conversion"
-import { calcLength } from "../../projection/geometry/delta-calc"
-import { createBox } from "../../projection/geometry/models"
-import type { LayoutUpdateData } from "../../projection/node/types"
-import { eachAxis } from "../../projection/utils/each-axis"
-import { measurePageBox } from "../../projection/utils/measure"
-import type { VisualElement } from "../../render/VisualElement"
 import { getContextWindow } from "../../utils/get-context-window"
 import { isRefObject } from "../../utils/is-ref-object"
-import { addValueToWillChange } from "../../value/use-will-change/add-will-change"
 import { PanSession } from "../pan/PanSession"
 import {
     applyConstraints,

packages/framer-motion/src/gestures/drag/index.ts

@@ -1,5 +1,4 @@
-import { Feature } from "../../motion/features/Feature"
-import type { VisualElement } from "../../render/VisualElement"
+import { Feature, type VisualElement } from "motion-dom"
 import { noop } from "motion-utils"
 import { VisualElementDragControls } from "./VisualElementDragControls"