framer-motion 11.0.12 → 11.0.14

package/dist/cjs/dom-entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var indexLegacy = require('./index-legacy-4a7bf96d.js');
+var indexLegacy = require('./index-legacy-c9b3fc9b.js');
 
 
 

package/dist/cjs/{index-legacy-4a7bf96d.js → index-legacy-c9b3fc9b.js}

@@ -466,6 +466,8 @@ const numberValueTypes = {
     originZ: px,
     // Misc
     zIndex: int,
+    backgroundPositionX: px,
+    backgroundPositionY: px,
     // SVG
     fillOpacity: alpha,
     strokeOpacity: alpha,
@@ -837,12 +839,14 @@ const instantAnimationState = {
 };
 
 const isNotNull = (value) => value !== null;
-function getFinalKeyframe(keyframes, { repeat, repeatType = "loop" }) {
+function getFinalKeyframe(keyframes, { repeat, repeatType = "loop" }, finalKeyframe) {
     const resolvedKeyframes = keyframes.filter(isNotNull);
     const index = repeat && repeatType !== "loop" && repeat % 2 === 1
         ? 0
         : resolvedKeyframes.length - 1;
-    return resolvedKeyframes[index];
+    return !index || finalKeyframe === undefined
+        ? resolvedKeyframes[index]
+        : finalKeyframe;
 }
 
 let now;
@@ -1065,13 +1069,10 @@ function readAllKeyframes() {
             anyNeedsMeasurement = true;
         }
     });
