motion 11.16.4 → 11.16.7

package/dist/cjs/react-m.js

@@ -650,8 +650,6 @@ function renderSVG(element, renderState, _styleProp, projection) {
 
 const isMotionValue = (value) => Boolean(value && value.getVelocity);
 
-const scaleCorrectors = {};
-
 /**
  * Generate a list of every possible transform key.
  */
@@ -679,6 +677,8 @@ const transformPropOrder = [
  */
 const transformProps = new Set(transformPropOrder);
 
+const scaleCorrectors = {};
+
 function isForcedMotionValue(key, { layout, layoutId }) {
     return (transformProps.has(key) ||
         key.startsWith("origin") ||
@@ -866,6 +866,10 @@ const createSvgRenderState = () => ({
     attrs: {},
 });
 
+const checkStringStartsWith = (token) => (key) => typeof key === "string" && key.startsWith(token);
+const isCSSVariableName = 
+/*@__PURE__*/ checkStringStartsWith("--");
+
 /**
  * Provided a value and a ValueType, returns the value as that value type.
  */
@@ -1049,10 +1053,6 @@ function buildTransform(latestValues, transform, transformTemplate) {
     return transformString;
 }
 
-const checkStringStartsWith = (token) => (key) => typeof key === "string" && key.startsWith(token);
-const isCSSVariableName = 
-/*@__PURE__*/ checkStringStartsWith("--");
-
 function buildHTMLStyles(state, latestValues, transformTemplate) {
     const { style, vars, transformOrigin } = state;
     // Track whether we encounter any transform or transformOrigin values.

package/dist/es/framer-motion/dist/es/animation/animate/index.mjs

@@ -4,7 +4,7 @@ import { animateSequence } from './sequence.mjs';
 import { animateSubject } from './subject.mjs';
 
 function isSequence(value) {
-    return Array.isArray(value) && Array.isArray(value[0]);
+    return Array.isArray(value) && value.some(Array.isArray);
 }
 /**
  * Creates an animation function that is optionally scoped

package/dist/es/framer-motion/dist/es/animation/interfaces/visual-element-target.mjs

@@ -1,6 +1,6 @@
 import '../../../../../motion-utils/dist/es/errors.mjs';
 import { getValueTransition } from '../../../../../motion-dom/dist/es/animation/utils/get-value-transition.mjs';
-import { transformProps } from '../../render/html/utils/transform.mjs';
+import { positionalKeys } from '../../render/html/utils/keys-position.mjs';
 import { setTarget } from '../../render/utils/setters.mjs';
 import { addValueToWillChange } from '../../value/use-will-change/add-will-change.mjs';
 import { getOptimisedAppearId } from '../optimized-appear/get-appear-id.mjs';
@@ -55,7 +55,7 @@ function animateTarget(visualElement, targetAndTransition, { delay = 0, transiti
             }
         }
         addValueToWillChange(visualElement, key);
-        value.start(animateMotionValue(key, value, valueTarget, visualElement.shouldReduceMotion && transformProps.has(key)
+        value.start(animateMotionValue(key, value, valueTarget, visualElement.shouldReduceMotion && positionalKeys.has(key)
             ? { type: false }
             : valueTransition, visualElement, isHandoff));
         const animation = value.animation;

package/dist/es/framer-motion/dist/es/animation/optimized-appear/store-id.mjs

@@ -1,4 +1,4 @@
-import { transformProps } from '../../render/html/utils/transform.mjs';
+import { transformProps } from '../../render/html/utils/keys-transform.mjs';
 
 const appearStoreId = (elementId, valueName) => {
     const key = transformProps.has(valueName) ? "transform" : valueName;

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

@@ -1,4 +1,4 @@
-import { transformProps } from '../../render/html/utils/transform.mjs';
+import { transformProps } from '../../render/html/utils/keys-transform.mjs';
 
 const underDampedSpring = {
     type: "spring",

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

@@ -1,5 +1,5 @@
 import { scaleCorrectors } from '../../projection/styles/scale-correction.mjs';
-import { transformProps } from '../../render/html/utils/transform.mjs';
+import { transformProps } from '../../render/html/utils/keys-transform.mjs';
 
 function isForcedMotionValue(key, { layout, layoutId }) {
     return (transformProps.has(key) ||

package/dist/es/framer-motion/dist/es/render/VisualElement.mjs

@@ -1,23 +1,23 @@
+import { time } from '../frameloop/sync-time.mjs';
+import { featureDefinitions } from '../motion/features/definitions.mjs';
+import { createBox } from '../projection/geometry/models.mjs';
+import { isNumericalString } from '../utils/is-numerical-string.mjs';
+import { isZeroValueString } from '../utils/is-zero-value-string.mjs';
 import { initPrefersReducedMotion } from '../utils/reduced-motion/index.mjs';
 import { hasReducedMotionListener, prefersReducedMotion } from '../utils/reduced-motion/state.mjs';
 import { SubscriptionManager } from '../utils/subscription-manager.mjs';
+import { warnOnce } from '../utils/warn-once.mjs';
 import { motionValue } from '../value/index.mjs';
+import { complex } from '../value/types/complex/index.mjs';
 import { isMotionValue } from '../value/utils/is-motion-value.mjs';
-import { transformProps } from './html/utils/transform.mjs';
+import { getAnimatableNone } from './dom/value-types/animatable-none.mjs';
+import { findValueType } from './dom/value-types/find.mjs';
+import { transformProps } from './html/utils/keys-transform.mjs';
+import { visualElementStore } from './store.mjs';
 import { isControllingVariants, isVariantNode } from './utils/is-controlling-variants.mjs';
+import { KeyframeResolver } from './utils/KeyframesResolver.mjs';
 import { updateMotionValuesFromProps } from './utils/motion-values.mjs';
 import { resolveVariantFromProps } from './utils/resolve-variants.mjs';
-import { warnOnce } from '../utils/warn-once.mjs';
-import { featureDefinitions } from '../motion/features/definitions.mjs';
-import { visualElementStore } from './store.mjs';
-import { KeyframeResolver } from './utils/KeyframesResolver.mjs';
-import { isNumericalString } from '../utils/is-numerical-string.mjs';
-import { isZeroValueString } from '../utils/is-zero-value-string.mjs';
-import { findValueType } from './dom/value-types/find.mjs';
-import { complex } from '../value/types/complex/index.mjs';
-import { getAnimatableNone } from './dom/value-types/animatable-none.mjs';
-import { createBox } from '../projection/geometry/models.mjs';
-import { time } from '../frameloop/sync-time.mjs';
 import { frame, cancelFrame } from '../frameloop/frame.mjs';
 
 const propEventHandlers = [

package/dist/es/framer-motion/dist/es/render/dom/DOMKeyframesResolver.mjs

@@ -1,10 +1,11 @@
 import { isNone } from '../../animation/utils/is-none.mjs';
+import { positionalKeys } from '../html/utils/keys-position.mjs';
+import { makeNoneKeyframesAnimatable } from '../html/utils/make-none-animatable.mjs';
+import { KeyframeResolver } from '../utils/KeyframesResolver.mjs';
 import { getVariableValue } from './utils/css-variables-conversion.mjs';
 import { isCSSVariableToken } from './utils/is-css-variable.mjs';
-import { positionalKeys, isNumOrPxType, positionalValues } from './utils/unit-conversion.mjs';
+import { isNumOrPxType, positionalValues } from './utils/unit-conversion.mjs';
 import { findDimensionValueType } from './value-types/dimensions.mjs';
-import { KeyframeResolver } from '../utils/KeyframesResolver.mjs';
-import { makeNoneKeyframesAnimatable } from '../html/utils/make-none-animatable.mjs';
 
 class DOMKeyframesResolver extends KeyframeResolver {
     constructor(unresolvedKeyframes, onComplete, name, motionValue, element) {

package/dist/es/framer-motion/dist/es/render/dom/scroll/offsets/index.mjs

@@ -1,8 +1,9 @@
-import { calcInset } from './inset.mjs';
-import { ScrollOffset } from './presets.mjs';
-import { resolveOffset } from './offset.mjs';
+import { clamp } from '../../../../utils/clamp.mjs';
 import { interpolate } from '../../../../utils/interpolate.mjs';
 import { defaultOffset } from '../../../../utils/offsets/default.mjs';
+import { calcInset } from './inset.mjs';
+import { resolveOffset } from './offset.mjs';
+import { ScrollOffset } from './presets.mjs';
 
 const point = { x: 0, y: 0 };
 function getTargetSize(target) {
@@ -50,10 +51,10 @@ function resolveOffsets(container, info, options) {
      * to map scroll value into a progress.
      */
     if (hasChanged) {
-        info[axis].interpolate = interpolate(info[axis].offset, defaultOffset(offsetDefinition));
+        info[axis].interpolate = interpolate(info[axis].offset, defaultOffset(offsetDefinition), { clamp: false });
         info[axis].interpolatorOffsets = [...info[axis].offset];
     }
-    info[axis].progress = info[axis].interpolate(info[axis].current);
+    info[axis].progress = clamp(0, 1, info[axis].interpolate(info[axis].current));
 }
 
 export { resolveOffsets };

package/dist/es/framer-motion/dist/es/render/dom/utils/unit-conversion.mjs

@@ -1,19 +1,7 @@
-import { transformPropOrder } from '../../html/utils/transform.mjs';
 import { number } from '../../../value/types/numbers/index.mjs';
 import { px } from '../../../value/types/numbers/units.mjs';
+import { transformPropOrder } from '../../html/utils/keys-transform.mjs';
 
-const positionalKeys = new Set([
-    "width",
-    "height",
-    "top",
-    "left",
-    "right",
-    "bottom",
-    "x",
-    "y",
-    "translateX",
-    "translateY",
-]);
 const isNumOrPxType = (v) => v === number || v === px;
 const getPosFromMatrix = (matrix, pos) => parseFloat(matrix.split(", ")[pos]);
 const getTranslateFromMatrix = (pos2, pos3) => (_bbox, { transform }) => {
@@ -62,4 +50,4 @@ const positionalValues = {
 positionalValues.translateX = positionalValues.x;
 positionalValues.translateY = positionalValues.y;
 
-export { isNumOrPxType, positionalKeys, positionalValues, removeNonTranslationalTransform };
+export { isNumOrPxType, positionalValues, removeNonTranslationalTransform };

package/dist/es/framer-motion/dist/es/render/html/HTMLVisualElement.mjs

@@ -1,11 +1,11 @@
-import { buildHTMLStyles } from './utils/build-styles.mjs';
-import { isCSSVariableName } from '../dom/utils/is-css-variable.mjs';
-import { transformProps } from './utils/transform.mjs';
-import { scrapeMotionValuesFromProps } from './utils/scrape-motion-values.mjs';
-import { renderHTML } from './utils/render.mjs';
-import { getDefaultValueType } from '../dom/value-types/defaults.mjs';
 import { measureViewportBox } from '../../projection/utils/measure.mjs';
 import { DOMVisualElement } from '../dom/DOMVisualElement.mjs';
+import { isCSSVariableName } from '../dom/utils/is-css-variable.mjs';
+import { getDefaultValueType } from '../dom/value-types/defaults.mjs';
+import { buildHTMLStyles } from './utils/build-styles.mjs';
+import { transformProps } from './utils/keys-transform.mjs';
+import { renderHTML } from './utils/render.mjs';
+import { scrapeMotionValuesFromProps } from './utils/scrape-motion-values.mjs';
 
 function getComputedStyle(element) {
     return window.getComputedStyle(element);

package/dist/es/framer-motion/dist/es/render/html/utils/build-styles.mjs

@@ -1,8 +1,8 @@
-import { buildTransform } from './build-transform.mjs';
 import { isCSSVariableName } from '../../dom/utils/is-css-variable.mjs';
-import { transformProps } from './transform.mjs';
 import { getValueAsType } from '../../dom/value-types/get-as-type.mjs';
 import { numberValueTypes } from '../../dom/value-types/number.mjs';
+import { buildTransform } from './build-transform.mjs';
+import { transformProps } from './keys-transform.mjs';
 
 function buildHTMLStyles(state, latestValues, transformTemplate) {
     const { style, vars, transformOrigin } = state;

package/dist/es/framer-motion/dist/es/render/html/utils/build-transform.mjs

@@ -1,6 +1,6 @@
-import { transformPropOrder } from './transform.mjs';
 import { getValueAsType } from '../../dom/value-types/get-as-type.mjs';
 import { numberValueTypes } from '../../dom/value-types/number.mjs';
+import { transformPropOrder } from './keys-transform.mjs';
 
 const translateAlias = {
     x: "translateX",

package/dist/es/framer-motion/dist/es/render/html/utils/keys-position.mjs

@@ -0,0 +1,13 @@
+import { transformPropOrder } from './keys-transform.mjs';
+
+const positionalKeys = new Set([
+    "width",
+    "height",
+    "top",
+    "left",
+    "right",
+    "bottom",
+    ...transformPropOrder,
+]);
+
+export { positionalKeys };

package/dist/es/framer-motion/dist/es/render/svg/SVGVisualElement.mjs

@@ -1,13 +1,13 @@
-import { scrapeMotionValuesFromProps } from './utils/scrape-motion-values.mjs';
+import { createBox } from '../../projection/geometry/models.mjs';
 import { DOMVisualElement } from '../dom/DOMVisualElement.mjs';
-import { buildSVGAttrs } from './utils/build-attrs.mjs';
 import { camelToDash } from '../dom/utils/camel-to-dash.mjs';
-import { camelCaseAttributes } from './utils/camel-case-attrs.mjs';
-import { transformProps } from '../html/utils/transform.mjs';
-import { renderSVG } from './utils/render.mjs';
 import { getDefaultValueType } from '../dom/value-types/defaults.mjs';
-import { createBox } from '../../projection/geometry/models.mjs';
+import { transformProps } from '../html/utils/keys-transform.mjs';
+import { buildSVGAttrs } from './utils/build-attrs.mjs';
+import { camelCaseAttributes } from './utils/camel-case-attrs.mjs';
 import { isSVGTag } from './utils/is-svg-tag.mjs';
+import { renderSVG } from './utils/render.mjs';
+import { scrapeMotionValuesFromProps } from './utils/scrape-motion-values.mjs';
 
 class SVGVisualElement extends DOMVisualElement {
     constructor() {

package/dist/es/framer-motion/dist/es/render/svg/utils/scrape-motion-values.mjs

@@ -1,6 +1,6 @@
 import { isMotionValue } from '../../../value/utils/is-motion-value.mjs';
+import { transformPropOrder } from '../../html/utils/keys-transform.mjs';
 import { scrapeMotionValuesFromProps as scrapeMotionValuesFromProps$1 } from '../../html/utils/scrape-motion-values.mjs';
-import { transformPropOrder } from '../../html/utils/transform.mjs';
 
 function scrapeMotionValuesFromProps(props, prevProps, visualElement) {
     const newValues = scrapeMotionValuesFromProps$1(props, prevProps, visualElement);

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

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

package/dist/es/framer-motion/dist/es/utils/interpolate.mjs

@@ -47,8 +47,9 @@ function interpolate(input, output, { clamp: isClamp = true, ease, mixer } = {})
      */
     if (inputLength === 1)
         return () => output[0];
-    if (inputLength === 2 && input[0] === input[1])
+    if (inputLength === 2 && output[0] === output[1])
         return () => output[1];
+    const isZeroDeltaRange = input[0] === input[1];
     // If input runs highest -> lowest, reverse both arrays
     if (input[0] > input[inputLength - 1]) {
         input = [...input].reverse();
@@ -57,6 +58,8 @@ function interpolate(input, output, { clamp: isClamp = true, ease, mixer } = {})
     const mixers = createMixers(output, ease, mixer);
     const numMixers = mixers.length;
     const interpolator = (v) => {
+        if (isZeroDeltaRange && v < input[0])
+            return output[0];
         let i = 0;
         if (numMixers > 1) {
             for (; i < input.length - 2; i++) {

package/dist/es/framer-motion/dist/es/value/index.mjs

@@ -34,7 +34,7 @@ class MotionValue {
          * 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 = "11.16.4";
+        this.version = "11.16.7";
         /**
          * Tracks whether this value can output a velocity. Currently this is only true
          * if the value is numerical, but we might be able to widen the scope here and support

package/dist/es/framer-motion/dist/es/value/use-will-change/get-will-change-name.mjs

@@ -1,6 +1,6 @@
 import { acceleratedValues } from '../../animation/animators/utils/accelerated-values.mjs';
 import { camelToDash } from '../../render/dom/utils/camel-to-dash.mjs';
-import { transformProps } from '../../render/html/utils/transform.mjs';
+import { transformProps } from '../../render/html/utils/keys-transform.mjs';
 
 function getWillChangeName(name) {
     if (transformProps.has(name)) {