framer-motion 6.3.10 → 6.3.13

package/dist/cjs/index.js

@@ -472,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.10";
+        this.version = "6.3.13";
         /**
          * Duration, in milliseconds, since last updating frame.
          *
@@ -599,7 +599,7 @@ var MotionValue = /** @class */ (function () {
      * }
      * ```
      *
-     * @internalremarks
+     * @privateRemarks
      *
      * We could look into a `useOnChange` hook if the above lifecycle management proves confusing.
      *
@@ -751,9 +751,6 @@ var MotionValue = /** @class */ (function () {
     };
     return MotionValue;
 }());
-/**
- * @internal
- */
 function motionValue(init) {
     return new MotionValue(init);
 }
@@ -1159,8 +1156,6 @@ function getValueTransition(transition, key) {
 /**
  * Start animation on a MotionValue. This function is an interface between
  * Framer Motion and Popmotion
- *
- * @internal
  */
 function startAnimation(key, value, target, transition) {
     if (transition === void 0) { transition = {}; }
@@ -1696,7 +1691,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.
@@ -1707,6 +1702,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)
@@ -1716,7 +1716,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;
 }
 
@@ -1793,8 +1799,6 @@ var FlatTree = /** @class */ (function () {
  * If the provided value is a MotionValue, this returns the actual value, otherwise just the value itself
  *
  * TODO: Remove and move to library
- *
- * @internal
  */
 function resolveMotionValue(value) {
     var unwrappedValue = isMotionValue(value) ? value.get() : value;
@@ -2995,9 +2999,6 @@ function useProjectionId() {
     });
 }
 
-/**
- * @internal
- */
 var LayoutGroupContext = React.createContext({});
 
 /**
@@ -3066,8 +3067,6 @@ var VisualElementHandler = /** @class */ (function (_super) {
  *
  * Alongside this is a config option which provides a way of rendering the provided
  * component "offline", or outside the React render cycle.
- *
- * @internal
  */
 function createMotionComponent(_a) {
     var preloadedFeatures = _a.preloadedFeatures, createVisualElement = _a.createVisualElement, projectionNodeConstructor = _a.projectionNodeConstructor, useRender = _a.useRender, useVisualState = _a.useVisualState, Component = _a.Component;
@@ -3445,7 +3444,7 @@ function useHTMLProps(props, visualState, isStatic) {
 /**
  * A list of all valid MotionProps.
  *
- * @internalremarks
+ * @privateRemarks
  * This doesn't throw if a `MotionProp` name is missing - it should.
  */
 var validMotionProps = new Set([
@@ -4603,9 +4602,6 @@ function getOrigin(target, transition, visualElement) {
     return origin;
 }
 
-/**
- * @internal
- */
 function animateVisualElement(visualElement, definition, options) {
     if (options === void 0) { options = {}; }
     visualElement.notifyAnimationStart(definition);
@@ -5868,7 +5864,7 @@ function useDrag(props) {
  * @param handlers -
  * @param ref -
  *
- * @internalremarks
+ * @privateRemarks
  * Currently this sets new pan gesture functions every render. The memo route has been explored
  * in the past but ultimately we're still creating new functions every render. An optimisation
  * to explore is creating the pan gestures and loading them into a `ref`.
@@ -5970,7 +5966,7 @@ function updateMotionValuesFromProps(element, next, prev) {
              * and warn against mismatches.
              */
             if (process.env.NODE_ENV === "development") {
-                warnOnce(nextValue.version === "6.3.10", "Attempting to mix Framer Motion versions ".concat(nextValue.version, " with 6.3.10 may not work as expected."));
+                warnOnce(nextValue.version === "6.3.13", "Attempting to mix Framer Motion versions ".concat(nextValue.version, " with 6.3.13 may not work as expected."));
             }
         }
         else if (isMotionValue(prevValue)) {
@@ -7368,7 +7364,6 @@ var AnimatePresence = function (_a) {
 };
 
 /**
- * @internal
  * @deprecated
  */
 var DeprecatedLayoutGroupContext = React.createContext(null);
@@ -8323,7 +8318,6 @@ var useVisualState = makeUseVisualState({
 /**
  * This is not an officially supported API and may be removed
  * on any version.
- * @internal
  */
 function useAnimatedState(initialState) {
     var _a = tslib.__read(React.useState(initialState), 2), animationState = _a[0], setAnimationState = _a[1];
@@ -8374,7 +8368,6 @@ var hasWarned = false;
  * ```
  *
  * @deprecated
- * @internal
  */
 function useInvertedScale(scale) {
     var parentScaleX = useMotionValue(1);

package/dist/es/animation/use-animated-state.mjs

@@ -33,7 +33,6 @@ var useVisualState = makeUseVisualState({
 /**
  * This is not an officially supported API and may be removed
  * on any version.
- * @internal
  */
 function useAnimatedState(initialState) {
     var _a = __read(useState(initialState), 2), animationState = _a[0], setAnimationState = _a[1];

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

@@ -180,8 +180,6 @@ function getValueTransition(transition, key) {
 /**
  * Start animation on a MotionValue. This function is an interface between
  * Framer Motion and Popmotion
- *
- * @internal
  */
 function startAnimation(key, value, target, transition) {
     if (transition === void 0) { transition = {}; }

package/dist/es/context/DeprecatedLayoutGroupContext.mjs

@@ -1,7 +1,6 @@
 import { createContext } from 'react';
 
 /**
- * @internal
  * @deprecated
  */
 var DeprecatedLayoutGroupContext = createContext(null);

package/dist/es/context/LayoutGroupContext.mjs

@@ -1,8 +1,5 @@
 import { createContext } from 'react';
 
-/**
- * @internal
- */
 var LayoutGroupContext = createContext({});
 
 export { LayoutGroupContext };

package/dist/es/gestures/use-pan-gesture.mjs

@@ -9,7 +9,7 @@ import { PanSession } from './PanSession.mjs';
  * @param handlers -
  * @param ref -
  *
- * @internalremarks
+ * @privateRemarks
  * Currently this sets new pan gesture functions every render. The memo route has been explored
  * in the past but ultimately we're still creating new functions every render. An optimisation
  * to explore is creating the pan gestures and loading them into a `ref`.

package/dist/es/motion/index.mjs

@@ -22,8 +22,6 @@ import { VisualElementHandler } from './utils/VisualElementHandler.mjs';
  *
  * Alongside this is a config option which provides a way of rendering the provided
  * component "offline", or outside the React render cycle.
- *
- * @internal
  */
 function createMotionComponent(_a) {
     var preloadedFeatures = _a.preloadedFeatures, createVisualElement = _a.createVisualElement, projectionNodeConstructor = _a.projectionNodeConstructor, useRender = _a.useRender, useVisualState = _a.useVisualState, Component = _a.Component;

package/dist/es/motion/utils/valid-prop.mjs

@@ -1,7 +1,7 @@
 /**
  * A list of all valid MotionProps.
  *
- * @internalremarks
+ * @privateRemarks
  * This doesn't throw if a `MotionProp` name is missing - it should.
  */
 var validMotionProps = new Set([

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/animation.mjs

@@ -4,9 +4,6 @@ import { setTarget } from './setters.mjs';
 import { resolveVariant } from './variants.mjs';
 import { isTransformProp } from '../html/utils/transform.mjs';
 
-/**
- * @internal
- */
 function animateVisualElement(visualElement, definition, options) {
     if (options === void 0) { options = {}; }
     visualElement.notifyAnimationStart(definition);

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.10", "Attempting to mix Framer Motion versions ".concat(nextValue.version, " with 6.3.10 may not work as expected."));
+                warnOnce(nextValue.version === "6.3.13", "Attempting to mix Framer Motion versions ".concat(nextValue.version, " with 6.3.13 may not work as expected."));
             }
         }
         else if (isMotionValue(prevValue)) {

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.10";
+        this.version = "6.3.13";
         /**
          * Duration, in milliseconds, since last updating frame.
          *
@@ -152,7 +152,7 @@ var MotionValue = /** @class */ (function () {
      * }
      * ```
      *
-     * @internalremarks
+     * @privateRemarks
      *
      * We could look into a `useOnChange` hook if the above lifecycle management proves confusing.
      *
@@ -304,9 +304,6 @@ var MotionValue = /** @class */ (function () {
     };
     return MotionValue;
 }());
-/**
- * @internal
- */
 function motionValue(init) {
     return new MotionValue(init);
 }

package/dist/es/value/use-inverted-scale.mjs

@@ -29,7 +29,6 @@ var hasWarned = false;
  * ```
  *
  * @deprecated
- * @internal
  */
 function useInvertedScale(scale) {
     var parentScaleX = useMotionValue(1);

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

@@ -5,8 +5,6 @@ import { isMotionValue } from './is-motion-value.mjs';
  * If the provided value is a MotionValue, this returns the actual value, otherwise just the value itself
  *
  * TODO: Remove and move to library
- *
- * @internal
  */
 function resolveMotionValue(value) {
     var unwrappedValue = isMotionValue(value) ? value.get() : value;

package/dist/framer-motion.dev.js

@@ -1706,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.10";
+            this.version = "6.3.13";
             /**
              * Duration, in milliseconds, since last updating frame.
              *
@@ -1833,7 +1833,7 @@
          * }
          * ```
          *
-         * @internalremarks
+         * @privateRemarks
          *
          * We could look into a `useOnChange` hook if the above lifecycle management proves confusing.
          *
@@ -1985,9 +1985,6 @@
         };
         return MotionValue;
     }());
-    /**
-     * @internal
-     */
     function motionValue(init) {
         return new MotionValue(init);
     }
@@ -2393,8 +2390,6 @@
     /**
      * Start animation on a MotionValue. This function is an interface between
      * Framer Motion and Popmotion
-     *
-     * @internal
      */
     function startAnimation(key, value, target, transition) {
         if (transition === void 0) { transition = {}; }
@@ -2930,7 +2925,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.
@@ -2941,6 +2936,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)
@@ -2950,7 +2950,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;
     }
 
@@ -3027,8 +3033,6 @@
      * If the provided value is a MotionValue, this returns the actual value, otherwise just the value itself
      *
      * TODO: Remove and move to library
-     *
-     * @internal
      */
     function resolveMotionValue(value) {
         var unwrappedValue = isMotionValue(value) ? value.get() : value;
@@ -4229,9 +4233,6 @@
         });
     }
 
-    /**
-     * @internal
-     */
     var LayoutGroupContext = React.createContext({});
 
     /**
@@ -4300,8 +4301,6 @@
      *
      * Alongside this is a config option which provides a way of rendering the provided
      * component "offline", or outside the React render cycle.
-     *
-     * @internal
      */
     function createMotionComponent(_a) {
         var preloadedFeatures = _a.preloadedFeatures, createVisualElement = _a.createVisualElement, projectionNodeConstructor = _a.projectionNodeConstructor, useRender = _a.useRender, useVisualState = _a.useVisualState, Component = _a.Component;
@@ -4679,7 +4678,7 @@
     /**
      * A list of all valid MotionProps.
      *
-     * @internalremarks
+     * @privateRemarks
      * This doesn't throw if a `MotionProp` name is missing - it should.
      */
     var validMotionProps = new Set([
@@ -5837,9 +5836,6 @@
         return origin;
     }
 
-    /**
-     * @internal
-     */
     function animateVisualElement(visualElement, definition, options) {
         if (options === void 0) { options = {}; }
         visualElement.notifyAnimationStart(definition);
@@ -7102,7 +7098,7 @@
      * @param handlers -
      * @param ref -
      *
-     * @internalremarks
+     * @privateRemarks
      * Currently this sets new pan gesture functions every render. The memo route has been explored
      * in the past but ultimately we're still creating new functions every render. An optimisation
      * to explore is creating the pan gestures and loading them into a `ref`.
@@ -7204,7 +7200,7 @@
                  * and warn against mismatches.
                  */
                 {
-                    warnOnce(nextValue.version === "6.3.10", "Attempting to mix Framer Motion versions ".concat(nextValue.version, " with 6.3.10 may not work as expected."));
+                    warnOnce(nextValue.version === "6.3.13", "Attempting to mix Framer Motion versions ".concat(nextValue.version, " with 6.3.13 may not work as expected."));
                 }
             }
             else if (isMotionValue(prevValue)) {
@@ -8602,7 +8598,6 @@
     };
 
     /**
-     * @internal
      * @deprecated
      */
     var DeprecatedLayoutGroupContext = React.createContext(null);
@@ -9557,7 +9552,6 @@
     /**
      * This is not an officially supported API and may be removed
      * on any version.
-     * @internal
      */
     function useAnimatedState(initialState) {
         var _a = __read(React.useState(initialState), 2), animationState = _a[0], setAnimationState = _a[1];
@@ -9608,7 +9602,6 @@
      * ```
      *
      * @deprecated
-     * @internal
      */
     function useInvertedScale(scale) {
         var parentScaleX = useMotionValue(1);