framer-motion 4.1.0-rc.1 → 4.1.3

package/CHANGELOG.md

@@ -2,7 +2,25 @@
 
 Framer Motion adheres to [Semantic Versioning](http://semver.org/).
 
-## [4.1.0] Unreleased
+## [4.1.3] 2021-04-07
+
+### Fixed
+
+-   Animating to/between `0rem` and other non-specifically handled unit types.
+
+## [4.1.2] 2021-04-01
+
+### Fixed
+
+-   Clamping `borderRadius` to `0` and above during crossfade.
+
+## [4.1.1] 2021-04-01
+
+### Fixed
+
+-   Animating from `undefined` to number (including units) now animates from `0`.
+
+## [4.1.0] 2021-03-31
 
 ### Added
 

package/README.md

@@ -69,10 +69,14 @@ Check out [our documentation](https://framer.com/api/motion) for guides and a fu
 
 Or checkout [our examples](https://framer.com/motion) for inspiration.
 
-## Contribute
+### Contribute
 
-Want to contribute to Motion? Our [contributing guide](https://github.com/framer/motion/blob/master/CONTRIBUTING.md) has you covered.
+Want to contribute to Framer Motion? Our [contributing guide](https://github.com/framer/motion/blob/master/CONTRIBUTING.md) has you covered.
 
-## License
+### License
 
-Motion is MIT licensed.
+Framer Motion is MIT licensed.
+
+## Framer
+
+Get on the same page as your designers before production. Get started with [design and prototyping in Framer](https://www.framer.com/).

package/dist/es/animation/utils/transitions.js

@@ -108,13 +108,21 @@ function getAnimation(key, value, target, transition, onComplete) {
     var valueTransition = getValueTransition(transition, key);
     var origin = (_a = valueTransition.from) !== null && _a !== void 0 ? _a : value.get();
     var isTargetAnimatable = isAnimatable(key, target);
-    /**
-     * If we're trying to animate from "none", try and get an animatable version
-     * of the target. This could be improved to work both ways.
-     */
     if (origin === "none" && isTargetAnimatable && typeof target === "string") {
+        /**
+         * If we're trying to animate from "none", try and get an animatable version
+         * of the target. This could be improved to work both ways.
+         */
         origin = getAnimatableNone(key, target);
     }
+    else if (isZero(origin) && typeof target === "string") {
+        origin = getZeroUnit(target);
+    }
+    else if (!Array.isArray(target) &&
+        isZero(target) &&
+        typeof origin === "string") {
+        target = getZeroUnit(origin);
+    }
     var isOriginAnimatable = isAnimatable(key, origin);
     warning(isOriginAnimatable === isTargetAnimatable, "You are trying to animate " + key + " from \"" + origin + "\" to \"" + target + "\". " + origin + " is not an animatable value - to enable this animation set " + origin + " to a value animatable to " + target + " via the `style` property.");
     function start() {
@@ -151,6 +159,17 @@ function getAnimation(key, value, target, transition, onComplete) {
         ? set
         : start;
 }
+function isZero(value) {
+    return (value === 0 ||
+        (typeof value === "string" &&
+            parseFloat(value) === 0 &&
+            value.indexOf(" ") === -1));
+}
+function getZeroUnit(potentialUnitType) {
+    return typeof potentialUnitType === "number"
+        ? 0
+        : getAnimatableNone("", potentialUnitType);
+}
 function getValueTransition(transition, key) {
     return transition[key] || transition["default"] || transition;
 }
@@ -181,4 +200,4 @@ function startAnimation(key, value, target, transition) {
     });
 }
 
-export { convertTransitionToAnimationOptions, getDelayFromTransition, getPopmotionAnimationOptions, getValueTransition, hydrateKeyframes, isTransitionDefined, startAnimation };
+export { convertTransitionToAnimationOptions, getDelayFromTransition, getPopmotionAnimationOptions, getValueTransition, getZeroUnit, hydrateKeyframes, isTransitionDefined, isZero, startAnimation };

package/dist/es/components/AnimateSharedLayout/utils/crossfader.js

@@ -191,7 +191,7 @@ function mixValues(leadState, followState, latestLeadValues, latestFollowValues,
          */
         if (typeof followRadius === "number" &&
             typeof leadRadius === "number") {
-            var radius = mix(followRadius, leadRadius, p);
+            var radius = Math.max(mix(followRadius, leadRadius, p), 0);
             leadState[borderLabel] = followState[borderLabel] = radius;
         }
     }

package/dist/es/components/AnimateSharedLayout/utils/stack.js

@@ -73,7 +73,10 @@ function layoutStack() {
                 prevValues: prevValues,
                 crossfadeOpacity: (follow === null || follow === void 0 ? void 0 : follow.isPresenceRoot) || (lead === null || lead === void 0 ? void 0 : lead.isPresenceRoot),
             });
-            if (state.lead !== prevState.follow &&
+            if (
+            // Don't crossfade if we've just animated back from lead and switched the
+            // old follow to the new lead.
+            state.lead !== prevState.follow &&
                 (prevState.lead !== state.lead ||
                     prevState.leadIsExiting !== state.leadIsExiting)) {
                 needsCrossfadeAnimation = true;

package/dist/es/motion/features/layout/Animate.js

@@ -72,10 +72,23 @@ var Animate = /** @class */ (function (_super) {
             if (projectionParent) {
                 var prevParentViewportBox = projectionParent.prevViewportBox;
                 var parentLayout = projectionParent.getLayoutState().layout;
+                /**
+                 * If we're being provided a previous parent VisualElement by AnimateSharedLayout
+                 */
                 if (prevParent) {
+                    /**
+                     * If we've been provided an explicit target box it means we're animating back
+                     * to this previous parent. So we can make a relative box by comparing to the previous
+                     * parent's layout
+                     */
                     if (targetBox) {
                         parentLayout = prevParent.getLayoutState().layout;
                     }
+                    /**
+                     * Likewise if we've been provided an explicit origin box it means we're
+                     * animating out from a different element. So we should figure out where that was
+                     * on screen relative to the new parent element.
+                     */
                     if (originBox &&
                         !checkIfParentHasChanged(prevParent, projectionParent) &&
                         prevParent.prevViewportBox) {

package/dist/framer-motion.cjs.js

@@ -1924,13 +1924,21 @@ function getAnimation(key, value, target, transition, onComplete) {
     var valueTransition = getValueTransition(transition, key);
     var origin = (_a = valueTransition.from) !== null && _a !== void 0 ? _a : value.get();
     var isTargetAnimatable = isAnimatable(key, target);
-    /**
-     * If we're trying to animate from "none", try and get an animatable version
-     * of the target. This could be improved to work both ways.
-     */
     if (origin === "none" && isTargetAnimatable && typeof target === "string") {
+        /**
+         * If we're trying to animate from "none", try and get an animatable version
+         * of the target. This could be improved to work both ways.
+         */
         origin = getAnimatableNone(key, target);
     }
+    else if (isZero(origin) && typeof target === "string") {
+        origin = getZeroUnit(target);
+    }
+    else if (!Array.isArray(target) &&
+        isZero(target) &&
+        typeof origin === "string") {
+        target = getZeroUnit(origin);
+    }
     var isOriginAnimatable = isAnimatable(key, origin);
     heyListen.warning(isOriginAnimatable === isTargetAnimatable, "You are trying to animate " + key + " from \"" + origin + "\" to \"" + target + "\". " + origin + " is not an animatable value - to enable this animation set " + origin + " to a value animatable to " + target + " via the `style` property.");
     function start() {
@@ -1967,6 +1975,17 @@ function getAnimation(key, value, target, transition, onComplete) {
         ? set
         : start;
 }
+function isZero(value) {
+    return (value === 0 ||
+        (typeof value === "string" &&
+            parseFloat(value) === 0 &&
+            value.indexOf(" ") === -1));
+}
+function getZeroUnit(potentialUnitType) {
+    return typeof potentialUnitType === "number"
+        ? 0
+        : getAnimatableNone("", potentialUnitType);
+}
 function getValueTransition(transition, key) {
     return transition[key] || transition["default"] || transition;
 }
@@ -4293,10 +4312,23 @@ var Animate = /** @class */ (function (_super) {
             if (projectionParent) {
                 var prevParentViewportBox = projectionParent.prevViewportBox;
                 var parentLayout = projectionParent.getLayoutState().layout;
+                /**
+                 * If we're being provided a previous parent VisualElement by AnimateSharedLayout
+                 */
                 if (prevParent) {
+                    /**
+                     * If we've been provided an explicit target box it means we're animating back
+                     * to this previous parent. So we can make a relative box by comparing to the previous
+                     * parent's layout
+                     */
                     if (targetBox) {
                         parentLayout = prevParent.getLayoutState().layout;
                     }
+                    /**
+                     * Likewise if we've been provided an explicit origin box it means we're
+                     * animating out from a different element. So we should figure out where that was
+                     * on screen relative to the new parent element.
+                     */
                     if (originBox &&
                         !checkIfParentHasChanged(prevParent, projectionParent) &&
                         prevParent.prevViewportBox) {
@@ -6507,7 +6539,7 @@ function mixValues(leadState, followState, latestLeadValues, latestFollowValues,
          */
         if (typeof followRadius === "number" &&
             typeof leadRadius === "number") {
-            var radius = popmotion.mix(followRadius, leadRadius, p);
+            var radius = Math.max(popmotion.mix(followRadius, leadRadius, p), 0);
             leadState[borderLabel] = followState[borderLabel] = radius;
         }
     }
@@ -6612,7 +6644,10 @@ function layoutStack() {
                 prevValues: prevValues,
                 crossfadeOpacity: (follow === null || follow === void 0 ? void 0 : follow.isPresenceRoot) || (lead === null || lead === void 0 ? void 0 : lead.isPresenceRoot),
             });
-            if (state.lead !== prevState.follow &&
+            if (
+            // Don't crossfade if we've just animated back from lead and switched the
+            // old follow to the new lead.
+            state.lead !== prevState.follow &&
                 (prevState.lead !== state.lead ||
                     prevState.leadIsExiting !== state.leadIsExiting)) {
                 needsCrossfadeAnimation = true;

package/dist/framer-motion.dev.js

@@ -3146,13 +3146,21 @@
         var valueTransition = getValueTransition(transition, key);
         var origin = (_a = valueTransition.from) !== null && _a !== void 0 ? _a : value.get();
         var isTargetAnimatable = isAnimatable(key, target);
-        /**
-         * If we're trying to animate from "none", try and get an animatable version
-         * of the target. This could be improved to work both ways.
-         */
         if (origin === "none" && isTargetAnimatable && typeof target === "string") {
+            /**
+             * If we're trying to animate from "none", try and get an animatable version
+             * of the target. This could be improved to work both ways.
+             */
             origin = getAnimatableNone(key, target);
         }
+        else if (isZero(origin) && typeof target === "string") {
+            origin = getZeroUnit(target);
+        }
+        else if (!Array.isArray(target) &&
+            isZero(target) &&
+            typeof origin === "string") {
+            target = getZeroUnit(origin);
+        }
         var isOriginAnimatable = isAnimatable(key, origin);
         warning(isOriginAnimatable === isTargetAnimatable, "You are trying to animate " + key + " from \"" + origin + "\" to \"" + target + "\". " + origin + " is not an animatable value - to enable this animation set " + origin + " to a value animatable to " + target + " via the `style` property.");
         function start() {
@@ -3189,6 +3197,17 @@
             ? set
             : start;
     }
+    function isZero(value) {
+        return (value === 0 ||
+            (typeof value === "string" &&
+                parseFloat(value) === 0 &&
+                value.indexOf(" ") === -1));
+    }
+    function getZeroUnit(potentialUnitType) {
+        return typeof potentialUnitType === "number"
+            ? 0
+            : getAnimatableNone("", potentialUnitType);
+    }
     function getValueTransition(transition, key) {
         return transition[key] || transition["default"] || transition;
     }
@@ -5515,10 +5534,23 @@
                 if (projectionParent) {
                     var prevParentViewportBox = projectionParent.prevViewportBox;
                     var parentLayout = projectionParent.getLayoutState().layout;
+                    /**
+                     * If we're being provided a previous parent VisualElement by AnimateSharedLayout
+                     */
                     if (prevParent) {
+                        /**
+                         * If we've been provided an explicit target box it means we're animating back
+                         * to this previous parent. So we can make a relative box by comparing to the previous
+                         * parent's layout
+                         */
                         if (targetBox) {
                             parentLayout = prevParent.getLayoutState().layout;
                         }
+                        /**
+                         * Likewise if we've been provided an explicit origin box it means we're
+                         * animating out from a different element. So we should figure out where that was
+                         * on screen relative to the new parent element.
+                         */
                         if (originBox &&
                             !checkIfParentHasChanged(prevParent, projectionParent) &&
                             prevParent.prevViewportBox) {
@@ -7728,7 +7760,7 @@
              */
             if (typeof followRadius === "number" &&
                 typeof leadRadius === "number") {
-                var radius = mix(followRadius, leadRadius, p);
+                var radius = Math.max(mix(followRadius, leadRadius, p), 0);
                 leadState[borderLabel] = followState[borderLabel] = radius;
             }
         }
@@ -7833,7 +7865,10 @@
                     prevValues: prevValues,
                     crossfadeOpacity: (follow === null || follow === void 0 ? void 0 : follow.isPresenceRoot) || (lead === null || lead === void 0 ? void 0 : lead.isPresenceRoot),
                 });
-                if (state.lead !== prevState.follow &&
+                if (
+                // Don't crossfade if we've just animated back from lead and switched the
+                // old follow to the new lead.
+                state.lead !== prevState.follow &&
                     (prevState.lead !== state.lead ||
                         prevState.leadIsExiting !== state.leadIsExiting)) {
                     needsCrossfadeAnimation = true;