framer-motion 11.11.16 → 11.12.0

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/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
@@ -5874,7 +5927,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/dom-mini.js

@@ -163,9 +163,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 +402,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()
@@ -541,7 +541,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)