React 19

Makefile

@@ -28,7 +28,7 @@ WORKTREE_NODE_MODULES := $(BASE_DIR)/node_modules/.yarn-state.yml
 WORKSPACE_NODE_MODULES := node_modules
 
 # Update node modules if package.json is newer than node_modules or yarn lockfile
-$(WORKTREE_NODE_MODULES) $(WORKSPACE_NODE_MODULES): $(BASE_DIR)/yarn.lock package.json packages/framer-motion/package.json packages/framer-motion-3d/package.json
+$(WORKTREE_NODE_MODULES) $(WORKSPACE_NODE_MODULES): $(BASE_DIR)/yarn.lock package.json packages/framer-motion/package.json
 	yarn install
 	touch $@
 
@@ -38,7 +38,7 @@ $(WORKTREE_NODE_MODULES) $(WORKSPACE_NODE_MODULES): $(BASE_DIR)/yarn.lock packag
 # Makefile
 bootstrap:: $(WORKTREE_NODE_MODULES)
 
-SOURCE_FILES := $(shell find packages/framer-motion/src packages/framer-motion-3d/src -type f)
+SOURCE_FILES := $(shell find packages/framer-motion/src -type f)
 
 ######
 
@@ -47,7 +47,6 @@ TEST_REPORT_PATH := $(if $(CIRCLE_TEST_REPORTS),$(CIRCLE_TEST_REPORTS),$(CURDIR)
 
 build: bootstrap
 	cd packages/framer-motion && yarn build
-	cd packages/framer-motion-3d && yarn build
 
 watch: bootstrap
 	cd packages/framer-motion && yarn watch

dev/html/package.json

@@ -1,7 +1,7 @@
 {
     "name": "html-env",
     "private": true,
-    "version": "11.11.12",
+    "version": "12.0.0-alpha.2",
     "type": "module",
     "scripts": {
         "dev": "vite",

dev/html/public/optimized-appear/portal.html

@@ -92,7 +92,7 @@
                 (animation) => {
                     // Hydrate root mid-way through animation
                     setTimeout(() => {
-                        ReactDOM.createRoot(
+                        ReactDOMClient.createRoot(
                             document.getElementById("portal")
                         ).render(
                             React.createElement(motion.div, {

dev/next/package.json

@@ -1,17 +1,17 @@
 {
-    "name": "next-env",
-    "private": true,
-    "version": "11.11.18",
-    "type": "module",
-    "scripts": {
-        "dev": "next dev",
-        "dev-server": "next dev",
-        "start": "next start"
-    },
-    "dependencies": {
-        "framer-motion": "^11.11.18",
-        "next": "14.x",
-        "react": "^18.3.1",
-        "react-dom": "^18.3.1"
-    }
+  "name": "next-env",
+  "private": true,
+  "version": "12.0.0-alpha.2",
+  "type": "module",
+  "scripts": {
+    "dev": "next dev",
+    "dev-server": "next dev",
+    "start": "next start"
+  },
+  "dependencies": {
+    "framer-motion": "^12.0.0-alpha.2",
+    "next": "15.0.3",
+    "react": "19.0.0-rc-66855b96-20241106",
+    "react-dom": "19.0.0-rc-66855b96-20241106"
+  }
 }

dev/next/tsconfig.json

@@ -20,7 +20,8 @@
       {
         "name": "next"
       }
-    ]
+    ],
+    "target": "ES2017"
   },
   "include": [
     "next-env.d.ts",

dev/react/package.json

@@ -1,7 +1,7 @@
 {
     "name": "react-env",
     "private": true,
-    "version": "11.11.18",
+    "version": "12.0.0-alpha.2",
     "type": "module",
     "scripts": {
         "dev": "vite",
@@ -11,13 +11,13 @@
         "preview": "vite preview"
     },
     "dependencies": {
-        "framer-motion": "^11.11.18",
-        "react": "^18.3.1",
-        "react-dom": "^18.3.1"
+        "framer-motion": "^12.0.0-alpha.2",
+        "react": "^19.0.0-rc.1",
+        "react-dom": "^19.0.0-rc.1"
     },
     "devDependencies": {
-        "@types/react": "^18.2.66",
-        "@types/react-dom": "^18.2.22",
+        "@types/react": "rc",
+        "@types/react-dom": "rc",
         "@typescript-eslint/eslint-plugin": "^7.2.0",
         "@typescript-eslint/parser": "^7.2.0",
         "@vitejs/plugin-react-swc": "^3.5.0",

dev/react/src/examples/Drag-constraints-ref-small-container-layout.tsx

@@ -16,7 +16,7 @@ const child = {
 }
 
 export const App = () => {
-    const ref = useRef()
+    const ref = useRef(undefined)
     return (
         <div ref={ref} style={container}>
             <motion.div

dev/react/src/examples/Drag-constraints-ref-small-container.tsx

@@ -16,7 +16,7 @@ const child = {
 }
 
 export const App = () => {
-    const ref = useRef()
+    const ref = useRef(undefined)
     return (
         <div ref={ref} style={container}>
             <motion.div

dev/react/src/examples/Drag-constraints-ref.tsx

@@ -46,7 +46,7 @@ const SiblingLayoutAnimation = () => {
 }
 
 export const App = () => {
-    const ref = useRef()
+    const ref = useRef(undefined)
     const [count, setCount] = useState(0)
     return (
         <>

dev/react/src/examples/Drag-external-handlers.tsx

@@ -33,7 +33,7 @@ const child: React.CSSProperties = {
 }
 
 export const App = () => {
-    const ref = useRef()
+    const ref = useRef(undefined)
     const x = useMotionValue(0)
     const y = useMotionValue(0)
     const transform = useMotionTemplate`translate3d(${x}px, ${y}px, 0)`

dev/react/src/tests/drag-ref-constraints-resize.tsx

@@ -20,7 +20,7 @@ const child = {
 }
 
 export const App = () => {
-    const ref = useRef()
+    const ref = useRef(undefined)
     const [count, setCount] = useState(0)
     return (
         <div ref={ref} style={container} id="constraints">

dev/react/src/tests/scroll-callback-element-x.tsx

@@ -6,11 +6,11 @@ const width = 400
 
 export const App = () => {
     const [progress, setProgress] = useState(0)
-    const ref = useRef<Element>(null)
+    const ref = useRef<HTMLDivElement>(null)
 
     useEffect(() => {
         if (!ref.current) return
-        return scroll(setProgress, { source: ref.current, axis: "x" })
+        return scroll(setProgress, { container: ref.current, axis: "x" })
     }, [])
 
     return (

dev/react/src/tests/scroll-callback-element.tsx

@@ -6,10 +6,11 @@ const height = 400
 
 export const App = () => {
     const [progress, setProgress] = useState(0)
-    const ref = useRef(null)
+    const ref = useRef<HTMLDivElement>(null)
 
     useEffect(() => {
-        return scroll(setProgress, { source: ref.current })
+        if (!ref.current) return
+        return scroll(setProgress, { container: ref.current })
     }, [])
 
     return (

lerna.json

@@ -1,5 +1,5 @@
 {
-    "version": "11.11.18",
+    "version": "12.0.0-alpha.2",
     "packages": [
         "packages/*"
     ],

package.json

@@ -8,6 +8,11 @@
         "packages/*",
         "dev/*"
     ],
+    "resolutions": {
+        "@types/react": "npm:types-react@rc",
+        "@types/react-dom": "npm:types-react-dom@rc",
+        "debug": "4.3.7"
+    },
     "scripts": {
         "build": "turbo run build",
         "watch": "turbo run watch",
@@ -23,25 +28,24 @@
         "new-alpha": "turbo run build && lerna publish from-package --canary --preid alpha"
     },
     "devDependencies": {
-        "@cypress/webpack-preprocessor": "^6.0.1",
         "@gsap/react": "^2.1.0",
         "@rollup/plugin-alias": "^5.1.0",
+        "@rollup/plugin-commonjs": "^22.0.1",
         "@rollup/plugin-node-resolve": "^15.2.3",
         "@rollup/plugin-replace": "^5.0.5",
-        "@testing-library/dom": "^8.16.0",
+        "@testing-library/dom": "^10.0.0",
         "@testing-library/jest-dom": "^6.4.2",
         "@testing-library/react": "16.0.1",
         "@types/jest": "^29.5.12",
         "@types/node": "^18.6.3",
-        "@types/react": "latest",
-        "@types/react-dom": "latest",
+        "@types/react": "npm:types-react@rc",
+        "@types/react-dom": "npm:types-react-dom@rc",
         "@types/styled-components": "^5.1.25",
         "@typescript-eslint/eslint-plugin": "^7.4.0",
         "@typescript-eslint/parser": "^7.4.0",
         "animejs": "^3.2.2",
         "bundlesize": "^0.18.1",
         "concurrently": "^7.3.0",
-        "convert-tsconfig-paths-to-webpack-aliases": "^0.9.2",
         "cypress": "4",
         "eslint": "^8.57.0",
         "eslint-config-prettier": "^8.5.0",
@@ -56,12 +60,10 @@
         "jest-junit": "^16.0.0",
         "jest-watch-typeahead": "^2.2.2",
         "lerna": "^4.0.0",
-        "lint-staged": "^8.0.4",
-        "path-browserify": "^1.0.1",
         "prettier": "^2.5.1",
-        "react": "^18.3.1",
+        "react": "^19.0.0-rc.1",
         "react-dev-utils": "^12.0.1",
-        "react-dom": "^18.3.1",
+        "react-dom": "^19.0.0-rc.1",
         "rollup": "4.14.0",
         "rollup-plugin-analyzer": "^4.0.0",
         "rollup-plugin-dts": "6.1.0",

packages/framer-motion-3d/package.json

@@ -1,6 +1,6 @@
 {
     "name": "framer-motion-3d",
-    "version": "11.11.18",
+    "version": "12.0.0-alpha.2",
     "description": "A simple and powerful React animation library for @react-three/fiber",
     "main": "dist/cjs/index.js",
     "module": "dist/es/index.mjs",
@@ -45,20 +45,19 @@
         "postpublish": "git push --tags"
     },
     "dependencies": {
-        "framer-motion": "^11.11.18",
+        "framer-motion": "^12.0.0-alpha.2",
         "react-merge-refs": "^2.0.1"
     },
     "peerDependencies": {
-        "@react-three/fiber": "8.2.2",
-        "react": ">=18.0",
-        "react-dom": ">=18.0",
-        "three": ">=0.133"
+        "@react-three/fiber": "9.0.0-beta.0",
+        "react": ">=19.0",
+        "react-dom": ">=19.0",
+        "three": ">=0.141"
     },
     "devDependencies": {
-        "@react-three/fiber": "8.2.2",
+        "@react-three/fiber": "9.0.0-beta.0",
         "@react-three/test-renderer": "^9.0.0",
-        "@rollup/plugin-commonjs": "^22.0.1",
-        "three": "^0.137.0"
+        "three": "^0.141.0"
     },
-    "gitHead": "eeb1cc452e2b468d838ec76fd501b131b383c5c9"
+    "gitHead": "4061bc275a3513be43fb207916b3fec31eeabe67"
 }

packages/framer-motion-3d/src/components/LayoutCamera.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { forwardRef } from "react"
+import { forwardRef, type JSX } from "react"
 import { PerspectiveCamera as PerspectiveCameraImpl } from "three"
 import { mergeRefs } from "react-merge-refs"
 import { LayoutCameraProps } from "./types"

packages/framer-motion-3d/src/components/LayoutOrthographicCamera.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { forwardRef } from "react"
+import { forwardRef, type JSX } from "react"
 import { OrthographicCamera as OrthographicCameraImpl } from "three"
 import { mergeRefs } from "react-merge-refs"
 import { motion } from "../render/motion"

packages/framer-motion-3d/src/components/MotionCanvas.tsx

@@ -127,7 +127,7 @@ function CanvasComponent(
     // Throw exception outwards if anything within canvas throws
     if (error) throw error
 
-    const root = useRef<ReconcilerRoot<HTMLCanvasElement>>()
+    const root = useRef<ReconcilerRoot<HTMLCanvasElement>>(undefined)
     if (size.width > 0 && size.height > 0) {
         if (!root.current) {
             root.current = createRoot(canvasRef.current)

packages/framer-motion-3d/src/components/use-layout-camera.ts

@@ -31,7 +31,7 @@ export function useLayoutCamera<CameraType>(
     const size = useThree((three) => three.size)
     const gl = useThree((three) => three.gl)
     const { visualElement: parentVisualElement } = useContext(MotionContext)
-    const measuredLayoutSize = useRef<Size>()
+    const measuredLayoutSize = useRef<Size>(undefined)
 
     useLayoutEffect(() => {
         measuredLayoutSize.current = size
@@ -118,5 +118,5 @@ export function useLayoutCamera<CameraType>(
         }
     }, [camera, layoutCamera, makeDefault, set])
 
-    return { size, camera, cameraRef: layoutCamera as RefObject<CameraType> }
+    return { size, camera, cameraRef: layoutCamera as RefObject<CameraType | null> };
 }

packages/framer-motion-3d/src/render/__tests__/index.test.tsx

@@ -1,7 +1,7 @@
 import { ResolvedValues, frame } from "framer-motion"
 import { useEffect, useRef } from "react"
 import { Euler, Vector3 } from "three"
-import { Canvas, Object3DNode } from "@react-three/fiber"
+import { Canvas } from "@react-three/fiber"
 import ReactThreeTestRenderer from "@react-three/test-renderer"
 import { render } from "../../../jest.setup"
 import { motion } from "../motion"
@@ -156,7 +156,7 @@ describe("motion for three", () => {
     })
 
     test("Accepts motion values", async () => {
-        const result = await new Promise<Object3DNode<any, any>>((resolve) => {
+        const result = await new Promise<any>((resolve) => {
             const x = motionValue(1)
             const scale = motionValue(2)
             const rotateX = motionValue(3)