framer-motion-3d - npm Package Compare versions

Comparing version 7.2.0-beta.1 to 7.2.0

dist/cjs/index.js

@@ -5,6 +5,6 @@ 'use strict';
 
-var tslib = require('tslib');
 var framerMotion = require('framer-motion');
 var React = require('react');
 var popmotion = require('popmotion');
+var tslib = require('tslib');
 var three = require('three');
@@ -35,9 +35,8 @@ var reactMergeRefs = require('react-merge-refs');
 
-function useHover(isStatic, _a, visualElement) {
-    var whileHover = _a.whileHover, onHoverStart = _a.onHoverStart, onHoverEnd = _a.onHoverEnd, onPointerOver = _a.onPointerOver, onPointerOut = _a.onPointerOut;
-    var isHoverEnabled = whileHover || onHoverStart || onHoverEnd;
+function useHover(isStatic, { whileHover, onHoverStart, onHoverEnd, onPointerOver, onPointerOut, }, visualElement) {
+    const isHoverEnabled = whileHover || onHoverStart || onHoverEnd;
     if (isStatic || !visualElement || !isHoverEnabled)
         return {};
     return {
-        onPointerOver: function (event) {
+        onPointerOver: (event) => {
             var _a;
@@ -47,3 +46,3 @@ (_a = visualElement.animationState) === null || _a === void 0 ? void 0 : _a.setActive(framerMotion.AnimationType.Hover, true);
         },
-        onPointerOut: function (event) {
+        onPointerOut: (event) => {
             var _a;
@@ -56,7 +55,6 @@ (_a = visualElement.animationState) === null || _a === void 0 ? void 0 : _a.setActive(framerMotion.AnimationType.Hover, false);
 
-function useTap(isStatic, _a, visualElement) {
-    var whileTap = _a.whileTap, onTapStart = _a.onTapStart, onTap = _a.onTap, onTapCancel = _a.onTapCancel, onPointerDown = _a.onPointerDown;
-    var isTapEnabled = onTap || onTapStart || onTapCancel || whileTap;
-    var isPressing = React.useRef(false);
-    var cancelPointerEndListeners = React.useRef(null);
+function useTap(isStatic, { whileTap, onTapStart, onTap, onTapCancel, onPointerDown, }, visualElement) {
+    const isTapEnabled = onTap || onTapStart || onTapCancel || whileTap;
+    const isPressing = React.useRef(false);
+    const cancelPointerEndListeners = React.useRef(null);
     if (isStatic || !visualElement || !isTapEnabled)
@@ -91,3 +89,3 @@ return {};
     return {
-        onPointerDown: framerMotion.wrapHandler(function (event, info) {
+        onPointerDown: framerMotion.wrapHandler((event, info) => {
             var _a;
@@ -101,3 +99,3 @@ removePointerEndListener();
              */
-            var options = {
+            const options = {
                 passive: !(onTapStart || onTap || onTapCancel || onPointerDown),
@@ -113,4 +111,4 @@ };
 
-var useRender = function (Component, props, _projectionId, ref, _state, isStatic, visualElement) {
-    var visualProps = useVisualProps(props);
+const useRender = (Component, props, _projectionId, ref, _state, isStatic, visualElement) => {
+    const visualProps = useVisualProps(props);
     /**
@@ -120,9 +118,9 @@ * If isStatic, render motion values as props
      */
-    return React.createElement(Component, tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign({ ref: ref }, framerMotion.filterProps(props, false, false)), visualProps), { onUpdate: props.onInstanceUpdate }), useHover(isStatic, props, visualElement)), useTap(isStatic, props, visualElement)));
+    return React.createElement(Component, Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ ref }, framerMotion.filterProps(props, false, false)), visualProps), { onUpdate: props.onInstanceUpdate }), useHover(isStatic, props, visualElement)), useTap(isStatic, props, visualElement)));
 };
 function useVisualProps(props) {
-    return React.useMemo(function () {
-        var visualProps = {};
-        for (var key in props) {
-            var prop = props[key];
+    return React.useMemo(() => {
+        const visualProps = {};
+        for (const key in props) {
+            const prop = props[key];
             if (framerMotion.isMotionValue(prop)) {
@@ -139,38 +137,30 @@ visualProps[key] = prop.get();
 
-var setVector = function (name, defaultValue) {
-    return function (i) {
-        return function (instance, value) {
-            var _a;
-            (_a = instance[name]) !== null && _a !== void 0 ? _a : (instance[name] = new three.Vector3(defaultValue));
-            var vector = instance[name];
-            vector.setComponent(i, value);
-        };
-    };
+const setVector = (name, defaultValue) => (i) => (instance, value) => {
+    var _a;
+    (_a = instance[name]) !== null && _a !== void 0 ? _a : (instance[name] = new three.Vector3(defaultValue));
+    const vector = instance[name];
+    vector.setComponent(i, value);
 };
-var setEuler = function (name, defaultValue) {
-    return function (axis) {
-        return function (instance, value) {
-            var _a;
-            (_a = instance[name]) !== null && _a !== void 0 ? _a : (instance[name] = new three.Euler(defaultValue));
-            var euler = instance[name];
-            euler[axis] = value;
-        };
-    };
+const setEuler = (name, defaultValue) => (axis) => (instance, value) => {
+    var _a;
+    (_a = instance[name]) !== null && _a !== void 0 ? _a : (instance[name] = new three.Euler(defaultValue));
+    const euler = instance[name];
+    euler[axis] = value;
 };
-var setColor = function (name) { return function (instance, value) {
+const setColor = (name) => (instance, value) => {
     var _a;
     (_a = instance[name]) !== null && _a !== void 0 ? _a : (instance[name] = new three.Color(value));
     instance[name].set(value);
-}; };
-var setScale = setVector("scale", 1);
-var setPosition = setVector("position", 0);
-var setRotation = setEuler("rotation", 0);
-var setters = {
+};
+const setScale = setVector("scale", 1);
+const setPosition = setVector("position", 0);
+const setRotation = setEuler("rotation", 0);
+const setters = {
     x: setPosition(0),
     y: setPosition(1),
     z: setPosition(2),
-    scale: function (instance, value) {
+    scale: (instance, value) => {
         var _a;
         (_a = instance.scale) !== null && _a !== void 0 ? _a : (instance.scale = new three.Vector3(1));
-        var scale = instance.scale;
+        const scale = instance.scale;
         scale.set(value, value, value);
@@ -199,14 +189,10 @@ },
 
-var readVector = function (name, defaultValue) {
-    return function (axis) {
-        return function (instance) {
-            var value = instance[name];
-            return value ? value[axis] : defaultValue;
-        };
-    };
+const readVector = (name, defaultValue) => (axis) => (instance) => {
+    const value = instance[name];
+    return value ? value[axis] : defaultValue;
 };
-var readPosition = readVector("position", 0);
-var readScale = readVector("scale", 1);
-var readRotation = readVector("rotation", 0);
-var readers = {
+const readPosition = readVector("position", 0);
+const readScale = readVector("scale", 1);
+const readRotation = readVector("rotation", 0);
+const readers = {
     x: readPosition("x"),
@@ -241,4 +227,4 @@ y: readPosition("y"),
 
-var axes = ["x", "y", "z"];
-var valueMap = {
+const axes = ["x", "y", "z"];
+const valueMap = {
     "position-x": "x",
@@ -254,6 +240,6 @@ "position-y": "y",
 };
-var scrapeMotionValuesFromProps = function (props) {
-    var motionValues = {};
-    for (var key in props) {
-        var prop = props[key];
+const scrapeMotionValuesFromProps = (props) => {
+    const motionValues = {};
+    for (const key in props) {
+        const prop = props[key];
         if (framerMotion.isMotionValue(prop)) {
@@ -263,7 +249,7 @@ motionValues[valueMap[key] || key] = prop;
         else if (Array.isArray(prop)) {
-            for (var i = 0; i < prop.length; i++) {
-                var value = prop[i];
+            for (let i = 0; i < prop.length; i++) {
+                const value = prop[i];
                 if (framerMotion.isMotionValue(value)) {
-                    var name_1 = valueMap[key + "-" + axes[i]];
-                    motionValues[name_1] = value;
+                    const name = valueMap[key + "-" + axes[i]];
+                    motionValues[name] = value;
                 }
@@ -276,29 +262,29 @@ }
 
-var createRenderState = function () { return ({}); };
-var threeVisualElement = framerMotion.visualElement({
+const createRenderState = () => ({});
+const threeVisualElement = framerMotion.visualElement({
     treeType: "three",
     readValueFromInstance: readThreeValue,
-    getBaseTarget: function () {
+    getBaseTarget() {
         return undefined;
     },
-    sortNodePosition: function (a, b) {
+    sortNodePosition(a, b) {
         return a.id - b.id;
     },
-    makeTargetAnimatable: function (element, _a) {
-        _a.transition; var target = tslib.__rest(_a, ["transition"]);
+    makeTargetAnimatable(element, _a) {
+        var target = tslib.__rest(_a, ["transition"]);
         framerMotion.checkTargetForNewValues(element, target, {});
         return target;
     },
-    restoreTransform: function () { },
-    resetTransform: function () { },
-    removeValueFromRenderState: function (_key, _renderState) { },
+    restoreTransform() { },
+    resetTransform() { },
+    removeValueFromRenderState(_key, _renderState) { },
     measureViewportBox: framerMotion.createBox,
-    scrapeMotionValuesFromProps: scrapeMotionValuesFromProps,
-    build: function (_element, state, latestValues) {
-        for (var key in latestValues) {
+    scrapeMotionValuesFromProps,
+    build(_element, state, latestValues) {
+        for (const key in latestValues) {
             state[key] = latestValues[key];
         }
     },
-    render: function (instance, renderState) {
-        for (var key in renderState) {
+    render(instance, renderState) {
+        for (const key in renderState) {
             setThreeValue(instance, key, renderState);
@@ -308,23 +294,21 @@ }
 });
-var createVisualElement = function (_, options) {
-    return threeVisualElement(options);
-};
+const createVisualElement = (_, options) => threeVisualElement(options);
 
-var useVisualState = framerMotion.makeUseVisualState({
-    scrapeMotionValuesFromProps: scrapeMotionValuesFromProps,
-    createRenderState: createRenderState,
+const useVisualState = framerMotion.makeUseVisualState({
+    scrapeMotionValuesFromProps,
+    createRenderState,
 });
-var preloadedFeatures = tslib.__assign({}, framerMotion.animations);
+const preloadedFeatures = Object.assign({}, framerMotion.animations);
 function custom(Component) {
     return framerMotion.createMotionComponent({
-        Component: Component,
-        preloadedFeatures: preloadedFeatures,
-        useRender: useRender,
-        useVisualState: useVisualState,
-        createVisualElement: createVisualElement,
+        Component,
+        preloadedFeatures,
+        useRender,
+        useVisualState,
+        createVisualElement,
     });
 }
-var componentCache = new Map();
-var motion = new Proxy(custom, {
-    get: function (_, key) {
+const componentCache = new Map();
+const motion = new Proxy(custom, {
+    get: (_, key) => {
         !componentCache.has(key) && componentCache.set(key, custom(key));
@@ -335,10 +319,8 @@ return componentCache.get(key);
 
-var MotionCanvasContext = React.createContext(undefined);
+const MotionCanvasContext = React.createContext(undefined);
 
-var devicePixelRatio = typeof window !== "undefined" ? window.devicePixelRatio : 1;
-var calculateDpr = function (dpr) {
-    return Array.isArray(dpr)
-        ? popmotion.clamp(dpr[0], dpr[1], devicePixelRatio)
-        : dpr || devicePixelRatio;
-};
+const devicePixelRatio = typeof window !== "undefined" ? window.devicePixelRatio : 1;
+const calculateDpr = (dpr) => Array.isArray(dpr)
+    ? popmotion.clamp(dpr[0], dpr[1], devicePixelRatio)
+    : dpr || devicePixelRatio;
 /**
@@ -351,28 +333,24 @@ * This file contains a version of R3F's Canvas component that uses our projection
  */
-function Block(_a) {
-    var set = _a.set;
-    framerMotion.useIsomorphicLayoutEffect(function () {
-        set(new Promise(function () { return null; }));
-        return function () { return set(false); };
+function Block({ set }) {
+    framerMotion.useIsomorphicLayoutEffect(() => {
+        set(new Promise(() => null));
+        return () => set(false);
     }, []);
     return null;
 }
-var ErrorBoundary = /** @class */ (function (_super) {
-    tslib.__extends(ErrorBoundary, _super);
-    function ErrorBoundary() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this.state = { error: false };
-        return _this;
+class ErrorBoundary extends React__namespace.Component {
+    constructor() {
+        super(...arguments);
+        this.state = { error: false };
     }
-    ErrorBoundary.prototype.componentDidCatch = function (error) {
+    componentDidCatch(error) {
         this.props.set(error);
-    };
-    ErrorBoundary.prototype.render = function () {
+    }
+    render() {
         return this.state.error ? null : this.props.children;
-    };
-    ErrorBoundary.getDerivedStateFromError = function () { return ({ error: true }); };
-    return ErrorBoundary;
-}(React__namespace.Component));
+    }
+}
+ErrorBoundary.getDerivedStateFromError = () => ({ error: true });
 function CanvasComponent(_a, forwardedRef) {
-    var children = _a.children, fallback = _a.fallback, tabIndex = _a.tabIndex, id = _a.id, style = _a.style, className = _a.className, events = _a.events, props = tslib.__rest(_a, ["children", "fallback", "tabIndex", "id", "style", "className", "events"]);
+    var { children, fallback, tabIndex, id, style, className, events } = _a, props = tslib.__rest(_a, ["children", "fallback", "tabIndex", "id", "style", "className", "events"]);
     /**
@@ -384,13 +362,13 @@ * Import existing contexts to pass through variants and MotionConfig from
      */
-    var motionContext = React.useContext(framerMotion.MotionContext);
-    var configContext = React.useContext(framerMotion.MotionConfigContext);
-    var _b = tslib.__read(framerMotion.useForceUpdate(), 1), forceRender = _b[0];
-    var layoutCamera = React.useRef(null);
-    var dimensions = React.useRef({
+    const motionContext = React.useContext(framerMotion.MotionContext);
+    const configContext = React.useContext(framerMotion.MotionConfigContext);
+    const [forceRender] = framerMotion.useForceUpdate();
+    const layoutCamera = React.useRef(null);
+    const dimensions = React.useRef({
         size: { width: 0, height: 0 },
     });
-    var _c = dimensions.current, size = _c.size, dpr = _c.dpr;
-    var containerRef = React.useRef(null);
-    var handleResize = function () {
-        var container = containerRef.current;
+    const { size, dpr } = dimensions.current;
+    const containerRef = React.useRef(null);
+    const handleResize = () => {
+        const container = containerRef.current;
         dimensions.current = {
@@ -406,5 +384,5 @@ size: {
     React.useLayoutEffect(handleResize, []);
-    var canvasRef = React__namespace.useRef(null);
-    var _d = tslib.__read(React__namespace.useState(false), 2), block = _d[0], setBlock = _d[1];
-    var _e = tslib.__read(React__namespace.useState(false), 2), error = _e[0], setError = _e[1];
+    const canvasRef = React__namespace.useRef(null);
+    const [block, setBlock] = React__namespace.useState(false);
+    const [error, setError] = React__namespace.useState(false);
     // Suspend this component if block is a promise (2nd run)
@@ -416,3 +394,3 @@ if (block)
         throw error;
-    var root = React.useRef();
+    const root = React.useRef();
     if (size.width > 0 && size.height > 0) {
@@ -422,7 +400,7 @@ if (!root.current) {
         }
-        root.current.configure(tslib.__assign(tslib.__assign({}, props), { dpr: dpr || props.dpr, size: tslib.__assign(tslib.__assign({}, size), { top: 0, left: 0 }), events: events || fiber.events })).render(React__namespace.createElement(ErrorBoundary, { set: setError },
+        root.current.configure(Object.assign(Object.assign({}, props), { dpr: dpr || props.dpr, size: Object.assign(Object.assign({}, size), { top: 0, left: 0 }), events: events || fiber.events })).render(React__namespace.createElement(ErrorBoundary, { set: setError },
             React__namespace.createElement(React__namespace.Suspense, { fallback: React__namespace.createElement(Block, { set: setBlock }) },
                 React__namespace.createElement(MotionCanvasContext.Provider, { value: {
-                        dimensions: dimensions,
-                        layoutCamera: layoutCamera,
+                        dimensions,
+                        layoutCamera,
                         requestedDpr: calculateDpr(props.dpr),
@@ -433,37 +411,33 @@ } },
     }
-    framerMotion.useIsomorphicLayoutEffect(function () {
-        var container = canvasRef.current;
-        return function () { return fiber.unmountComponentAtNode(container); };
+    framerMotion.useIsomorphicLayoutEffect(() => {
+        const container = canvasRef.current;
+        return () => fiber.unmountComponentAtNode(container);
     }, []);
-    return (React__namespace.createElement("div", { ref: containerRef, id: id, className: className, tabIndex: tabIndex, style: tslib.__assign({ position: "relative", width: "100%", height: "100%", overflow: "hidden" }, style) },
+    return (React__namespace.createElement("div", { ref: containerRef, id: id, className: className, tabIndex: tabIndex, style: Object.assign({ position: "relative", width: "100%", height: "100%", overflow: "hidden" }, style) },
         React__namespace.createElement("canvas", { ref: reactMergeRefs.mergeRefs([canvasRef, forwardedRef]), style: { display: "block" } }, fallback)));
 }
-var MotionCanvas = React.forwardRef(CanvasComponent);
+const MotionCanvas = React.forwardRef(CanvasComponent);
 
-var calcBoxSize = function (_a) {
-    var x = _a.x, y = _a.y;
-    return ({
-        width: framerMotion.calcLength(x),
-        height: framerMotion.calcLength(y),
-        top: 0,
-        left: 0,
-    });
-};
-function useLayoutCamera(_a, updateCamera) {
-    var _b = _a.makeDefault, makeDefault = _b === void 0 ? true : _b;
-    var context = React.useContext(MotionCanvasContext);
+const calcBoxSize = ({ x, y }) => ({
+    width: framerMotion.calcLength(x),
+    height: framerMotion.calcLength(y),
+    top: 0,
+    left: 0,
+});
+function useLayoutCamera({ makeDefault = true }, updateCamera) {
+    const context = React.useContext(MotionCanvasContext);
     heyListen.invariant(Boolean(context), "No MotionCanvas detected. Replace Canvas from @react-three/fiber with MotionCanvas from framer-motion.");
-    var _c = context, dimensions = _c.dimensions, layoutCamera = _c.layoutCamera, requestedDpr = _c.requestedDpr;
-    var advance = fiber.useThree(function (three) { return three.advance; });
-    var set = fiber.useThree(function (three) { return three.set; });
-    var camera = fiber.useThree(function (three) { return three.camera; });
-    var size = fiber.useThree(function (three) { return three.size; });
-    var gl = fiber.useThree(function (three) { return three.gl; });
-    var parentVisualElement = framerMotion.useVisualElementContext();
-    var measuredLayoutSize = React.useRef();
-    React.useLayoutEffect(function () {
+    const { dimensions, layoutCamera, requestedDpr } = context;
+    const advance = fiber.useThree((three) => three.advance);
+    const set = fiber.useThree((three) => three.set);
+    const camera = fiber.useThree((three) => three.camera);
+    const size = fiber.useThree((three) => three.size);
+    const gl = fiber.useThree((three) => three.gl);
+    const parentVisualElement = framerMotion.useVisualElementContext();
+    const measuredLayoutSize = React.useRef();
+    React.useLayoutEffect(() => {
         measuredLayoutSize.current = size;
         updateCamera(size);
         advance(performance.now());
-        var projection = parentVisualElement === null || parentVisualElement === void 0 ? void 0 : parentVisualElement.projection;
+        const projection = parentVisualElement === null || parentVisualElement === void 0 ? void 0 : parentVisualElement.projection;
         if (!projection)
@@ -475,3 +449,3 @@ return;
          */
-        var removeProjectionUpdateListener = projection.addEventListener("projectionUpdate", function (newProjection) { return updateCamera(calcBoxSize(newProjection)); });
+        const removeProjectionUpdateListener = projection.addEventListener("projectionUpdate", (newProjection) => updateCamera(calcBoxSize(newProjection)));
         /**
@@ -481,13 +455,13 @@ * When the layout of an element changes we want to update the renderer
          */
-        var removeLayoutMeasureListener = projection.addEventListener("measure", function (newLayout) {
-            var newSize = calcBoxSize(newLayout);
-            var dpr = requestedDpr;
-            var _a = dimensions.current.size, width = _a.width, height = _a.height;
-            var xScale = width / newSize.width;
-            var yScale = height / newSize.height;
-            var maxScale = Math.max(xScale, yScale);
+        const removeLayoutMeasureListener = projection.addEventListener("measure", (newLayout) => {
+            const newSize = calcBoxSize(newLayout);
+            let dpr = requestedDpr;
+            const { width, height } = dimensions.current.size;
+            const xScale = width / newSize.width;
+            const yScale = height / newSize.height;
+            const maxScale = Math.max(xScale, yScale);
             dpr = popmotion.clamp(0.75, 4, maxScale);
             dimensions.current = {
                 size: { width: newSize.width, height: newSize.height },
-                dpr: dpr,
+                dpr,
             };
@@ -501,7 +475,7 @@ gl.setSize(newSize.width, newSize.height);
          */
-        var removeAnimationCompleteListener = projection.addEventListener("animationComplete", function () {
-            var actual = (projection.layout || {}).actual;
+        const removeAnimationCompleteListener = projection.addEventListener("animationComplete", () => {
+            const { actual } = projection.layout || {};
             if (actual) {
-                setTimeout(function () {
-                    var newSize = calcBoxSize(actual);
+                setTimeout(() => {
+                    const newSize = calcBoxSize(actual);
                     updateCamera(newSize);
@@ -514,3 +488,3 @@ dimensions.current = { size: newSize };
         });
-        return function () {
+        return () => {
             removeProjectionUpdateListener();
@@ -522,11 +496,11 @@ removeLayoutMeasureListener();
     }, []);
-    React.useLayoutEffect(function () {
-        var cam = layoutCamera.current;
+    React.useLayoutEffect(() => {
+        const { current: cam } = layoutCamera;
         if (makeDefault && cam) {
-            var oldCam_1 = camera;
-            set(function () { return ({ camera: cam }); });
-            return function () { return set(function () { return ({ camera: oldCam_1 }); }); };
+            const oldCam = camera;
+            set(() => ({ camera: cam }));
+            return () => set(() => ({ camera: oldCam }));
         }
     }, [camera, layoutCamera, makeDefault, set]);
-    return { size: size, camera: camera, cameraRef: layoutCamera };
+    return { size, camera, cameraRef: layoutCamera };
 }
@@ -537,5 +511,5 @@
  */
-var LayoutCamera = React__namespace.forwardRef(function (props, ref) {
-    var cameraRef = useLayoutCamera(props, function (size) {
-        var cam = cameraRef.current;
+const LayoutCamera = React__namespace.forwardRef((props, ref) => {
+    const { cameraRef } = useLayoutCamera(props, (size) => {
+        const { current: cam } = cameraRef;
         if (cam && !props.manual) {
@@ -545,9 +519,9 @@ cam.aspect = size.width / size.height;
         }
-    }).cameraRef;
-    return (React__namespace.createElement(motion.perspectiveCamera, tslib.__assign({ ref: reactMergeRefs.mergeRefs([cameraRef, ref]) }, props)));
+    });
+    return (React__namespace.createElement(motion.perspectiveCamera, Object.assign({ ref: reactMergeRefs.mergeRefs([cameraRef, ref]) }, props)));
 });
 
-var LayoutOrthographicCamera = React__namespace.forwardRef(function (props, ref) {
-    var _a = useLayoutCamera(props, function (newSize) {
-        var cam = cameraRef.current;
+const LayoutOrthographicCamera = React__namespace.forwardRef((props, ref) => {
+    const { size, cameraRef } = useLayoutCamera(props, (newSize) => {
+        const { current: cam } = cameraRef;
         if (cam) {
@@ -560,10 +534,10 @@ cam.left = newSize.width / -2;
         }
-    }), size = _a.size, cameraRef = _a.cameraRef;
-    return (React__namespace.createElement(motion.orthographicCamera, tslib.__assign({ left: size.width / -2, right: size.width / 2, top: size.height / 2, bottom: size.height / -2, ref: reactMergeRefs.mergeRefs([cameraRef, ref]) }, props)));
+    });
+    return (React__namespace.createElement(motion.orthographicCamera, Object.assign({ left: size.width / -2, right: size.width / 2, top: size.height / 2, bottom: size.height / -2, ref: reactMergeRefs.mergeRefs([cameraRef, ref]) }, props)));
 });
 
 function useTime() {
-    var time = framerMotion.useMotionValue(0);
-    var isStatic = React.useContext(framerMotion.MotionConfigContext).isStatic;
-    !isStatic && fiber.useFrame(function (state) { return time.set(state.clock.getElapsedTime()); });
+    const time = framerMotion.useMotionValue(0);
+    const { isStatic } = React.useContext(framerMotion.MotionConfigContext);
+    !isStatic && fiber.useFrame((state) => time.set(state.clock.getElapsedTime()));
     return time;
@@ -570,0 +544,0 @@ }

package.json

 {
     "name": "framer-motion-3d",
-    "version": "7.2.0-beta.1",
+    "version": "7.2.0",
     "description": "A simple and powerful React animation library for @react-three/fiber",
@@ -49,3 +49,3 @@ "main": "dist/cjs/index.js",
     "dependencies": {
-        "framer-motion": "^7.2.0-beta.1",
+        "framer-motion": "^7.2.0",
         "react-merge-refs": "^2.0.1"
@@ -64,3 +64,3 @@ },
     },
-    "gitHead": "5eb2cceda23298ad75f8fd438d0722b6fc51bba5"
+    "gitHead": "3fc155b6afa513a2d38dc3728ccd69853480df3d"
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Number of low quality alerts

1

decreased by-50%

Worsened metrics

Total package byte prevSize

54415

decreased by-6.18%

Lines of code

1102

decreased by-4.75%

Dependency changes

• Updatedframer-motion@^7.2.0