motion 11.11.16 → 11.12.0

package/dist/motion.dev.js

@@ -281,7 +281,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 = "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
@@ -649,6 +649,34 @@
         }
     }
 
+    /*
+      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)})`;
+    };
+
     /**
      * Converts seconds to milliseconds
      *
@@ -687,21 +715,43 @@
         return v;
     };
 
+    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;
-        exports.warning(duration <= secondsToMilliseconds(maxDuration$1), "Spring duration must be 10 seconds or less");
+        exports.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
@@ -745,8 +795,8 @@
         duration = secondsToMilliseconds(duration);
         if (isNaN(undampedFreq)) {
             return {
-                stiffness: 100,
-                damping: 10,
+                stiffness: springDefaults.stiffness,
+                damping: springDefaults.damping,
                 duration,
             };
         }
@@ -771,6 +821,22 @@
         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) {
@@ -778,29 +844,51 @@
     }
     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.
@@ -822,8 +910,12 @@
          * 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);
@@ -864,7 +956,7 @@
                         dampedAngularFreq);
             };
         }
-        return {
+        const generator = {
             calculatedDuration: isResolvedFromDuration ? duration || null : null,
             next: (t) => {
                 const current = resolveSpring(t);
@@ -892,23 +984,13 @@
                 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;
+            },
         };
-    }
-
-    /**
-     * 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;
+        return generator;
     }
 
     /**
@@ -949,23 +1031,6 @@
         return from + (to - from) * progress;
     };
 
-    /*
-      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;
-    };
-
     function fillOffset(offset, remaining) {
         const min = offset[offset.length - 1];
         for (let i = 1; i <= remaining; i++) {
@@ -3324,18 +3389,6 @@
         // "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)})`;
-    };
-
     /**
      * Add the ability for test suites to manually set support flags
      * to better test more environments.
@@ -4105,7 +4158,7 @@
                  * and warn against mismatches.
                  */
                 {
-                    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)) {
@@ -5253,6 +5306,7 @@
                 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()
@@ -5391,7 +5445,7 @@
             for (const valueName in keyframes) {
                 const valueKeyframes = keyframes[valueName];
                 const valueOptions = {
-                    ...getValueTransition(options, valueName),
+                    ...getValueTransition(elementTransition, valueName),
                 };
                 valueOptions.duration = valueOptions.duration
                     ? secondsToMilliseconds(valueOptions.duration)