-    frame.resolveKeyframes(measureAllKeyframes);
 }
 function flushKeyframeResolvers() {
     readAllKeyframes();
     measureAllKeyframes();
-    cancelFrame(readAllKeyframes);
-    cancelFrame(measureAllKeyframes);
 }
 class KeyframeResolver {
     constructor(unresolvedKeyframes, onComplete, name, motionValue, element, isAsync = false) {
@@ -1110,6 +1111,7 @@ class KeyframeResolver {
             if (!isScheduled) {
                 isScheduled = true;
                 frame.read(readAllKeyframes);
+                frame.resolveKeyframes(measureAllKeyframes);
             }
         }
         else {
@@ -1159,7 +1161,7 @@ class KeyframeResolver {
     measureEndState() { }
     complete() {
         this.isComplete = true;
-        this.onComplete(this.unresolvedKeyframes);
+        this.onComplete(this.unresolvedKeyframes, this.finalKeyframe);
         toResolve.delete(this);
     }
     cancel() {
@@ -1466,7 +1468,6 @@ class DOMKeyframesResolver extends KeyframeResolver {
         const { unresolvedKeyframes, element, name } = this;
         if (!element.current)
             return;
-        const noneKeyframeIndexes = [];
         super.readKeyframes();
         /**
          * If any keyframe is a CSS variable, we need to find its value by sampling the element
@@ -1479,12 +1480,6 @@ class DOMKeyframesResolver extends KeyframeResolver {
                     unresolvedKeyframes[i] = resolved;
                 }
             }
-            if (isNone(unresolvedKeyframes[i])) {
-                noneKeyframeIndexes.push(i);
-            }
-        }
-        if (noneKeyframeIndexes.length) {
-            makeNoneKeyframesAnimatable(unresolvedKeyframes, noneKeyframeIndexes, name);
         }
         /**
          * Check to see if unit type has changed. If so schedule jobs that will
@@ -1493,7 +1488,7 @@ class DOMKeyframesResolver extends KeyframeResolver {
          * TODO: We can throw if there are multiple keyframes and the value type changes.
          */
         if (!positionalKeys.has(name) || unresolvedKeyframes.length !== 2) {
-            return;
+            return this.resolveNoneKeyframes();
         }
         const [origin, target] = unresolvedKeyframes;
         const originType = findDimensionValueType(origin);
@@ -1501,7 +1496,7 @@ class DOMKeyframesResolver extends KeyframeResolver {
         /**
          * Either we don't recognise these value types or we can animate between them.
          */
-        if (!originType || !targetType || originType === targetType)
+        if (originType === targetType)
             return;
         /**
          * If both values are numbers or pixels, we can animate between them by
@@ -1522,6 +1517,18 @@ class DOMKeyframesResolver extends KeyframeResolver {
             this.needsMeasurement = true;
         }
     }
+    resolveNoneKeyframes() {
+        const { unresolvedKeyframes, name } = this;
+        const noneKeyframeIndexes = [];
+        for (let i = 0; i < unresolvedKeyframes.length; i++) {
+            if (isNone(unresolvedKeyframes[i])) {
+                noneKeyframeIndexes.push(i);
+            }
+        }
+        if (noneKeyframeIndexes.length) {
+            makeNoneKeyframesAnimatable(unresolvedKeyframes, noneKeyframeIndexes, name);
+        }
+    }
     unsetTransforms() {
         const { element, name, unresolvedKeyframes } = this;
         if (!element.current)
@@ -1550,7 +1557,12 @@ class DOMKeyframesResolver extends KeyframeResolver {
             return;
         const value = element.getValue(name);
         value && value.jump(this.measuredOrigin, false);
-        unresolvedKeyframes[unresolvedKeyframes.length - 1] = positionalValues[name](element.measureViewportBox(), window.getComputedStyle(element.current));
+        const finalKeyframeIndex = unresolvedKeyframes.length - 1;
+        const finalKeyframe = unresolvedKeyframes[finalKeyframeIndex];
+        unresolvedKeyframes[finalKeyframeIndex] = positionalValues[name](element.measureViewportBox(), window.getComputedStyle(element.current));
+        if (finalKeyframe !== null) {
+            this.finalKeyframe = finalKeyframe;
+        }
         if (name === "height" && this.suspendedScrollY !== undefined) {
             window.scrollTo(0, this.suspendedScrollY);
         }
@@ -1562,6 +1574,7 @@ class DOMKeyframesResolver extends KeyframeResolver {
                     .set(unsetTransformValue);
             });
         }
+        this.resolveNoneKeyframes();
     }
 }
 
@@ -1660,7 +1673,7 @@ class BaseAnimation {
      * will check if its possible to run the animation and, if not, skip it.
      * Otherwise, it will call initPlayback on the implementing class.
      */
-    onKeyframesResolved(keyframes) {
+    onKeyframesResolved(keyframes, finalKeyframe) {
         const { name, type, velocity, delay, onComplete, onUpdate } = this.options;
         /**
          * If we can't animate this value with the resolved keyframes
@@ -1669,8 +1682,7 @@ class BaseAnimation {
         if (!canAnimate(keyframes, name, type, velocity)) {
             // Finish immediately
             if (instantAnimationState.current || !delay) {
-                const finalKeyframe = getFinalKeyframe(keyframes, this.options);
-                onUpdate === null || onUpdate === void 0 ? void 0 : onUpdate(finalKeyframe);
+                onUpdate === null || onUpdate === void 0 ? void 0 : onUpdate(getFinalKeyframe(keyframes, this.options, finalKeyframe));
                 onComplete === null || onComplete === void 0 ? void 0 : onComplete();
                 this.resolveFinishedPromise();
                 this.updateFinishedPromise();
@@ -1683,7 +1695,8 @@ class BaseAnimation {
         }
         this._resolved = {
             keyframes,
-            ...this.initPlayback(keyframes),
+            finalKeyframe,
+            ...this.initPlayback(keyframes, finalKeyframe),
         };
         this.onPostResolved();
     }
@@ -2524,7 +2537,7 @@ class MainThreadAnimation extends BaseAnimation {
         this.pendingPlayState = "running";
         this.state = "idle";
         const { name, motionValue, keyframes } = this.options;
-        const onResolved = (resolvedKeyframes) => this.onKeyframesResolved(resolvedKeyframes);
+        const onResolved = (resolvedKeyframes, finalKeyframe) => this.onKeyframesResolved(resolvedKeyframes, finalKeyframe);
         if (name && motionValue && motionValue.owner) {
             this.resolver = motionValue.owner.resolveKeyframes(keyframes, onResolved, name, motionValue);
         }
@@ -2598,7 +2611,13 @@ class MainThreadAnimation extends BaseAnimation {
         }
     }
     tick(timestamp, sample = false) {
-        const { generator, mirroredGenerator, mapPercentToKeyframes, keyframes, calculatedDuration, totalDuration, resolvedDuration, } = this.resolved;
+        const { resolved } = this;
+        // If the animations has failed to resolve, return the final keyframe.
+        if (!resolved) {
+            const { keyframes } = this.options;
+            return { done: true, value: keyframes[keyframes.length - 1] };
+        }
+        const { finalKeyframe, generator, mirroredGenerator, mapPercentToKeyframes, keyframes, calculatedDuration, totalDuration, resolvedDuration, } = resolved;
         if (this.startTime === null)
             return generator.next(0);
         const { delay, repeat, repeatType, repeatDelay, onUpdate } = this.options;
@@ -2703,6 +2722,9 @@ class MainThreadAnimation extends BaseAnimation {
         }
         const isAnimationFinished = this.holdTime === null &&
             (this.state === "finished" || (this.state === "running" && done));
+        if (isAnimationFinished && finalKeyframe !== undefined) {
+            state.value = getFinalKeyframe(keyframes, this.options, finalKeyframe);
+        }
         if (onUpdate) {
             onUpdate(state.value);
         }
@@ -2712,7 +2734,8 @@ class MainThreadAnimation extends BaseAnimation {
         return state;
     }
     get duration() {
-        return millisecondsToSeconds(this.resolved.calculatedDuration);
+        const { resolved } = this;
+        return resolved ? millisecondsToSeconds(resolved.calculatedDuration) : 0;
     }
     get time() {
         return millisecondsToSeconds(this.currentTime);
@@ -2951,10 +2974,10 @@ class AcceleratedAnimation extends BaseAnimation {
     constructor(options) {
         super(options);
         const { name, motionValue, keyframes } = this.options;
-        this.resolver = new DOMKeyframesResolver(keyframes, (resolvedKeyframes) => this.onKeyframesResolved(resolvedKeyframes), name, motionValue);
+        this.resolver = new DOMKeyframesResolver(keyframes, (resolvedKeyframes, finalKeyframe) => this.onKeyframesResolved(resolvedKeyframes, finalKeyframe), name, motionValue);
         this.resolver.scheduleResolve();
     }
-    initPlayback(keyframes) {
+    initPlayback(keyframes, finalKeyframe) {
         let duration = this.options.duration || 300;
         /**
          * If this animation needs pre-generated keyframes then generate.
@@ -2987,7 +3010,7 @@ class AcceleratedAnimation extends BaseAnimation {
              */
             animation.onfinish = () => {
                 const { onComplete } = this.options;
-                motionValue.set(getFinalKeyframe(keyframes, this.options));
+                motionValue.set(getFinalKeyframe(keyframes, this.options, finalKeyframe));
                 onComplete && onComplete();
                 this.cancel();
                 this.resolveFinishedPromise();
@@ -3001,27 +3024,45 @@ class AcceleratedAnimation extends BaseAnimation {
         };
     }
     get duration() {
-        const { duration } = this.resolved;
+        const { resolved } = this;
+        if (!resolved)
+            return 0;
+        const { duration } = resolved;
         return millisecondsToSeconds(duration);
     }
     get time() {
-        const { animation } = this.resolved;
+        const { resolved } = this;
+        if (!resolved)
+            return 0;
+        const { animation } = resolved;
         return millisecondsToSeconds(animation.currentTime || 0);
     }
     set time(newTime) {
-        const { animation } = this.resolved;
+        const { resolved } = this;
+        if (!resolved)
+            return;
+        const { animation } = resolved;
         animation.currentTime = secondsToMilliseconds(newTime);
     }
     get speed() {
-        const { animation } = this.resolved;
+        const { resolved } = this;
+        if (!resolved)
+            return 1;
+        const { animation } = resolved;
         return animation.playbackRate;
     }
     set speed(newSpeed) {
-        const { animation } = this.resolved;
+        const { resolved } = this;
+        if (!resolved)
+            return;
+        const { animation } = resolved;
         animation.playbackRate = newSpeed;
     }
     get state() {
-        const { animation } = this.resolved;
+        const { resolved } = this;
+        if (!resolved)
+            return "idle";
+        const { animation } = resolved;
         return animation.playState;
     }
     /**
@@ -3033,7 +3074,10 @@ class AcceleratedAnimation extends BaseAnimation {
             this.pendingTimeline = timeline;
         }
         else {
-            const { animation } = this.resolved;
+            const { resolved } = this;
+            if (!resolved)
+                return noop;
+            const { animation } = resolved;
             animation.timeline = timeline;
             animation.onfinish = null;
         }
@@ -3042,16 +3086,25 @@ class AcceleratedAnimation extends BaseAnimation {
     play() {
         if (this.isStopped)
             return;
-        const { animation } = this.resolved;
+        const { resolved } = this;
+        if (!resolved)
+            return;
+        const { animation } = resolved;
         animation.play();
     }
     pause() {
-        const { animation } = this.resolved;
+        const { resolved } = this;
+        if (!resolved)
+            return;
+        const { animation } = resolved;
         animation.pause();
     }
     stop() {
         this.isStopped = true;
-        const { animation, keyframes } = this.resolved;
+        const { resolved } = this;
+        if (!resolved)
+            return;
+        const { animation, keyframes } = resolved;
         if (animation.playState === "idle" ||
             animation.playState === "finished") {
             return;
@@ -3075,10 +3128,16 @@ class AcceleratedAnimation extends BaseAnimation {
         this.cancel();
     }
     complete() {
-        this.resolved.animation.finish();
+        const { resolved } = this;
+        if (!resolved)
+            return;
+        resolved.animation.finish();
     }
     cancel() {
-        this.resolved.animation.cancel();
+        const { resolved } = this;
+        if (!resolved)
+            return;
+        resolved.animation.cancel();
     }
     static supports(options) {
         const { motionValue, name, repeatDelay, repeatType, damping, type } = options;
@@ -3298,7 +3357,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.0.12";
+        this.version = "11.0.14";
         /**
          * 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
@@ -4064,7 +4123,7 @@ function updateMotionValuesFromProps(element, next, prev) {
              * and warn against mismatches.
              */
             if (process.env.NODE_ENV === "development") {
-                warnOnce(nextValue.version === "11.0.12", `Attempting to mix Framer Motion versions ${nextValue.version} with 11.0.12 may not work as expected.`);
+                warnOnce(nextValue.version === "11.0.14", `Attempting to mix Framer Motion versions ${nextValue.version} with 11.0.14 may not work as expected.`);
             }
         }
         else if (isMotionValue(prevValue)) {

package/dist/cjs/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var indexLegacy = require('./index-legacy-4a7bf96d.js');
+var indexLegacy = require('./index-legacy-c9b3fc9b.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }