framer-motion 5.4.0-beta.1 → 5.4.0-beta.5

package/dist/es/animation/utils/default-transitions.mjs

@@ -5,14 +5,12 @@ var underDampedSpring = function () { return ({
     type: "spring",
     stiffness: 500,
     damping: 25,
-    restDelta: 0.5,
     restSpeed: 10,
 }); };
 var criticallyDampedSpring = function (to) { return ({
     type: "spring",
     stiffness: 550,
     damping: to === 0 ? 2 * Math.sqrt(550) : 30,
-    restDelta: 0.01,
     restSpeed: 10,
 }); };
 var linearTween = function () { return ({

package/dist/es/components/MotionCanvas/index.mjs

@@ -0,0 +1,14 @@
+import { __rest, __assign } from 'tslib';
+import * as React from 'react';
+import { useContext } from 'react';
+import { Canvas } from '@react-three/fiber';
+import { MotionContext } from '../../context/MotionContext/index.mjs';
+
+function MotionCanvas(_a) {
+    var children = _a.children, props = __rest(_a, ["children"]);
+    var motionContext = useContext(MotionContext);
+    return (React.createElement(Canvas, __assign({}, props),
+        React.createElement(MotionContext.Provider, { value: motionContext }, children)));
+}
+
+export { MotionCanvas };

package/dist/es/render/three/create-visual-element.mjs

@@ -3,17 +3,17 @@ import { createBox } from '../../projection/geometry/models.mjs';
 import { checkTargetForNewValues } from '../utils/setters.mjs';
 import { setThreeValue } from './utils/set-value.mjs';
 import { readThreeValue } from './utils/read-value.mjs';
+import { scrapeMotionValuesFromProps } from './utils/scrape-motion-value.mjs';
 
-var scrapeMotionValuesFromProps = function () { return ({}); };
 var createRenderState = function () { return ({}); };
 var threeVisualElement = visualElement({
     treeType: "three",
     readValueFromInstance: readThreeValue,
-    getBaseTarget: function (_props, _key) {
-        return 0;
+    getBaseTarget: function () {
+        return undefined;
     },
-    sortNodePosition: function (_a, _b) {
-        return 0;
+    sortNodePosition: function (a, b) {
+        return a.id - b.id;
     },
     makeTargetAnimatable: function (element, target) {
         checkTargetForNewValues(element, target, {});
@@ -39,4 +39,4 @@ var createVisualElement = function (_, options) {
     return threeVisualElement(options);
 };
 
-export { createRenderState, createVisualElement, scrapeMotionValuesFromProps, threeVisualElement };
+export { createRenderState, createVisualElement, threeVisualElement };

package/dist/es/render/three/motion.mjs

@@ -3,7 +3,8 @@ import { createMotionComponent } from '../../motion/index.mjs';
 import { animations } from '../../motion/features/animations.mjs';
 import { makeUseVisualState } from '../../motion/utils/use-visual-state.mjs';
 import { useRender } from './use-render.mjs';
-import { scrapeMotionValuesFromProps, createRenderState, createVisualElement } from './create-visual-element.mjs';
+import { createRenderState, createVisualElement } from './create-visual-element.mjs';
+import { scrapeMotionValuesFromProps } from './utils/scrape-motion-value.mjs';
 
 var useVisualState = makeUseVisualState({
     scrapeMotionValuesFromProps: scrapeMotionValuesFromProps,

package/dist/es/render/three/utils/scrape-motion-value.mjs

@@ -0,0 +1,35 @@
+import { isMotionValue } from '../../../value/utils/is-motion-value.mjs';
+
+var axes = ["x", "y", "z"];
+var valueMap = {
+    "position-x": "x",
+    "position-y": "y",
+    "position-z": "z",
+    "rotation-x": "rotateX",
+    "rotation-y": "rotateY",
+    "rotation-z": "rotateZ",
+    "scale-x": "scaleX",
+    "scale-y": "scaleY",
+    "scale-z": "scaleZ",
+};
+var scrapeMotionValuesFromProps = function (props) {
+    var motionValues = {};
+    for (var key in props) {
+        var prop = props[key];
+        if (isMotionValue(prop)) {
+            motionValues[valueMap[key] || key] = prop;
+        }
+        else if (Array.isArray(prop)) {
+            for (var i = 0; i < prop.length; i++) {
+                var value = prop[i];
+                if (isMotionValue(value)) {
+                    var name_1 = valueMap[key + "-" + axes[i]];
+                    motionValues[name_1] = value;
+                }
+            }
+        }
+    }
+    return motionValues;
+};
+
+export { scrapeMotionValuesFromProps };

package/dist/es/render/three/utils/use-time.mjs

@@ -0,0 +1,10 @@
+import { useFrame } from '@react-three/fiber';
+import { useMotionValue } from '../../../value/use-motion-value.mjs';
+
+function useTime() {
+    var time = useMotionValue(0);
+    useFrame(function (state) { return time.set(state.clock.getElapsedTime()); });
+    return time;
+}
+
+export { useTime };

package/dist/es/three-entry.mjs

@@ -1 +1,3 @@
 export { motion } from './render/three/motion.mjs';
+export { MotionCanvas } from './components/MotionCanvas/index.mjs';
+export { useTime } from './render/three/utils/use-time.mjs';

package/dist/es/value/utils/is-motion-value.mjs

@@ -1,5 +1,5 @@
 var isMotionValue = function (value) {
-    return value !== null && typeof value === "object" && value.getVelocity;
+    return Boolean(value !== null && typeof value === "object" && value.getVelocity);
 };
 
 export { isMotionValue };

package/dist/framer-motion-three.cjs.js

@@ -9,6 +9,7 @@ var sync = require('framesync');
 var popmotion = require('popmotion');
 var styleValueTypes = require('style-value-types');
 var three = require('three');
+var fiber = require('@react-three/fiber');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -665,7 +666,7 @@ function motionValue(init) {
 }
 
 var isMotionValue = function (value) {
-    return value !== null && typeof value === "object" && value.getVelocity;
+    return Boolean(value !== null && typeof value === "object" && value.getVelocity);
 };
 
 /**
@@ -745,14 +746,12 @@ var underDampedSpring = function () { return ({
     type: "spring",
     stiffness: 500,
     damping: 25,
-    restDelta: 0.5,
     restSpeed: 10,
 }); };
 var criticallyDampedSpring = function (to) { return ({
     type: "spring",
     stiffness: 550,
     damping: to === 0 ? 2 * Math.sqrt(550) : 30,
-    restDelta: 0.01,
     restSpeed: 10,
 }); };
 var linearTween = function () { return ({
@@ -2935,16 +2934,47 @@ function readThreeValue(instance, name) {
         : (_a = readAnimatableValue(instance[name])) !== null && _a !== void 0 ? _a : 0;
 }
 
-var scrapeMotionValuesFromProps = function () { return ({}); };
+var axes = ["x", "y", "z"];
+var valueMap = {
+    "position-x": "x",
+    "position-y": "y",
+    "position-z": "z",
+    "rotation-x": "rotateX",
+    "rotation-y": "rotateY",
+    "rotation-z": "rotateZ",
+    "scale-x": "scaleX",
+    "scale-y": "scaleY",
+    "scale-z": "scaleZ",
+};
+var scrapeMotionValuesFromProps = function (props) {
+    var motionValues = {};
+    for (var key in props) {
+        var prop = props[key];
+        if (isMotionValue(prop)) {
+            motionValues[valueMap[key] || key] = prop;
+        }
+        else if (Array.isArray(prop)) {
+            for (var i = 0; i < prop.length; i++) {
+                var value = prop[i];
+                if (isMotionValue(value)) {
+                    var name_1 = valueMap[key + "-" + axes[i]];
+                    motionValues[name_1] = value;
+                }
+            }
+        }
+    }
+    return motionValues;
+};
+
 var createRenderState = function () { return ({}); };
 var threeVisualElement = visualElement({
     treeType: "three",
     readValueFromInstance: readThreeValue,
-    getBaseTarget: function (_props, _key) {
-        return 0;
+    getBaseTarget: function () {
+        return undefined;
     },
-    sortNodePosition: function (_a, _b) {
-        return 0;
+    sortNodePosition: function (a, b) {
+        return a.id - b.id;
     },
     makeTargetAnimatable: function (element, target) {
         checkTargetForNewValues(element, target, {});
@@ -2992,4 +3022,51 @@ var motion = new Proxy(custom, {
     },
 });
 
+function MotionCanvas(_a) {
+    var children = _a.children, props = tslib.__rest(_a, ["children"]);
+    var motionContext = React.useContext(MotionContext);
+    return (React__namespace.createElement(fiber.Canvas, tslib.__assign({}, props),
+        React__namespace.createElement(MotionContext.Provider, { value: motionContext }, children)));
+}
+
+/**
+ * Creates a `MotionValue` to track the state and velocity of a value.
+ *
+ * Usually, these are created automatically. For advanced use-cases, like use with `useTransform`, you can create `MotionValue`s externally and pass them into the animated component via the `style` prop.
+ *
+ * ```jsx
+ * export const MyComponent = () => {
+ *   const scale = useMotionValue(1)
+ *
+ *   return <motion.div style={{ scale }} />
+ * }
+ * ```
+ *
+ * @param initial - The initial state.
+ *
+ * @public
+ */
+function useMotionValue(initial) {
+    var value = useConstant(function () { return motionValue(initial); });
+    /**
+     * If this motion value is being used in static mode, like on
+     * the Framer canvas, force components to rerender when the motion
+     * value is updated.
+     */
+    var isStatic = React.useContext(MotionConfigContext).isStatic;
+    if (isStatic) {
+        var _a = tslib.__read(React.useState(initial), 2), setLatest_1 = _a[1];
+        React.useEffect(function () { return value.onChange(setLatest_1); }, []);
+    }
+    return value;
+}
+
+function useTime() {
+    var time = useMotionValue(0);
+    fiber.useFrame(function (state) { return time.set(state.clock.getElapsedTime()); });
+    return time;
+}
+
+exports.MotionCanvas = MotionCanvas;
 exports.motion = motion;
+exports.useTime = useTime;

package/dist/framer-motion.cjs.js

@@ -675,7 +675,7 @@ function motionValue(init) {
 }
 
 var isMotionValue = function (value) {
-    return value !== null && typeof value === "object" && value.getVelocity;
+    return Boolean(value !== null && typeof value === "object" && value.getVelocity);
 };
 
 /**
@@ -755,14 +755,12 @@ var underDampedSpring = function () { return ({
     type: "spring",
     stiffness: 500,
     damping: 25,
-    restDelta: 0.5,
     restSpeed: 10,
 }); };
 var criticallyDampedSpring = function (to) { return ({
     type: "spring",
     stiffness: 550,
     damping: to === 0 ? 2 * Math.sqrt(550) : 30,
-    restDelta: 0.01,
     restSpeed: 10,
 }); };
 var linearTween = function () { return ({

package/dist/framer-motion.dev.js

@@ -638,7 +638,9 @@
             const initialDelta = to - from;
             const dampingRatio = damping / (2 * Math.sqrt(stiffness * mass));
             const undampedAngularFreq = Math.sqrt(stiffness / mass) / 1000;
-            restDelta !== null && restDelta !== void 0 ? restDelta : (restDelta = Math.abs(to - from) <= 1 ? 0.01 : 0.4);
+            if (restDelta === undefined) {
+                restDelta = Math.min(Math.abs(to - from) / 100, 0.4);
+            }
             if (dampingRatio < 1) {
                 const angularFreq = calcAngularFreq(undampedAngularFreq, dampingRatio);
                 resolveSpring = (t) => {
@@ -1906,7 +1908,7 @@
     }
 
     var isMotionValue = function (value) {
-        return value !== null && typeof value === "object" && value.getVelocity;
+        return Boolean(value !== null && typeof value === "object" && value.getVelocity);
     };
 
     /**
@@ -1986,14 +1988,12 @@
         type: "spring",
         stiffness: 500,
         damping: 25,
-        restDelta: 0.5,
         restSpeed: 10,
     }); };
     var criticallyDampedSpring = function (to) { return ({
         type: "spring",
         stiffness: 550,
         damping: to === 0 ? 2 * Math.sqrt(550) : 30,
-        restDelta: 0.01,
         restSpeed: 10,
     }); };
     var linearTween = function () { return ({