motion 11.11.17 → 11.13.0-beta.0

package/.turbo/turbo-build.log

@@ -1,47 +1,45 @@
-(node:86403) ExperimentalWarning: Importing JSON modules is an experimental feature and might change at any time
-(Use `node --trace-warnings ...` to show where the warning was created)
-
-lib/index.js → dist/motion.dev.js...
-created dist/motion.dev.js in 945ms
-
-lib/index.js → dist/motion.js...
-created dist/motion.js in 1.3s
-
-lib/index.js → dist/cjs...
-created dist/cjs in 287ms
-
-lib/react-client.js → dist/cjs...
-created dist/cjs in 320ms
-
-lib/react.js → dist/cjs...
-created dist/cjs in 4ms
-
-lib/mini.js → dist/cjs...
-created dist/cjs in 93ms
-
-lib/react-mini.js → dist/cjs...
-created dist/cjs in 83ms
-
-lib/react-m.js → dist/cjs...
-created dist/cjs in 94ms
-
-lib/index.js, lib/mini.js, lib/react.js, lib/react-mini.js, lib/react-client.js, lib/react-m.js → dist/es...
-created dist/es in 683ms
-
-types/index.d.ts → dist/index.d.ts...
-created dist/index.d.ts in 19ms
-
-types/react.d.ts → dist/react.d.ts...
-created dist/react.d.ts in 7ms
-
-types/react-mini.d.ts → dist/react-mini.d.ts...
-created dist/react-mini.d.ts in 2ms
-
-types/react-m.d.ts → dist/react-m.d.ts...
-created dist/react-m.d.ts in 3ms
-
-types/mini.d.ts → dist/mini.d.ts...
-created dist/mini.d.ts in 2ms
-
-types/react-client.d.ts → dist/react-client.d.ts...
-created dist/react-client.d.ts in 2ms
+
+lib/index.js → dist/motion.dev.js...
+created dist/motion.dev.js in 669ms
+
+lib/index.js → dist/motion.js...
+created dist/motion.js in 804ms
+
+lib/index.js → dist/cjs...
+created dist/cjs in 195ms
+
+lib/react-client.js → dist/cjs...
+created dist/cjs in 323ms
+
+lib/react.js → dist/cjs...
+created dist/cjs in 2ms
+
+lib/mini.js → dist/cjs...
+created dist/cjs in 24ms
+
+lib/react-mini.js → dist/cjs...
+created dist/cjs in 20ms
+
+lib/react-m.js → dist/cjs...
+created dist/cjs in 117ms
+
+lib/index.js, lib/mini.js, lib/react.js, lib/react-mini.js, lib/react-client.js, lib/react-m.js → dist/es...
+created dist/es in 599ms
+
+types/index.d.ts → dist/index.d.ts...
+created dist/index.d.ts in 10ms
+
+types/react.d.ts → dist/react.d.ts...
+created dist/react.d.ts in 9ms
+
+types/react-mini.d.ts → dist/react-mini.d.ts...
+created dist/react-mini.d.ts in 3ms
+
+types/react-m.d.ts → dist/react-m.d.ts...
+created dist/react-m.d.ts in 5ms
+
+types/mini.d.ts → dist/mini.d.ts...
+created dist/mini.d.ts in 3ms
+
+types/react-client.d.ts → dist/react-client.d.ts...
+created dist/react-client.d.ts in 1ms

package/README.md

