motion 11.11.16 → 11.12.0

package/dist/cjs/react-client.js

@@ -1479,6 +1479,34 @@ class BaseAnimation {
     }
 }
 
+/*
+  Progress within given range
+
+  Given a lower limit and an upper limit, we return the progress
+  (expressed as a number 0-1) represented by the given value, and
+  limit that progress to within 0-1.
+
+  @param [number]: Lower limit
+  @param [number]: Upper limit
+  @param [number]: Value to find progress within given range
+  @return [number]: Progress of value within range as expressed 0-1
+*/
+const progress = (from, to, value) => {
+    const toFromDifference = to - from;
+    return toFromDifference === 0 ? 1 : (value - from) / toFromDifference;
+};
+
+const generateLinearEasing = (easing, duration, // as milliseconds
+resolution = 10 // as milliseconds
+) => {
+    let points = "";
+    const numPoints = Math.max(Math.round(duration / resolution), 2);
+    for (let i = 0; i < numPoints; i++) {
+        points += easing(progress(0, numPoints - 1, i)) + ", ";
+    }
+    return `linear(${points.substring(0, points.length - 2)})`;
+};
+
 /*
   Convert velocity into velocity per second
 
@@ -1495,21 +1523,43 @@ function calcGeneratorVelocity(resolveValue, t, current) {
     return velocityPerSecond(current - resolveValue(prevT), t - prevT);
 }
 
+const springDefaults = {
+    // Default spring physics
+    stiffness: 100,
+    damping: 10,
+    mass: 1.0,
+    velocity: 0.0,
+    // Default duration/bounce-based options
+    duration: 800, // in ms
+    bounce: 0.3,
+    visualDuration: 0.3, // in seconds
+    // Rest thresholds
+    restSpeed: {
+        granular: 0.01,
+        default: 2,
+    },
+    restDelta: {
+        granular: 0.005,
+        default: 0.5,
+    },
+    // Limits
+    minDuration: 0.01, // in seconds
+    maxDuration: 10.0, // in seconds
+    minDamping: 0.05,
+    maxDamping: 1,
+};
+
 const safeMin = 0.001;
-const minDuration = 0.01;
-const maxDuration$1 = 10.0;
-const minDamping = 0.05;
-const maxDamping = 1;
-function findSpring({ duration = 800, bounce = 0.25, velocity = 0, mass = 1, }) {
+function findSpring({ duration = springDefaults.duration, bounce = springDefaults.bounce, velocity = springDefaults.velocity, mass = springDefaults.mass, }) {
     let envelope;
     let derivative;
-    warning(duration <= secondsToMilliseconds(maxDuration$1), "Spring duration must be 10 seconds or less");
+    warning(duration <= secondsToMilliseconds(springDefaults.maxDuration), "Spring duration must be 10 seconds or less");
     let dampingRatio = 1 - bounce;
     /**
      * Restrict dampingRatio and duration to within acceptable ranges.
      */
