framer-motion 11.0.21 → 11.0.23

package/dist/index.d.ts

@@ -1860,6 +1860,7 @@ interface ValueAnimationOptions<V extends string | number = number> extends Valu
     name?: string;
     motionValue?: MotionValue<V>;
     from?: V;
+    isGenerator?: boolean;
 }
 interface AnimationScope<T = any> {
     readonly current: T;
@@ -4913,6 +4914,7 @@ declare abstract class BaseAnimation<T extends string | number, Resolved> implem
     protected _resolved: Resolved & {
         keyframes: ResolvedKeyframes<T>;
     };
+    protected hasAttemptedResolve: boolean;
     protected resolver: KeyframeResolver<T>;
     constructor({ autoplay, delay, type, repeat, repeatDelay, repeatType, ...options }: ValueAnimationOptions<T>);
     protected abstract initPlayback(keyframes: ResolvedKeyframes<T>, finalKeyframe?: T): Resolved | false;

package/dist/projection.dev.js

@@ -815,8 +815,9 @@
          */
         const xTranslate = delta.x.translate / treeScale.x;
         const yTranslate = delta.y.translate / treeScale.y;
-        if (xTranslate || yTranslate) {
-            transform = `translate3d(${xTranslate}px, ${yTranslate}px, 0) `;
+        const zTranslate = (latestTransform === null || latestTransform === void 0 ? void 0 : latestTransform.z) || 0;
+        if (xTranslate || yTranslate || zTranslate) {
+            transform = `translate3d(${xTranslate}px, ${yTranslate}px, ${zTranslate}px) `;
         }
         /**
          * Apply scale correction for the tree transform.
@@ -1008,7 +1009,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.0.21";
+            this.version = "11.0.22";
             /**
              * 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
@@ -2254,6 +2255,7 @@
         constructor({ autoplay = true, delay = 0, type = "keyframes", repeat = 0, repeatDelay = 0, repeatType = "loop", ...options }) {
             // Track whether the animation has been stopped. Stopped animations won't restart.
             this.isStopped = false;
+            this.hasAttemptedResolve = false;
             this.options = {
                 autoplay,
                 delay,
@@ -2271,8 +2273,9 @@
          * This is a deoptimisation, but at its worst still batches read/writes.
          */
         get resolved() {
-            if (!this._resolved)
+            if (!this._resolved && !this.hasAttemptedResolve) {
                 flushKeyframeResolvers();
+            }
             return this._resolved;
         }
         /**
@@ -2281,12 +2284,13 @@
          * Otherwise, it will call initPlayback on the implementing class.
          */
         onKeyframesResolved(keyframes, finalKeyframe) {
-            const { name, type, velocity, delay, onComplete, onUpdate } = this.options;
+            this.hasAttemptedResolve = true;
+            const { name, type, velocity, delay, onComplete, onUpdate, isGenerator, } = this.options;
             /**
              * If we can't animate this value with the resolved keyframes
              * then we should complete it immediately.
              */
-            if (!canAnimate(keyframes, name, type, velocity)) {
+            if (!isGenerator && !canAnimate(keyframes, name, type, velocity)) {
                 // Finish immediately
                 if (instantAnimationState.current || !delay) {
                     onUpdate === null || onUpdate === void 0 ? void 0 : onUpdate(getFinalKeyframe(keyframes, this.options, finalKeyframe));
@@ -3503,6 +3507,7 @@
             keyframes,
             repeat: 0,
             delay: 0,
+            isGenerator: true,
         });
         let state = { done: false, value: keyframes[0] };
         const pregeneratedKeyframes = [];
@@ -3547,6 +3552,12 @@
                 const { onComplete, onUpdate, motionValue, ...options } = this.options;
                 const pregeneratedAnimation = pregenerateKeyframes(keyframes, options);
                 keyframes = pregeneratedAnimation.keyframes;
+                // If this is a very short animation, ensure we have
+                // at least two keyframes to animate between as older browsers
+                // can't animate between a single keyframe.
+                if (keyframes.length === 1) {
+                    keyframes[1] = keyframes[0];
+                }
                 duration = pregeneratedAnimation.duration;
                 times = pregeneratedAnimation.times;
                 ease = pregeneratedAnimation.ease;
@@ -3695,6 +3706,7 @@
                     type,
                     ease,
                     times,
+                    isGenerator: true,
                 });
                 const sampleTime = secondsToMilliseconds(this.time);
                 motionValue.setWithVelocity(sampleAnimation.sample(sampleTime - sampleDelta).value, sampleAnimation.sample(sampleTime).value, sampleDelta);
@@ -3955,7 +3967,7 @@
                  * and warn against mismatches.
                  */
                 {
-                    warnOnce(nextValue.version === "11.0.21", `Attempting to mix Framer Motion versions ${nextValue.version} with 11.0.21 may not work as expected.`);
+                    warnOnce(nextValue.version === "11.0.22", `Attempting to mix Framer Motion versions ${nextValue.version} with 11.0.22 may not work as expected.`);
                 }
             }
             else if (isMotionValue(prevValue)) {
@@ -5887,7 +5899,8 @@
                  * skipping the nested loop and new object creation is 50% faster.
                  */
                 const { latestValues } = visualElement;
-                if (latestValues.rotate ||
+                if (latestValues.z ||
+                    latestValues.rotate ||
                     latestValues.rotateX ||
                     latestValues.rotateY ||
                     latestValues.rotateZ ||
@@ -5899,6 +5912,9 @@
                 if (!hasDistortingTransform)
                     return;
                 const resetValues = {};
+                if (latestValues.z) {
+                    resetDistortingTransform("z", visualElement, resetValues, this.animationValues);
+                }
                 // Check the skew and rotate value of all axes and reset to 0
                 for (let i = 0; i < transformAxes.length; i++) {
                     resetDistortingTransform(`rotate${transformAxes[i]}`, visualElement, resetValues, this.animationValues);

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "framer-motion",
-    "version": "11.0.21",
+    "version": "11.0.23",
     "description": "A simple and powerful JavaScript animation library",
     "main": "dist/cjs/index.js",
     "module": "dist/es/index.mjs",
@@ -87,7 +87,7 @@
     "bundlesize": [
         {
             "path": "./dist/size-rollup-motion.js",
-            "maxSize": "32.4 kB"
+            "maxSize": "32.5 kB"
         },
         {
             "path": "./dist/size-rollup-m.js",
@@ -95,11 +95,11 @@
         },
         {
             "path": "./dist/size-rollup-dom-animation.js",
-            "maxSize": "16.25kB"
+            "maxSize": "16.3kB"
         },
         {
             "path": "./dist/size-rollup-dom-max.js",
-            "maxSize": "27.8 kB"
+            "maxSize": "27.85 kB"
         },
         {
             "path": "./dist/size-rollup-animate.js",
@@ -115,8 +115,8 @@
         },
         {
             "path": "./dist/size-webpack-dom-max.js",
-            "maxSize": "33.3 kB"
+            "maxSize": "33.4 kB"
         }
     ],
-    "gitHead": "92addac7b04e903027e34578a28cc348a78f9bea"
+    "gitHead": "ddf2362973c18ffdca717441dfbef077fd2f098f"
 }