@@ -38,14 +38,14 @@ It does all this:
 
 -   [Springs](https://motion.dev/docs/react-transitions#spring)
 -   [Keyframes](https://motion.dev/docs/react-animation#keyframes)
--   [Layout animations](https://motion/dev/docs/react-layout-animations)
+-   [Layout animations](https://motion.dev/docs/react-layout-animations)
 -   [Shared layout animations](https://motion.dev/docs/react-layout-animations#shared-layout-animations)
 -   [Gestures (drag/tap/hover)](https://motion.dev/docs/react-gestures)
 -   [Scroll animations](https://motion.dev/docs/react-scroll-animations)
 -   [SVG paths](https://motion.dev/docs/react-animation#svg-line-drawing)
 -   [Exit animations](https://motion.dev/docs/react-animation#exit-animations)
--   [Server-side rendering](https://motion.dev//docs/react-motion-component#server-side-rendering)
--   [Independent transforms](https://motion.dev/docs/react-motion-component#independent-transforms)
+-   [Server-side rendering](https://motion.dev/docs/react-motion-component#server-side-rendering)
+-   [Independent transforms](https://motion.dev/docs/react-motion-component#style)
 -   [Orchestrate animations across components](https://motion.dev/docs/react-animation#orchestration)
 -   [CSS variables](https://motion.dev/docs/react-animation#css-variables)
 
@@ -101,6 +101,10 @@ Motion powers Framer animations, the web builder for creative pros. Design and s
 
 <a href="https://linear.app"><img alt="Linear" src="https://github.com/user-attachments/assets/a93710bb-d8ed-40e3-b0fb-1c5b3e2b16bb" width="300px" height="200px"></a>
 
+### Gold
+
+<a href="https://liveblocks.io"><img alt="Liveblocks" src="https://github.com/user-attachments/assets/31436a47-951e-4eab-9a68-bdd54ccf9444" width="225px" height="150px"></a>
+
 ### Silver
 
 <a href="https://www.frontend.fyi/?utm_source=motion"><img alt="Frontend.fyi" src="https://github.com/user-attachments/assets/07d23aa5-69db-44a0-849d-90177e6fc817" width="150px" height="100px"></a>
@@ -109,7 +113,16 @@ Motion powers Framer animations, the web builder for creative pros. Design and s
 
 <a href="https://firecrawl.dev"><img alt="Firecrawl" src="https://github.com/user-attachments/assets/cba90e54-1329-4353-8fba-85beef4d2ee9" width="150px" height="100px"></a>
 
+<a href="https://puzzmo.com"><img alt="Puzzmo" src="https://github.com/user-attachments/assets/aa2d5586-e5e2-43b9-8446-db456e4b0758" width="150px" height="100px"></a>
+
+<a href="https://buildui.com"><img alt="Build UI" src="https://github.com/user-attachments/assets/024bfcd5-50e8-4b3d-a115-d5c6d6030d1c" width="150px" height="100px"></a>
+
+<a href="https://hover.dev"><img alt="Hover" src="https://github.com/user-attachments/assets/4715b555-d2ac-4cb7-9f35-d36d708827b3" width="150px" height="100px"></a>
+
 ### Personal
 
 -   [Nusu](https://x.com/nusualabuga)
 -   [OlegWock](https://sinja.io)
+-   [Lambert Weller](https://github.com/l-mbert)
+-   [Jake LeBoeuf](https://jklb.wf)
+-   [Han Lee](https://github.com/hahnlee)

package/dist/cjs/index.js

@@ -2,6 +2,67 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+const noop = (any) => any;
+
+exports.warning = noop;
+exports.invariant = noop;
+if (process.env.NODE_ENV !== "production") {
+    exports.warning = (check, message) => {
+        if (!check && typeof console !== "undefined") {
+            console.warn(message);
+        }
+    };
+    exports.invariant = (check, message) => {
+        if (!check) {
+            throw new Error(message);
+        }
+    };
+}
+
+function resolveElements(elementOrSelector, scope, selectorCache) {
+    var _a;
+    if (elementOrSelector instanceof Element) {
+        return [elementOrSelector];
+    }
+    else if (typeof elementOrSelector === "string") {
+        let root = document;
+        if (scope) {
+            // TODO: Refactor to utils package
+            // invariant(
+            //     Boolean(scope.current),
+            //     "Scope provided, but no element detected."
+            // )
+            root = scope.current;
+        }
+        const elements = (_a = selectorCache === null || selectorCache === void 0 ? void 0 : selectorCache[elementOrSelector]) !== null && _a !== void 0 ? _a : root.querySelectorAll(elementOrSelector);
+        return elements ? Array.from(elements) : [];
+    }
+    return Array.from(elementOrSelector);
+}
+
+function hover(elementOrSelector, onHoverStart) {
+    const elements = resolveElements(elementOrSelector);
+    const cancelGesture = new AbortController();
+    const options = { signal: cancelGesture.signal };
+    const onPointerEnter = (enterEvent) => {
+        if (enterEvent.pointerType === "touch")
+            return;
+        const { target } = enterEvent;
+        const onHoverEnd = onHoverStart(enterEvent);
+        if (onHoverEnd && target) {
+            const onPointerLeave = (leaveEvent) => {
+                onHoverEnd(leaveEvent);
+                target.removeEventListener("pointerleave", onPointerLeave);
+            };
+            target.addEventListener("pointerleave", onPointerLeave, options);
+        }
+    };
+    elements.forEach((element) => {
+        element.addEventListener("pointerenter", onPointerEnter, options);
+    });
+    return () => cancelGesture.abort();
+}
+
 function addUniqueItem(arr, item) {
     if (arr.indexOf(item) === -1)
         arr.push(item);
@@ -74,8 +135,6 @@ const MotionGlobalConfig = {
     useManualTiming: false,
 };
 
-const noop = (any) => any;
-
 function createRenderStep(runNextFrame) {
     /**
      * We create and reuse two queues, one to queue jobs for the current frame
@@ -279,7 +338,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.17";
+        this.version = "11.13.0-beta.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
@@ -647,6 +706,34 @@ class GroupPlaybackControls {
     }
 }
 
+/*
+  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
  *
@@ -662,21 +749,6 @@ function calcGeneratorVelocity(resolveValue, t, current) {
     return velocityPerSecond(current - resolveValue(prevT), t - prevT);
 }
 
-exports.warning = noop;
-exports.invariant = noop;
-if (process.env.NODE_ENV !== "production") {
-    exports.warning = (check, message) => {
-        if (!check && typeof console !== "undefined") {
-            console.warn(message);
-        }
-    };
-    exports.invariant = (check, message) => {
-        if (!check) {
-            throw new Error(message);
-        }
-    };
-}
-
 const clamp = (min, max, v) => {
     if (v > max)
         return max;
@@ -685,21 +757,43 @@ const clamp = (min, max, v) => {
     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
@@ -743,8 +837,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,
         };
     }
@@ -769,6 +863,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) {
@@ -776,29 +886,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.
@@ -820,8 +952,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);
@@ -862,7 +998,7 @@ function spring({ keyframes, restDelta, restSpeed, ...options }) {
                     dampedAngularFreq);
         };
     }
-    return {
+    const generator = {
         calculatedDuration: isResolvedFromDuration ? duration || null : null,
         next: (t) => {
             const current = resolveSpring(t);
@@ -890,23 +1026,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;
+        },
     };
-}
-
-/**
- * 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;
 }
 
 /**
@@ -947,23 +1073,6 @@ const mixNumber$1 = (from, to, progress) => {
     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++) {
@@ -980,31 +1089,6 @@ function defaultOffset$1(arr) {
 
 const isMotionValue = (value) => Boolean(value && value.getVelocity);
 
-function resolveElements(elements, scope, selectorCache) {
-    var _a;
-    if (typeof elements === "string") {
-        let root = document;
-        if (scope) {
-            exports.invariant(Boolean(scope.current), "Scope provided, but no element detected.");
-            root = scope.current;
-        }
-        if (selectorCache) {
-            (_a = selectorCache[elements]) !== null && _a !== void 0 ? _a : (selectorCache[elements] = root.querySelectorAll(elements));
-            elements = selectorCache[elements];
-        }
-        else {
-            elements = root.querySelectorAll(elements);
-        }
-    }
-    else if (elements instanceof Element) {
-        elements = [elements];
-    }
-    /**
-     * Return an empty array
-     */
-    return Array.from(elements || []);
-}
-
 function isDOMKeyframes(keyframes) {
     return typeof keyframes === "object" && !Array.isArray(keyframes);
 }
@@ -3322,18 +3406,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)})`;
-};
-
 /**
  * Add the ability for test suites to manually set support flags
  * to better test more environments.
@@ -4103,7 +4175,7 @@ function updateMotionValuesFromProps(element, next, prev) {
              * and warn against mismatches.
              */
             if (process.env.NODE_ENV === "development") {
-                warnOnce(nextValue.version === "11.11.17", `Attempting to mix Motion versions ${nextValue.version} with 11.11.17 may not work as expected.`);
+                warnOnce(nextValue.version === "11.13.0-beta.0", `Attempting to mix Motion versions ${nextValue.version} with 11.13.0-beta.0 may not work as expected.`);
             }
         }
         else if (isMotionValue(prevValue)) {
@@ -5251,6 +5323,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()
@@ -6123,6 +6196,7 @@ exports.easeOut = easeOut;
 exports.frame = frame;
 exports.frameData = frameData;
 exports.frameSteps = frameSteps;
+exports.hover = hover;
 exports.inView = inView;
 exports.inertia = inertia;
 exports.interpolate = interpolate;
@@ -6130,8 +6204,10 @@ exports.keyframes = keyframes;
 exports.mirrorEasing = mirrorEasing;
 exports.mix = mix;
 exports.motionValue = motionValue;
+exports.noop = noop;
 exports.pipe = pipe;
 exports.progress = progress;
+exports.resolveElements = resolveElements;
 exports.reverseEasing = reverseEasing;
 exports.scroll = scroll;
 exports.scrollInfo = scrollInfo;

package/dist/cjs/mini.js

@@ -91,6 +91,27 @@ class GroupPlaybackControls {
     }
 }
 
+function resolveElements(elementOrSelector, scope, selectorCache) {
+    var _a;
+    if (elementOrSelector instanceof Element) {
+        return [elementOrSelector];
+    }
+    else if (typeof elementOrSelector === "string") {
+        let root = document;
+        if (scope) {
+            // TODO: Refactor to utils package
+            // invariant(
+            //     Boolean(scope.current),
+            //     "Scope provided, but no element detected."
+            // )
+            root = scope.current;
+        }
+        const elements = (_a = selectorCache === null || selectorCache === void 0 ? void 0 : selectorCache[elementOrSelector]) !== null && _a !== void 0 ? _a : root.querySelectorAll(elementOrSelector);
+        return elements ? Array.from(elements) : [];
+    }
+    return Array.from(elementOrSelector);
+}
+
 const noop = (any) => any;
 
 let invariant = noop;
@@ -102,31 +123,6 @@ if (process.env.NODE_ENV !== "production") {
     };
 }
 
-function resolveElements(elements, scope, selectorCache) {
-    var _a;
-    if (typeof elements === "string") {
-        let root = document;
-        if (scope) {
-            invariant(Boolean(scope.current), "Scope provided, but no element detected.");
-            root = scope.current;
-        }
-        if (selectorCache) {
-            (_a = selectorCache[elements]) !== null && _a !== void 0 ? _a : (selectorCache[elements] = root.querySelectorAll(elements));
-            elements = selectorCache[elements];
-        }
-        else {
-            elements = root.querySelectorAll(elements);
-        }
-    }
-    else if (elements instanceof Element) {
-        elements = [elements];
-    }
-    /**
-     * Return an empty array
-     */
-    return Array.from(elements || []);
-}
-
 /**
  * Converts seconds to milliseconds
  *
@@ -163,9 +159,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);
@@ -403,6 +398,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()