-    dampingRatio = clamp(minDamping, maxDamping, dampingRatio);
-    duration = clamp(minDuration, maxDuration$1, millisecondsToSeconds(duration));
+    dampingRatio = clamp(springDefaults.minDamping, springDefaults.maxDamping, dampingRatio);
+    duration = clamp(springDefaults.minDuration, springDefaults.maxDuration, millisecondsToSeconds(duration));
     if (dampingRatio < 1) {
         /**
          * Underdamped spring
@@ -1553,8 +1603,8 @@ function findSpring({ duration = 800, bounce = 0.25, velocity = 0, mass = 1, })
     duration = secondsToMilliseconds(duration);
     if (isNaN(undampedFreq)) {
         return {
-            stiffness: 100,
-            damping: 10,
+            stiffness: springDefaults.stiffness,
+            damping: springDefaults.damping,
             duration,
         };
     }
@@ -1579,6 +1629,22 @@ function calcAngularFreq(undampedFreq, dampingRatio) {
     return undampedFreq * Math.sqrt(1 - dampingRatio * dampingRatio);
 }
 
+/**
+ * Implement a practical max duration for keyframe generation
+ * to prevent infinite loops
+ */
+const maxGeneratorDuration = 20000;
+function calcGeneratorDuration(generator) {
+    let duration = 0;
+    const timeStep = 50;
+    let state = generator.next(duration);
+    while (!state.done && duration < maxGeneratorDuration) {
+        duration += timeStep;
+        state = generator.next(duration);
+    }
+    return duration >= maxGeneratorDuration ? Infinity : duration;
+}
+
 const durationKeys = ["duration", "bounce"];
 const physicsKeys = ["stiffness", "damping", "mass"];
 function isSpringType(options, keys) {
@@ -1586,29 +1652,51 @@ function isSpringType(options, keys) {
 }
 function getSpringOptions(options) {
     let springOptions = {
-        velocity: 0.0,
-        stiffness: 100,
-        damping: 10,
-        mass: 1.0,
+        velocity: springDefaults.velocity,
+        stiffness: springDefaults.stiffness,
+        damping: springDefaults.damping,
+        mass: springDefaults.mass,
         isResolvedFromDuration: false,
         ...options,
     };
     // stiffness/damping/mass overrides duration/bounce
     if (!isSpringType(options, physicsKeys) &&
         isSpringType(options, durationKeys)) {
-        const derived = findSpring(options);
-        springOptions = {
-            ...springOptions,
-            ...derived,
-            mass: 1.0,
-        };
-        springOptions.isResolvedFromDuration = true;
+        if (options.visualDuration) {
+            const visualDuration = options.visualDuration;
+            const root = (2 * Math.PI) / (visualDuration * 1.2);
+            const stiffness = root * root;
+            const damping = 2 * clamp(0.05, 1, 1 - options.bounce) * Math.sqrt(stiffness);
+            springOptions = {
+                ...springOptions,
+                mass: springDefaults.mass,
+                stiffness,
+                damping,
+            };
+        }
+        else {
+            const derived = findSpring(options);
+            springOptions = {
+                ...springOptions,
+                ...derived,
+                mass: springDefaults.mass,
+            };
+            springOptions.isResolvedFromDuration = true;
+        }
     }
     return springOptions;
 }
-function spring({ keyframes, restDelta, restSpeed, ...options }) {
-    const origin = keyframes[0];
-    const target = keyframes[keyframes.length - 1];
+function spring(optionsOrVisualDuration = springDefaults.visualDuration, bounce = springDefaults.bounce) {
+    const options = typeof optionsOrVisualDuration !== "object"
+        ? {
+            visualDuration: optionsOrVisualDuration,
+            keyframes: [0, 1],
+            bounce,
+        }
+        : optionsOrVisualDuration;
+    let { restSpeed, restDelta } = options;
+    const origin = options.keyframes[0];
+    const target = options.keyframes[options.keyframes.length - 1];
     /**
      * This is the Iterator-spec return value. We ensure it's mutable rather than using a generator
      * to reduce GC during animation.
@@ -1630,8 +1718,12 @@ function spring({ keyframes, restDelta, restSpeed, ...options }) {
      * ratio between feeling good and finishing as soon as changes are imperceptible.
      */
     const isGranularScale = Math.abs(initialDelta) < 5;
-    restSpeed || (restSpeed = isGranularScale ? 0.01 : 2);
-    restDelta || (restDelta = isGranularScale ? 0.005 : 0.5);
+    restSpeed || (restSpeed = isGranularScale
+        ? springDefaults.restSpeed.granular
+        : springDefaults.restSpeed.default);
+    restDelta || (restDelta = isGranularScale
+        ? springDefaults.restDelta.granular
+        : springDefaults.restDelta.default);
     let resolveSpring;
     if (dampingRatio < 1) {
         const angularFreq = calcAngularFreq(undampedAngularFreq, dampingRatio);
@@ -1672,7 +1764,7 @@ function spring({ keyframes, restDelta, restSpeed, ...options }) {
                     dampedAngularFreq);
         };
     }
-    return {
+    const generator = {
         calculatedDuration: isResolvedFromDuration ? duration || null : null,
         next: (t) => {
             const current = resolveSpring(t);
@@ -1700,7 +1792,13 @@ function spring({ keyframes, restDelta, restSpeed, ...options }) {
             state.value = state.done ? target : current;
             return state;
         },
+        toString: () => {
+            const calculatedDuration = Math.min(calcGeneratorDuration(generator), maxGeneratorDuration);
+            const easing = generateLinearEasing((progress) => generator.next(calculatedDuration * progress).value, calculatedDuration, 30);
+            return calculatedDuration + "ms " + easing;
+        },
     };
+    return generator;
 }
 
 function inertia({ keyframes, velocity = 0.0, power = 0.8, timeConstant = 325, bounceDamping = 10, bounceStiffness = 500, modifyTarget, min, max, restDelta = 0.5, restSpeed, }) {
@@ -1834,23 +1932,6 @@ const easingDefinitionToFunction = (definition) => {
 const combineFunctions = (a, b) => (v) => b(a(v));
 const pipe = (...transformers) => transformers.reduce(combineFunctions);
 
-/*
-  Progress within given range
-
-  Given a lower limit and an upper limit, we return the progress
-  (expressed as a number 0-1) represented by the given value, and
-  limit that progress to within 0-1.
-
-  @param [number]: Lower limit
-  @param [number]: Upper limit
-  @param [number]: Value to find progress within given range
-  @return [number]: Progress of value within range as expressed 0-1
-*/
-const progress = (from, to, value) => {
-    const toFromDifference = to - from;
-    return toFromDifference === 0 ? 1 : (value - from) / toFromDifference;
-};
-
 /*
   Value in range from progress
 
@@ -2195,22 +2276,6 @@ function keyframes({ duration = 300, keyframes: keyframeValues, times, ease = "e
     };
 }
 
-/**
- * Implement a practical max duration for keyframe generation
- * to prevent infinite loops
- */
-const maxGeneratorDuration = 20000;
-function calcGeneratorDuration(generator) {
-    let duration = 0;
-    const timeStep = 50;
-    let state = generator.next(duration);
-    while (!state.done && duration < maxGeneratorDuration) {
-        duration += timeStep;
-        state = generator.next(duration);
-    }
-    return duration >= maxGeneratorDuration ? Infinity : duration;
-}
-
 const frameloopDriver = (update) => {
     const passTimestamp = ({ timestamp }) => update(timestamp);
     return {
@@ -2608,18 +2673,6 @@ const acceleratedValues = new Set([
     // "background-color"
 ]);
 
-// Create a linear easing point for every 10 ms
-const resolution = 10;
-const generateLinearEasing = (easing, duration // as milliseconds
-) => {
-    let points = "";
-    const numPoints = Math.max(Math.round(duration / resolution), 2);
-    for (let i = 0; i < numPoints; i++) {
-        points += easing(progress(0, numPoints - 1, i)) + ", ";
-    }
-    return `linear(${points.substring(0, points.length - 2)})`;
-};
-
 function memo(callback) {
     let result;
     return () => {
@@ -3295,7 +3348,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.11.16";
+        this.version = "11.12.0";
         /**
          * 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
@@ -9038,7 +9091,7 @@ function updateMotionValuesFromProps(element, next, prev) {
              * and warn against mismatches.
              */
             if (process.env.NODE_ENV === "development") {
-                warnOnce(nextValue.version === "11.11.16", `Attempting to mix Motion versions ${nextValue.version} with 11.11.16 may not work as expected.`);
+                warnOnce(nextValue.version === "11.12.0", `Attempting to mix Motion versions ${nextValue.version} with 11.12.0 may not work as expected.`);
             }
         }
         else if (isMotionValue(prevValue)) {

package/dist/cjs/react-mini.js

@@ -184,9 +184,8 @@ const progress = (from, to, value) => {
     return toFromDifference === 0 ? 1 : (value - from) / toFromDifference;
 };
 
-// Create a linear easing point for every 10 ms
-const resolution = 10;
-const generateLinearEasing = (easing, duration // as milliseconds
+const generateLinearEasing = (easing, duration, // as milliseconds
+resolution = 10 // as milliseconds
 ) => {
     let points = "";
     const numPoints = Math.max(Math.round(duration / resolution), 2);
@@ -424,6 +423,7 @@ class NativeAnimation {
             valueKeyframes = [valueKeyframes];
         }
         hydrateKeyframes(valueName, valueKeyframes, readInitialKeyframe);
+        // TODO: Replace this with toString()?
         if (isGenerator(options.type)) {
             const generatorOptions = createGeneratorEasing(options, 100, options.type);
             options.ease = supportsLinearEasing()
@@ -562,7 +562,7 @@ function animateElements(elementOrSelector, keyframes, options, scope) {
         for (const valueName in keyframes) {
             const valueKeyframes = keyframes[valueName];
             const valueOptions = {
-                ...getValueTransition(options, valueName),
+                ...getValueTransition(elementTransition, valueName),
             };
             valueOptions.duration = valueOptions.duration
                 ? secondsToMilliseconds(valueOptions.duration)

package/dist/es/framer-motion/dist/es/animation/animators/waapi/NativeAnimation.mjs

@@ -51,6 +51,7 @@ class NativeAnimation {
             valueKeyframes = [valueKeyframes];
         }
         hydrateKeyframes(valueName, valueKeyframes, readInitialKeyframe);
+        // TODO: Replace this with toString()?
         if (isGenerator(options.type)) {
             const generatorOptions = createGeneratorEasing(options, 100, options.type);
             options.ease = supportsLinearEasing()

package/dist/es/framer-motion/dist/es/animation/animators/waapi/animate-elements.mjs

@@ -21,7 +21,7 @@ function animateElements(elementOrSelector, keyframes, options, scope) {
         for (const valueName in keyframes) {
             const valueKeyframes = keyframes[valueName];
             const valueOptions = {
-                ...getValueTransition(options, valueName),
+                ...getValueTransition(elementTransition, valueName),
             };
             valueOptions.duration = valueOptions.duration
                 ? secondsToMilliseconds(valueOptions.duration)

package/dist/es/framer-motion/dist/es/animation/animators/waapi/utils/linear.mjs

@@ -1,8 +1,7 @@
 import { progress } from '../../../../utils/progress.mjs';
 
-// Create a linear easing point for every 10 ms
-const resolution = 10;
-const generateLinearEasing = (easing, duration // as milliseconds
+const generateLinearEasing = (easing, duration, // as milliseconds
+resolution = 10 // as milliseconds
 ) => {
     let points = "";
     const numPoints = Math.max(Math.round(duration / resolution), 2);

package/dist/es/framer-motion/dist/es/animation/generators/spring/defaults.mjs

@@ -0,0 +1,27 @@
+const springDefaults = {
+    // Default spring physics
+    stiffness: 100,
+    damping: 10,
+    mass: 1.0,
+    velocity: 0.0,
+    // Default duration/bounce-based options
+    duration: 800, // in ms
+    bounce: 0.3,
+    visualDuration: 0.3, // in seconds
+    // Rest thresholds
+    restSpeed: {
+        granular: 0.01,
+        default: 2,
+    },
+    restDelta: {
+        granular: 0.005,
+        default: 0.5,
+    },
+    // Limits
+    minDuration: 0.01, // in seconds
+    maxDuration: 10.0, // in seconds
+    minDamping: 0.05,
+    maxDamping: 1,
+};
+
+export { springDefaults };

package/dist/es/framer-motion/dist/es/animation/generators/spring/find.mjs

@@ -1,22 +1,19 @@
 import { warning } from '../../../utils/errors.mjs';
 import { clamp } from '../../../utils/clamp.mjs';
 import { secondsToMilliseconds, millisecondsToSeconds } from '../../../utils/time-conversion.mjs';
+import { springDefaults } from './defaults.mjs';
 
 const safeMin = 0.001;
-const minDuration = 0.01;
-const maxDuration = 10.0;
-const minDamping = 0.05;
-const maxDamping = 1;
-function findSpring({ duration = 800, bounce = 0.25, velocity = 0, mass = 1, }) {
+function findSpring({ duration = springDefaults.duration, bounce = springDefaults.bounce, velocity = springDefaults.velocity, mass = springDefaults.mass, }) {
     let envelope;
     let derivative;
-    warning(duration <= secondsToMilliseconds(maxDuration), "Spring duration must be 10 seconds or less");
+    warning(duration <= secondsToMilliseconds(springDefaults.maxDuration), "Spring duration must be 10 seconds or less");
     let dampingRatio = 1 - bounce;
     /**
      * Restrict dampingRatio and duration to within acceptable ranges.
      */
-    dampingRatio = clamp(minDamping, maxDamping, dampingRatio);
-    duration = clamp(minDuration, maxDuration, millisecondsToSeconds(duration));
+    dampingRatio = clamp(springDefaults.minDamping, springDefaults.maxDamping, dampingRatio);
+    duration = clamp(springDefaults.minDuration, springDefaults.maxDuration, millisecondsToSeconds(duration));
     if (dampingRatio < 1) {
         /**
          * Underdamped spring
@@ -60,8 +57,8 @@ function findSpring({ duration = 800, bounce = 0.25, velocity = 0, mass = 1, })
     duration = secondsToMilliseconds(duration);
     if (isNaN(undampedFreq)) {
         return {
-            stiffness: 100,
-            damping: 10,
+            stiffness: springDefaults.stiffness,
+            damping: springDefaults.damping,
             duration,
         };
     }
@@ -86,4 +83,4 @@ function calcAngularFreq(undampedFreq, dampingRatio) {
     return undampedFreq * Math.sqrt(1 - dampingRatio * dampingRatio);
 }
 
-export { calcAngularFreq, findSpring, maxDamping, maxDuration, minDamping, minDuration };
+export { calcAngularFreq, findSpring };

package/dist/es/framer-motion/dist/es/animation/generators/spring/index.mjs

@@ -1,6 +1,10 @@
+import { generateLinearEasing } from '../../animators/waapi/utils/linear.mjs';
 import { millisecondsToSeconds, secondsToMilliseconds } from '../../../utils/time-conversion.mjs';
 import { calcGeneratorVelocity } from '../utils/velocity.mjs';
 import { findSpring, calcAngularFreq } from './find.mjs';
+import { calcGeneratorDuration, maxGeneratorDuration } from '../utils/calc-duration.mjs';
+import { clamp } from '../../../utils/clamp.mjs';
+import { springDefaults } from './defaults.mjs';
 
 const durationKeys = ["duration", "bounce"];
 const physicsKeys = ["stiffness", "damping", "mass"];
@@ -9,29 +13,51 @@ function isSpringType(options, keys) {
 }
 function getSpringOptions(options) {
     let springOptions = {
-        velocity: 0.0,
-        stiffness: 100,
-        damping: 10,
-        mass: 1.0,
+        velocity: springDefaults.velocity,
+        stiffness: springDefaults.stiffness,
+        damping: springDefaults.damping,
+        mass: springDefaults.mass,
         isResolvedFromDuration: false,
         ...options,
     };
     // stiffness/damping/mass overrides duration/bounce
     if (!isSpringType(options, physicsKeys) &&
         isSpringType(options, durationKeys)) {
-        const derived = findSpring(options);
-        springOptions = {
-            ...springOptions,
-            ...derived,
-            mass: 1.0,
-        };
-        springOptions.isResolvedFromDuration = true;
+        if (options.visualDuration) {
+            const visualDuration = options.visualDuration;
+            const root = (2 * Math.PI) / (visualDuration * 1.2);
+            const stiffness = root * root;
+            const damping = 2 * clamp(0.05, 1, 1 - options.bounce) * Math.sqrt(stiffness);
+            springOptions = {
+                ...springOptions,
+                mass: springDefaults.mass,
+                stiffness,
+                damping,
+            };
+        }
+        else {
+            const derived = findSpring(options);
+            springOptions = {
+                ...springOptions,
+                ...derived,
+                mass: springDefaults.mass,
+            };
+            springOptions.isResolvedFromDuration = true;
+        }
     }
     return springOptions;
 }
-function spring({ keyframes, restDelta, restSpeed, ...options }) {
-    const origin = keyframes[0];
-    const target = keyframes[keyframes.length - 1];
+function spring(optionsOrVisualDuration = springDefaults.visualDuration, bounce = springDefaults.bounce) {
+    const options = typeof optionsOrVisualDuration !== "object"
+        ? {
+            visualDuration: optionsOrVisualDuration,
+            keyframes: [0, 1],
+            bounce,
+        }
+        : optionsOrVisualDuration;
+    let { restSpeed, restDelta } = options;
+    const origin = options.keyframes[0];
+    const target = options.keyframes[options.keyframes.length - 1];
     /**
      * This is the Iterator-spec return value. We ensure it's mutable rather than using a generator
      * to reduce GC during animation.
@@ -53,8 +79,12 @@ function spring({ keyframes, restDelta, restSpeed, ...options }) {
      * ratio between feeling good and finishing as soon as changes are imperceptible.
      */
     const isGranularScale = Math.abs(initialDelta) < 5;
-    restSpeed || (restSpeed = isGranularScale ? 0.01 : 2);
-    restDelta || (restDelta = isGranularScale ? 0.005 : 0.5);
+    restSpeed || (restSpeed = isGranularScale
+        ? springDefaults.restSpeed.granular
+        : springDefaults.restSpeed.default);
+    restDelta || (restDelta = isGranularScale
+        ? springDefaults.restDelta.granular
+        : springDefaults.restDelta.default);
     let resolveSpring;
     if (dampingRatio < 1) {
         const angularFreq = calcAngularFreq(undampedAngularFreq, dampingRatio);
@@ -95,7 +125,7 @@ function spring({ keyframes, restDelta, restSpeed, ...options }) {
                     dampedAngularFreq);
         };
     }
-    return {
+    const generator = {
         calculatedDuration: isResolvedFromDuration ? duration || null : null,
         next: (t) => {
             const current = resolveSpring(t);
@@ -123,7 +153,13 @@ function spring({ keyframes, restDelta, restSpeed, ...options }) {
             state.value = state.done ? target : current;
             return state;
         },
+        toString: () => {
+            const calculatedDuration = Math.min(calcGeneratorDuration(generator), maxGeneratorDuration);
+            const easing = generateLinearEasing((progress) => generator.next(calculatedDuration * progress).value, calculatedDuration, 30);
+            return calculatedDuration + "ms " + easing;
+        },
     };
+    return generator;
 }
 
 export { spring };

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.11.16", `Attempting to mix Motion versions ${nextValue.version} with 11.11.16 may not work as expected.`);
+                warnOnce(nextValue.version === "11.12.0", `Attempting to mix Motion versions ${nextValue.version} with 11.12.0 may not work as expected.`);
             }
         }
         else if (isMotionValue(prevValue)) {

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.11.16";
+        this.version = "11.12.0";
         /**
          * 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