framer-motion 6.3.8 → 6.3.11

package/dist/cjs/index.js

@@ -36,10 +36,10 @@ var sync__default = /*#__PURE__*/_interopDefaultLegacy(sync);
 /**
  * Browser-safe usage of process
  */
-var mockProcess = { env: { NODE_ENV: "production" } };
-var safeProcess = typeof process === "undefined" ? mockProcess : process;
-// eslint-disable-next-line import/no-default-export
-var process$1 = safeProcess;
+var defaultEnvironment = "production";
+var env = typeof process === "undefined" || process.env === undefined
+    ? defaultEnvironment
+    : process.env.NODE_ENV || defaultEnvironment;
 
 var createDefinition = function (propNames) { return ({
     isEnabled: function (props) { return propNames.some(function (name) { return !!props[name]; }); },
@@ -102,9 +102,7 @@ function useFeatures(props, visualElement, preloadedFeatures) {
      * If we're in development mode, check to make sure we're not rendering a motion component
      * as a child of LazyMotion, as this will break the file-size benefits of using it.
      */
-    if (process$1.env.NODE_ENV !== "production" &&
-        preloadedFeatures &&
-        lazyContext.strict) {
+    if (env !== "production" && preloadedFeatures && lazyContext.strict) {
         heyListen.invariant(false, "You have rendered a `motion` component within a `LazyMotion` component. This will break tree shaking. Import and render a `m` component instead.");
     }
     for (var i = 0; i < numFeatures; i++) {
@@ -474,7 +472,7 @@ var MotionValue = /** @class */ (function () {
          * This will be replaced by the build step with the latest version number.
          * When MotionValues are provided to motion components, warn if versions are mixed.
          */
-        this.version = "6.3.8";
+        this.version = "6.3.11";
         /**
          * Duration, in milliseconds, since last updating frame.
          *
@@ -1698,7 +1696,7 @@ function addScaleCorrector(correctors) {
     Object.assign(scaleCorrectors, correctors);
 }
 
-var identityProjection = "translate3d(0px, 0px, 0) scale(1, 1)";
+var identityProjection = "translate3d(0px, 0px, 0) scale(1, 1) scale(1, 1)";
 function buildProjectionTransform(delta, treeScale, latestTransform) {
     /**
      * The translations we use to calculate are always relative to the viewport coordinate space.
@@ -1709,6 +1707,11 @@ function buildProjectionTransform(delta, treeScale, latestTransform) {
     var xTranslate = delta.x.translate / treeScale.x;
     var yTranslate = delta.y.translate / treeScale.y;
     var transform = "translate3d(".concat(xTranslate, "px, ").concat(yTranslate, "px, 0) ");
+    /**
+     * Apply scale correction for the tree transform.
+     * This will apply scale to the screen-orientated axes.
+     */
+    transform += "scale(".concat(1 / treeScale.x, ", ").concat(1 / treeScale.y, ") ");
     if (latestTransform) {
         var rotate = latestTransform.rotate, rotateX = latestTransform.rotateX, rotateY = latestTransform.rotateY;
         if (rotate)
@@ -1718,7 +1721,13 @@ function buildProjectionTransform(delta, treeScale, latestTransform) {
         if (rotateY)
             transform += "rotateY(".concat(rotateY, "deg) ");
     }
-    transform += "scale(".concat(delta.x.scale, ", ").concat(delta.y.scale, ")");
+    /**
+     * Apply scale to match the size of the element to the size we want it.
+     * This will apply scale to the element-orientated axes.
+     */
+    var elementScaleX = delta.x.scale * treeScale.x;
+    var elementScaleY = delta.y.scale * treeScale.y;
+    transform += "scale(".concat(elementScaleX, ", ").concat(elementScaleY, ")");
     return transform === identityProjection ? "none" : transform;
 }
 
@@ -4337,7 +4346,7 @@ function useMissingIntersectionObserver(shouldObserve, state, visualElement, _a)
     React.useEffect(function () {
         if (!shouldObserve || !fallback)
             return;
-        if (process$1.env.NODE_ENV !== "production") {
+        if (env !== "production") {
             warnOnce(false, "IntersectionObserver not available on this device. whileInView animations will trigger on mount.");
         }
         /**
@@ -5972,7 +5981,7 @@ function updateMotionValuesFromProps(element, next, prev) {
              * and warn against mismatches.
              */
             if (process.env.NODE_ENV === "development") {
-                warnOnce(nextValue.version !== "6.3.8", "Attempting to mix Framer Motion versions ".concat(nextValue.version, " with 6.3.8 may not work as expected."));
+                warnOnce(nextValue.version === "6.3.11", "Attempting to mix Framer Motion versions ".concat(nextValue.version, " with 6.3.11 may not work as expected."));
             }
         }
         else if (isMotionValue(prevValue)) {
@@ -7359,7 +7368,7 @@ var AnimatePresence = function (_a) {
         var key = child.key;
         return exiting.has(key) ? (child) : (React__namespace.createElement(PresenceChild, { key: getChildKey(child), isPresent: true, presenceAffectsLayout: presenceAffectsLayout }, child));
     });
-    if (process$1.env.NODE_ENV !== "production" &&
+    if (env !== "production" &&
         exitBeforeEnter &&
         childrenToRender.length > 1) {
         console.warn("You're attempting to animate multiple children within AnimatePresence, but its exitBeforeEnter prop is set to true. This will lead to odd visual behaviour.");

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

@@ -1,7 +1,7 @@
 import { __read, __spreadArray } from 'tslib';
 import * as React from 'react';
 import { useContext, useRef, cloneElement, Children, isValidElement } from 'react';
-import process from '../../utils/process.mjs';
+import { env } from '../../utils/process.mjs';
 import { useForceUpdate } from '../../utils/use-force-update.mjs';
 import { useIsMounted } from '../../utils/use-is-mounted.mjs';
 import { PresenceChild } from './PresenceChild.mjs';
@@ -144,7 +144,7 @@ var AnimatePresence = function (_a) {
         var key = child.key;
         return exiting.has(key) ? (child) : (React.createElement(PresenceChild, { key: getChildKey(child), isPresent: true, presenceAffectsLayout: presenceAffectsLayout }, child));
     });
-    if (process.env.NODE_ENV !== "production" &&
+    if (env !== "production" &&
         exitBeforeEnter &&
         childrenToRender.length > 1) {
         console.warn("You're attempting to animate multiple children within AnimatePresence, but its exitBeforeEnter prop is set to true. This will lead to odd visual behaviour.");

package/dist/es/motion/features/use-features.mjs

@@ -1,7 +1,7 @@
 import { __assign } from 'tslib';
 import * as React from 'react';
 import { useContext } from 'react';
-import process from '../../utils/process.mjs';
+import { env } from '../../utils/process.mjs';
 import { featureDefinitions } from './definitions.mjs';
 import { invariant } from 'hey-listen';
 import { LazyContext } from '../../context/LazyContext.mjs';
@@ -20,9 +20,7 @@ function useFeatures(props, visualElement, preloadedFeatures) {
      * If we're in development mode, check to make sure we're not rendering a motion component
      * as a child of LazyMotion, as this will break the file-size benefits of using it.
      */
-    if (process.env.NODE_ENV !== "production" &&
-        preloadedFeatures &&
-        lazyContext.strict) {
+    if (env !== "production" && preloadedFeatures && lazyContext.strict) {
         invariant(false, "You have rendered a `motion` component within a `LazyMotion` component. This will break tree shaking. Import and render a `m` component instead.");
     }
     for (var i = 0; i < numFeatures; i++) {

package/dist/es/motion/features/viewport/use-viewport.mjs

@@ -1,4 +1,4 @@
-import process from '../../../utils/process.mjs';
+import { env } from '../../../utils/process.mjs';
 import { useRef, useEffect } from 'react';
 import { AnimationType } from '../../../render/utils/types.mjs';
 import { warnOnce } from '../../../utils/warn-once.mjs';
@@ -75,7 +75,7 @@ function useMissingIntersectionObserver(shouldObserve, state, visualElement, _a)
     useEffect(function () {
         if (!shouldObserve || !fallback)
             return;
-        if (process.env.NODE_ENV !== "production") {
+        if (env !== "production") {
             warnOnce(false, "IntersectionObserver not available on this device. whileInView animations will trigger on mount.");
         }
         /**

package/dist/es/projection/styles/transform.mjs

@@ -1,4 +1,4 @@
-var identityProjection = "translate3d(0px, 0px, 0) scale(1, 1)";
+var identityProjection = "translate3d(0px, 0px, 0) scale(1, 1) scale(1, 1)";
 function buildProjectionTransform(delta, treeScale, latestTransform) {
     /**
      * The translations we use to calculate are always relative to the viewport coordinate space.
@@ -9,6 +9,11 @@ function buildProjectionTransform(delta, treeScale, latestTransform) {
     var xTranslate = delta.x.translate / treeScale.x;
     var yTranslate = delta.y.translate / treeScale.y;
     var transform = "translate3d(".concat(xTranslate, "px, ").concat(yTranslate, "px, 0) ");
+    /**
+     * Apply scale correction for the tree transform.
+     * This will apply scale to the screen-orientated axes.
+     */
+    transform += "scale(".concat(1 / treeScale.x, ", ").concat(1 / treeScale.y, ") ");
     if (latestTransform) {
         var rotate = latestTransform.rotate, rotateX = latestTransform.rotateX, rotateY = latestTransform.rotateY;
         if (rotate)
@@ -18,7 +23,13 @@ function buildProjectionTransform(delta, treeScale, latestTransform) {
         if (rotateY)
             transform += "rotateY(".concat(rotateY, "deg) ");
     }
-    transform += "scale(".concat(delta.x.scale, ", ").concat(delta.y.scale, ")");
+    /**
+     * Apply scale to match the size of the element to the size we want it.
+     * This will apply scale to the element-orientated axes.
+     */
+    var elementScaleX = delta.x.scale * treeScale.x;
+    var elementScaleY = delta.y.scale * treeScale.y;
+    transform += "scale(".concat(elementScaleX, ", ").concat(elementScaleY, ")");
     return transform === identityProjection ? "none" : transform;
 }
 

package/dist/es/render/utils/motion-values.mjs

@@ -18,7 +18,7 @@ function updateMotionValuesFromProps(element, next, prev) {
              * and warn against mismatches.
              */
             if (process.env.NODE_ENV === "development") {
-                warnOnce(nextValue.version !== "6.3.8", "Attempting to mix Framer Motion versions ".concat(nextValue.version, " with 6.3.8 may not work as expected."));
+                warnOnce(nextValue.version === "6.3.11", "Attempting to mix Framer Motion versions ".concat(nextValue.version, " with 6.3.11 may not work as expected."));
             }
         }
         else if (isMotionValue(prevValue)) {

package/dist/es/utils/process.mjs

@@ -1,9 +1,9 @@
 /**
  * Browser-safe usage of process
  */
-var mockProcess = { env: { NODE_ENV: "production" } };
-var safeProcess = typeof process === "undefined" ? mockProcess : process;
-// eslint-disable-next-line import/no-default-export
-var process$1 = safeProcess;
+var defaultEnvironment = "production";
+var env = typeof process === "undefined" || process.env === undefined
+    ? defaultEnvironment
+    : process.env.NODE_ENV || defaultEnvironment;
 
-export { process$1 as default };
+export { env };

package/dist/es/value/index.mjs

@@ -25,7 +25,7 @@ var MotionValue = /** @class */ (function () {
          * This will be replaced by the build step with the latest version number.
          * When MotionValues are provided to motion components, warn if versions are mixed.
          */
-        this.version = "6.3.8";
+        this.version = "6.3.11";
         /**
          * Duration, in milliseconds, since last updating frame.
          *

package/dist/framer-motion.dev.js

@@ -120,6 +120,14 @@
         return to.concat(ar || Array.prototype.slice.call(from));
     }
 
+    /**
+     * Browser-safe usage of process
+     */
+    var defaultEnvironment = "production";
+    var env = typeof process === "undefined" || process.env === undefined
+        ? defaultEnvironment
+        : "development" ;
+
     var createDefinition = function (propNames) { return ({
         isEnabled: function (props) { return propNames.some(function (name) { return !!props[name]; }); },
     }); };
@@ -196,8 +204,7 @@
          * If we're in development mode, check to make sure we're not rendering a motion component
          * as a child of LazyMotion, as this will break the file-size benefits of using it.
          */
-        if (preloadedFeatures &&
-            lazyContext.strict) {
+        if (env !== "production" && preloadedFeatures && lazyContext.strict) {
             invariant(false, "You have rendered a `motion` component within a `LazyMotion` component. This will break tree shaking. Import and render a `m` component instead.");
         }
         for (var i = 0; i < numFeatures; i++) {
@@ -1699,7 +1706,7 @@
              * This will be replaced by the build step with the latest version number.
              * When MotionValues are provided to motion components, warn if versions are mixed.
              */
-            this.version = "6.3.8";
+            this.version = "6.3.11";
             /**
              * Duration, in milliseconds, since last updating frame.
              *
@@ -2923,7 +2930,7 @@
         Object.assign(scaleCorrectors, correctors);
     }
 
-    var identityProjection = "translate3d(0px, 0px, 0) scale(1, 1)";
+    var identityProjection = "translate3d(0px, 0px, 0) scale(1, 1) scale(1, 1)";
     function buildProjectionTransform(delta, treeScale, latestTransform) {
         /**
          * The translations we use to calculate are always relative to the viewport coordinate space.
@@ -2934,6 +2941,11 @@
         var xTranslate = delta.x.translate / treeScale.x;
         var yTranslate = delta.y.translate / treeScale.y;
         var transform = "translate3d(".concat(xTranslate, "px, ").concat(yTranslate, "px, 0) ");
+        /**
+         * Apply scale correction for the tree transform.
+         * This will apply scale to the screen-orientated axes.
+         */
+        transform += "scale(".concat(1 / treeScale.x, ", ").concat(1 / treeScale.y, ") ");
         if (latestTransform) {
             var rotate = latestTransform.rotate, rotateX = latestTransform.rotateX, rotateY = latestTransform.rotateY;
             if (rotate)
@@ -2943,7 +2955,13 @@
             if (rotateY)
                 transform += "rotateY(".concat(rotateY, "deg) ");
         }
-        transform += "scale(".concat(delta.x.scale, ", ").concat(delta.y.scale, ")");
+        /**
+         * Apply scale to match the size of the element to the size we want it.
+         * This will apply scale to the element-orientated axes.
+         */
+        var elementScaleX = delta.x.scale * treeScale.x;
+        var elementScaleY = delta.y.scale * treeScale.y;
+        transform += "scale(".concat(elementScaleX, ", ").concat(elementScaleY, ")");
         return transform === identityProjection ? "none" : transform;
     }
 
@@ -5562,7 +5580,7 @@
         React.useEffect(function () {
             if (!shouldObserve || !fallback)
                 return;
-            {
+            if (env !== "production") {
                 warnOnce(false, "IntersectionObserver not available on this device. whileInView animations will trigger on mount.");
             }
             /**
@@ -7197,7 +7215,7 @@
                  * and warn against mismatches.
                  */
                 {
-                    warnOnce(nextValue.version !== "6.3.8", "Attempting to mix Framer Motion versions ".concat(nextValue.version, " with 6.3.8 may not work as expected."));
+                    warnOnce(nextValue.version === "6.3.11", "Attempting to mix Framer Motion versions ".concat(nextValue.version, " with 6.3.11 may not work as expected."));
                 }
             }
             else if (isMotionValue(prevValue)) {
@@ -8584,7 +8602,8 @@
             var key = child.key;
             return exiting.has(key) ? (child) : (React__namespace.createElement(PresenceChild, { key: getChildKey(child), isPresent: true, presenceAffectsLayout: presenceAffectsLayout }, child));
         });
-        if (exitBeforeEnter &&
+        if (env !== "production" &&
+            exitBeforeEnter &&
             childrenToRender.length > 1) {
             console.warn("You're attempting to animate multiple children within AnimatePresence, but its exitBeforeEnter prop is set to true. This will lead to odd visual behaviour.");
         }