Add object support to animate (#2820)

* Latest

* Latest

* Moving animate function to its own folder

* Moving test

* Move animate singlevalue

* Latest

* Updating

* Fixing

* Latest

* Latest

* Latest

* Adding sequence test

* Latest

* Updating bundlesize limits

* Updating

package.json

@@ -40,7 +40,6 @@
         "@types/react": "latest",
         "@types/react-dom": "latest",
         "@types/styled-components": "^5.1.25",
-        "@types/three": "^0.143.0",
         "@typescript-eslint/eslint-plugin": "^7.4.0",
         "@typescript-eslint/parser": "^7.4.0",
         "animejs": "^3.2.2",

packages/framer-motion/package.json

@@ -91,6 +91,10 @@
     "dependencies": {
         "tslib": "^2.4.0"
     },
+    "devDependencies": {
+        "@types/three": "0.137.0",
+        "three": "0.137.0"
+    },
     "peerDependencies": {
         "@emotion/is-prop-valid": "*",
         "react": "^18.0.0",
@@ -126,7 +130,7 @@
         },
         {
             "path": "./dist/size-rollup-animate.js",
-            "maxSize": "17.8 kB"
+            "maxSize": "18 kB"
         },
         {
             "path": "./dist/size-rollup-scroll.js",

packages/framer-motion/rollup.config.mjs

@@ -180,7 +180,7 @@ const animateTypes = createTypes("types/dom.d.ts", "dist/dom.d.ts")
 const animateMiniTypes = createTypes("types/dom-mini.d.ts", "dist/dom-mini.d.ts")
 const mTypes = createTypes("types/m.d.ts", "dist/m.d.ts")
 const clientTypes = createTypes("types/client.d.ts", "dist/client.d.ts")
-const threeTypes = createTypes("types/three.d.ts", "dist/three.d.ts")
+const threeTypes = createTypes("types/three-entry.d.ts", "dist/three.d.ts")
 
 // eslint-disable-next-line import/no-default-export
 export default [

packages/framer-motion/rollup.size.config.mjs

@@ -39,7 +39,7 @@ const m = createSizeBundle(
     "dist/size-rollup-m.js"
 )
 const sizeAnimate = createSizeBundle(
-    "lib/animation/animate.js",
+    "lib/animation/animate/index.js",
     "dist/size-rollup-animate.js"
 )
 const sizeScroll = createSizeBundle(

packages/framer-motion/src/animation/__tests__/animate.test.tsx → packages/framer-motion/src/animation/animate/__tests__/animate.test.tsx

@@ -1,10 +1,11 @@
-import { render } from "../../../jest.setup"
+import { render } from "../../../../jest.setup"
 import { useEffect } from "react"
-import { motion, MotionGlobalConfig } from "../.."
-import { animate } from "../animate"
-import { useMotionValue } from "../../value/use-motion-value"
-import { motionValue, MotionValue } from "../../value"
-import { syncDriver } from "../animators/__tests__/utils"
+import { motion, MotionGlobalConfig } from "../../.."
+import { animate } from ".."
+import { useMotionValue } from "../../../value/use-motion-value"
+import { motionValue, MotionValue } from "../../../value"
+import { syncDriver } from "../../animators/__tests__/utils"
+import * as THREE from "three"
 
 const duration = 0.001
 
@@ -312,3 +313,87 @@ describe("animate", () => {
         ])
     })
 })
+
+describe("animate: Objects", () => {
+    test("Types: Object to object", () => {
+        animate({ x: 100 }, { x: 200 })
+        animate({ x: 100, y: 0 }, { x: 200 })
+    })
+
+    test("Types: Object to object with transition", () => {
+        animate({ x: 100 }, { x: 200 }, { duration: 0.01 })
+    })
+
+    test("Types: Object to object with value-specific transitions", () => {
+        animate({ x: 100 }, { x: 200 }, { x: { duration: 0.01 } })
+    })
+
+    test("Types: Object in sequence", () => {
+        animate([[{ x: 100 }, { x: 200 }]])
+    })
+
+    test("Types: Object in sequence with transition", () => {
+        animate([[{ x: 100 }, { x: 200 }, { duration: 1 }]])
+    })
+
+    test("Types: Object in sequence with value-specific transition", () => {
+        animate([[{ x: 100 }, { x: 200 }, { x: { duration: 1 } }]])
+    })
+
+    test("Types: Object to object with onUpdate", () => {
+        const output = { x: 0 }
+        animate(
+            { x: 100 },
+            { x: 200 },
+            {
+                onUpdate: (latest) => {
+                    output.x = latest.x
+                },
+            }
+        )
+    })
+
+    test("Types: Three.js Object3D", () => {
+        const object = new THREE.Object3D()
+        animate(object.rotation, { x: 10 }, { duration: 0.01 })
+    })
+
+    test("Types: Three.js Object3D keyframes", () => {
+        const object = new THREE.Object3D()
+        animate(object.rotation, { x: [null, 10] }, { duration: 0.01 })
+    })
+
+    test("Types: Three.js Object3D in sequence", () => {
+        const object = new THREE.Object3D()
+        animate([[object.rotation, { x: 10 }]])
+    })
+
+    test("Types: Three.js Object3D in sequence with transition", () => {
+        const object = new THREE.Object3D()
+        animate([[object.rotation, { x: 10 }, { duration: 0.01 }]])
+    })
+
+    test("Object animates", async () => {
+        const obj = { x: 100 }
+        await animate(obj, { x: 200 }, { duration: 0.01 })
+        expect(obj.x).toBe(200)
+    })
+
+    test("Three.js Object3D animates", async () => {
+        const obj = new THREE.Object3D()
+        await animate(obj.rotation, { x: 10 }, { duration: 0.01 })
+        expect(obj.rotation.x).toBe(10)
+    })
+
+    test("Object animates in sequence", async () => {
+        const obj = { x: 100 }
+        await animate([[obj, { x: 200 }, { duration: 0.01 }]])
+        expect(obj.x).toBe(200)
+    })
+
+    test("Three.js Object3D animates in sequence", async () => {
+        const obj = new THREE.Object3D()
+        await animate([[obj.rotation, { x: 10 }, { duration: 0.01 }]])
+        expect(obj.rotation.x).toBe(10)
+    })
+})