framer-motion 7.6.4 → 7.6.6

package/dist/projection.dev.js

@@ -1242,7 +1242,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 = "7.6.4";
+            this.version = "7.6.6";
             /**
              * Duration, in milliseconds, since last updating frame.
              *
@@ -2570,7 +2570,7 @@
     const animationTarget = 1000;
     function createProjectionNode({ attachResizeListener, defaultParent, measureScroll, checkIsScrollRoot, resetTransform, }) {
         return class ProjectionNode {
-            constructor(id, latestValues = {}, parent = defaultParent === null || defaultParent === void 0 ? void 0 : defaultParent()) {
+            constructor(elementId, latestValues = {}, parent = defaultParent === null || defaultParent === void 0 ? void 0 : defaultParent()) {
                 /**
                  * A Set containing all this component's children. This is used to iterate
                  * through the children.
@@ -2623,7 +2623,7 @@
                 /**
                  * An object representing the calculated contextual/accumulated/tree scale.
                  * This will be used to scale calculcated projection transforms, as these are
-                 * calculated in screen-space but need to be scaled for elements to actually
+                 * calculated in screen-space but need to be scaled for elements to layoutly
                  * make it to their calculated destinations.
                  *
                  * TODO: Lazy-init
@@ -2653,13 +2653,13 @@
                  */
                 // TODO Only running on root node
                 this.sharedNodes = new Map();
-                this.id = id;
+                this.elementId = elementId;
                 this.latestValues = latestValues;
                 this.root = parent ? parent.root || parent : this;
                 this.path = parent ? [...parent.path, parent] : [];
                 this.parent = parent;
                 this.depth = parent ? parent.depth + 1 : 0;
-                id && this.root.registerPotentialNode(id, this);
+                elementId && this.root.registerPotentialNode(elementId, this);
                 for (let i = 0; i < this.path.length; i++) {
                     this.path[i].shouldResetTransform = true;
                 }
@@ -2693,12 +2693,12 @@
                     instance instanceof SVGElement && instance.tagName !== "svg";
                 this.instance = instance;
                 const { layoutId, layout, visualElement } = this.options;
-                if (visualElement && !visualElement.getInstance()) {
+                if (visualElement && !visualElement.current) {
                     visualElement.mount(instance);
                 }
                 this.root.nodes.add(this);
                 (_a = this.parent) === null || _a === void 0 ? void 0 : _a.children.add(this);
-                this.id && this.root.potentialNodes.delete(this.id);
+                this.elementId && this.root.potentialNodes.delete(this.elementId);
                 if (isLayoutDirty && (layout || layoutId)) {
                     this.isLayoutDirty = true;
                 }
@@ -2914,14 +2914,7 @@
             updateSnapshot() {
                 if (this.snapshot || !this.instance)
                     return;
-                const measured = this.measure();
-                const layout = this.removeTransform(this.removeElementScroll(measured));
-                roundBox(layout);
-                this.snapshot = {
-                    measured,
-                    layout,
-                    latestValues: {},
-                };
+                this.snapshot = this.measure();
             }
             updateLayout() {
                 var _a;
@@ -2946,18 +2939,13 @@
                         node.updateScroll();
                     }
                 }
-                const measured = this.measure();
-                roundBox(measured);
                 const prevLayout = this.layout;
-                this.layout = {
-                    measured,
-                    actual: this.removeElementScroll(measured),
-                };
+                this.layout = this.measure(false);
                 this.layoutCorrected = createBox();
                 this.isLayoutDirty = false;
                 this.projectionDelta = undefined;
-                this.notifyListeners("measure", this.layout.actual);
-                (_a = this.options.visualElement) === null || _a === void 0 ? void 0 : _a.notifyLayoutMeasure(this.layout.actual, prevLayout === null || prevLayout === void 0 ? void 0 : prevLayout.actual);
+                this.notifyListeners("measure", this.layout.layoutBox);
+                (_a = this.options.visualElement) === null || _a === void 0 ? void 0 : _a.notify("LayoutMeasure", this.layout.layoutBox, prevLayout === null || prevLayout === void 0 ? void 0 : prevLayout.layoutBox);
             }
             updateScroll() {
                 if (this.options.layoutScroll && this.instance) {
@@ -2983,7 +2971,25 @@
                     this.scheduleRender();
                 }
             }
-            measure() {
+            measure(removeTransform = true) {
+                const pageBox = this.measurePageBox();
+                let layoutBox = this.removeElementScroll(pageBox);
+                /**
+                 * Measurements taken during the pre-render stage
+                 * still have transforms applied so we remove them
+                 * via calculation.
+                 */
+                if (removeTransform) {
+                    layoutBox = this.removeTransform(layoutBox);
+                }
+                roundBox(layoutBox);
+                return {
+                    measuredBox: pageBox,
+                    layoutBox,
+                    latestValues: {},
+                };
+            }
+            measurePageBox() {
                 const { visualElement } = this.options;
                 if (!visualElement)
                     return createBox();
@@ -3064,9 +3070,9 @@
                         continue;
                     hasScale(node.latestValues) && node.updateSnapshot();
                     const sourceBox = createBox();
-                    const nodeBox = node.measure();
+                    const nodeBox = node.measurePageBox();
                     copyBoxInto(sourceBox, nodeBox);
-                    removeBoxTransforms(boxWithoutTransform, node.latestValues, (_a = node.snapshot) === null || _a === void 0 ? void 0 : _a.layout, sourceBox);
+                    removeBoxTransforms(boxWithoutTransform, node.latestValues, (_a = node.snapshot) === null || _a === void 0 ? void 0 : _a.layoutBox, sourceBox);
                 }
                 if (hasTransform(this.latestValues)) {
                     removeBoxTransforms(boxWithoutTransform, this.latestValues);
@@ -3115,13 +3121,17 @@
                 // TODO If this is unsuccessful this currently happens every frame
                 if (!this.targetDelta && !this.relativeTarget) {
                     // TODO: This is a semi-repetition of further down this function, make DRY
-                    this.relativeParent = this.getClosestProjectingParent();
-                    if (this.relativeParent && this.relativeParent.layout) {
+                    const relativeParent = this.getClosestProjectingParent();
+                    if (relativeParent && relativeParent.layout) {
+                        this.relativeParent = relativeParent;
                         this.relativeTarget = createBox();
                         this.relativeTargetOrigin = createBox();
-                        calcRelativePosition(this.relativeTargetOrigin, this.layout.actual, this.relativeParent.layout.actual);
+                        calcRelativePosition(this.relativeTargetOrigin, this.layout.layoutBox, relativeParent.layout.layoutBox);
                         copyBoxInto(this.relativeTarget, this.relativeTargetOrigin);
                     }
+                    else {
+                        this.relativeParent = this.relativeTarget = undefined;
+                    }
                 }
                 /**
                  * If we have no relative target or no target delta our target isn't valid
@@ -3150,10 +3160,10 @@
                 else if (this.targetDelta) {
                     if (Boolean(this.resumingFrom)) {
                         // TODO: This is creating a new object every frame
-                        this.target = this.applyTransform(this.layout.actual);
+                        this.target = this.applyTransform(this.layout.layoutBox);
                     }
                     else {
-                        copyBoxInto(this.target, this.layout.actual);
+                        copyBoxInto(this.target, this.layout.layoutBox);
                     }
                     applyBoxDelta(this.target, this.targetDelta);
                 }
@@ -3161,24 +3171,28 @@
                     /**
                      * If no target, use own layout as target
                      */
-                    copyBoxInto(this.target, this.layout.actual);
+                    copyBoxInto(this.target, this.layout.layoutBox);
                 }
                 /**
                  * If we've been told to attempt to resolve a relative target, do so.
                  */
                 if (this.attemptToResolveRelativeTarget) {
                     this.attemptToResolveRelativeTarget = false;
-                    this.relativeParent = this.getClosestProjectingParent();
-                    if (this.relativeParent &&
-                        Boolean(this.relativeParent.resumingFrom) ===
+                    const relativeParent = this.getClosestProjectingParent();
+                    if (relativeParent &&
+                        Boolean(relativeParent.resumingFrom) ===
                             Boolean(this.resumingFrom) &&
-                        !this.relativeParent.options.layoutScroll &&
-                        this.relativeParent.target) {
+                        !relativeParent.options.layoutScroll &&
+                        relativeParent.target) {
+                        this.relativeParent = relativeParent;
                         this.relativeTarget = createBox();
                         this.relativeTargetOrigin = createBox();
-                        calcRelativePosition(this.relativeTargetOrigin, this.target, this.relativeParent.target);
+                        calcRelativePosition(this.relativeTargetOrigin, this.target, relativeParent.target);
                         copyBoxInto(this.relativeTarget, this.relativeTargetOrigin);
                     }
+                    else {
+                        this.relativeParent = this.relativeTarget = undefined;
+                    }
                 }
             }
             getClosestProjectingParent() {
@@ -3214,7 +3228,7 @@
                  * Reset the corrected box with the latest values from box, as we're then going
                  * to perform mutative operations on it.
                  */
-                copyBoxInto(this.layoutCorrected, this.layout.actual);
+                copyBoxInto(this.layoutCorrected, this.layout.layoutBox);
                 /**
                  * Apply all the parent deltas to this box to produce the corrected box. This
                  * is the layout box, as it will appear on screen as a result of the transforms of its parents.
@@ -3291,7 +3305,7 @@
                         this.relativeTargetOrigin &&
                         this.layout &&
                         ((_a = this.relativeParent) === null || _a === void 0 ? void 0 : _a.layout)) {
-                        calcRelativePosition(relativeLayout, this.layout.actual, this.relativeParent.layout.actual);
+                        calcRelativePosition(relativeLayout, this.layout.layoutBox, this.relativeParent.layout.layoutBox);
                         mixBox(this.relativeTarget, this.relativeTargetOrigin, relativeLayout, progress);
                     }
                     if (isSharedLayoutAnimation) {
@@ -3375,12 +3389,12 @@
                 if (this !== lead &&
                     this.layout &&
                     layout &&
-                    shouldAnimatePositionOnly(this.options.animationType, this.layout.actual, layout.actual)) {
+                    shouldAnimatePositionOnly(this.options.animationType, this.layout.layoutBox, layout.layoutBox)) {
                     target = this.target || createBox();
-                    const xLength = calcLength(this.layout.actual.x);
+                    const xLength = calcLength(this.layout.layoutBox.x);
                     target.x.min = lead.target.x.min;
                     target.x.max = target.x.min + xLength;
-                    const yLength = calcLength(this.layout.actual.y);
+                    const yLength = calcLength(this.layout.layoutBox.y);
                     target.y.min = lead.target.y.min;
                     target.y.max = target.y.min + yLength;
                 }
@@ -3394,7 +3408,7 @@
                 /**
                  * Update the delta between the corrected box and the final target box, after
                  * user-set transforms are applied to it. This will be used by the renderer to
-                 * create a transform style that will reproject the element from its actual layout
+                 * create a transform style that will reproject the element from its layout layout
                  * into the desired bounding box.
                  */
                 calcBoxDelta(this.projectionDeltaWithTransform, this.layoutCorrected, targetWithTransforms, latestValues);
@@ -3477,7 +3491,7 @@
                     return;
                 // Force a render of this element to apply the transform with all rotations
                 // set to 0.
-                visualElement === null || visualElement === void 0 ? void 0 : visualElement.syncRender();
+                visualElement === null || visualElement === void 0 ? void 0 : visualElement.render();
                 // Put back all the values we reset
                 for (const key in resetValues) {
                     visualElement.setStaticValue(key, resetValues[key]);
@@ -3550,7 +3564,7 @@
                 }
                 else {
                     /**
-                     * Or we're not animating at all, set the lead component to its actual
+                     * Or we're not animating at all, set the lead component to its layout
                      * opacity and other components to hidden.
                      */
                     styles.opacity =
@@ -3614,53 +3628,53 @@
             node.layout &&
             snapshot &&
             node.hasListeners("didUpdate")) {
-            const { actual: layout, measured: measuredLayout } = node.layout;
+            const { layoutBox: layout, measuredBox: measuredLayout } = node.layout;
             const { animationType } = node.options;
             // TODO Maybe we want to also resize the layout snapshot so we don't trigger
             // animations for instance if layout="size" and an element has only changed position
             if (animationType === "size") {
                 eachAxis((axis) => {
                     const axisSnapshot = snapshot.isShared
-                        ? snapshot.measured[axis]
-                        : snapshot.layout[axis];
+                        ? snapshot.measuredBox[axis]
+                        : snapshot.layoutBox[axis];
                     const length = calcLength(axisSnapshot);
                     axisSnapshot.min = layout[axis].min;
                     axisSnapshot.max = axisSnapshot.min + length;
                 });
             }
-            else if (shouldAnimatePositionOnly(animationType, snapshot.layout, layout)) {
+            else if (shouldAnimatePositionOnly(animationType, snapshot.layoutBox, layout)) {
                 eachAxis((axis) => {
                     const axisSnapshot = snapshot.isShared
-                        ? snapshot.measured[axis]
-                        : snapshot.layout[axis];
+                        ? snapshot.measuredBox[axis]
+                        : snapshot.layoutBox[axis];
                     const length = calcLength(layout[axis]);
                     axisSnapshot.max = axisSnapshot.min + length;
                 });
             }
             const layoutDelta = createDelta();
-            calcBoxDelta(layoutDelta, layout, snapshot.layout);
+            calcBoxDelta(layoutDelta, layout, snapshot.layoutBox);
             const visualDelta = createDelta();
             if (snapshot.isShared) {
-                calcBoxDelta(visualDelta, node.applyTransform(measuredLayout, true), snapshot.measured);
+                calcBoxDelta(visualDelta, node.applyTransform(measuredLayout, true), snapshot.measuredBox);
             }
             else {
-                calcBoxDelta(visualDelta, layout, snapshot.layout);
+                calcBoxDelta(visualDelta, layout, snapshot.layoutBox);
             }
             const hasLayoutChanged = !isDeltaZero(layoutDelta);
             let hasRelativeTargetChanged = false;
             if (!node.resumeFrom) {
-                node.relativeParent = node.getClosestProjectingParent();
+                const relativeParent = node.getClosestProjectingParent();
                 /**
                  * If the relativeParent is itself resuming from a different element then
                  * the relative snapshot is not relavent
                  */
-                if (node.relativeParent && !node.relativeParent.resumeFrom) {
-                    const { snapshot: parentSnapshot, layout: parentLayout } = node.relativeParent;
+                if (relativeParent && !relativeParent.resumeFrom) {
+                    const { snapshot: parentSnapshot, layout: parentLayout } = relativeParent;
                     if (parentSnapshot && parentLayout) {
                         const relativeSnapshot = createBox();
-                        calcRelativePosition(relativeSnapshot, snapshot.layout, parentSnapshot.layout);
+                        calcRelativePosition(relativeSnapshot, snapshot.layoutBox, parentSnapshot.layoutBox);
                         const relativeLayout = createBox();
-                        calcRelativePosition(relativeLayout, layout, parentLayout.actual);
+                        calcRelativePosition(relativeLayout, layout, parentLayout.layoutBox);
                         if (!boxEquals(relativeSnapshot, relativeLayout)) {
                             hasRelativeTargetChanged = true;
                         }
@@ -3695,7 +3709,7 @@
     function resetTransformStyle(node) {
         const { visualElement } = node.options;
         if (visualElement === null || visualElement === void 0 ? void 0 : visualElement.getProps().onBeforeLayoutMeasure) {
-            visualElement.notifyBeforeLayoutMeasure();
+            visualElement.notify("BeforeLayoutMeasure");
         }
         node.resetTransform();
     }
@@ -3976,7 +3990,7 @@
      * @internal
      */
     function resolveCSSVariables(visualElement, { ...target }, transitionEnd) {
-        const element = visualElement.getInstance();
+        const element = visualElement.current;
         if (!(element instanceof Element))
             return { target, transitionEnd };
         // If `transitionEnd` isn't `undefined`, clone it. We could clone `target` and `transitionEnd`
@@ -3985,7 +3999,7 @@
             transitionEnd = { ...transitionEnd };
         }
         // Go through existing `MotionValue`s and ensure any existing CSS variables are resolved
-        visualElement.forEachValue((value) => {
+        visualElement.values.forEach((value) => {
             const current = value.get();
             if (!isCSSVariable$1(current))
                 return;
@@ -4066,33 +4080,148 @@
         },
     };
 
-    const isBrowser = typeof document !== "undefined";
+    /**
+     * Returns true if the provided key is a CSS variable
+     */
+    function isCSSVariable(key) {
+        return key.startsWith("--");
+    }
 
-    // Does this device prefer reduced motion? Returns `null` server-side.
-    const prefersReducedMotion = { current: null };
-    const hasReducedMotionListener = { current: false };
+    /**
+     * Provided a value and a ValueType, returns the value as that value type.
+     */
+    const getValueAsType = (value, type) => {
+        return type && typeof value === "number"
+            ? type.transform(value)
+            : value;
+    };
 
-    function initPrefersReducedMotion() {
-        hasReducedMotionListener.current = true;
-        if (!isBrowser)
-            return;
-        if (window.matchMedia) {
-            const motionMediaQuery = window.matchMedia("(prefers-reduced-motion)");
-            const setReducedMotionPreferences = () => (prefersReducedMotion.current = motionMediaQuery.matches);
-            motionMediaQuery.addListener(setReducedMotionPreferences);
-            setReducedMotionPreferences();
+    function buildHTMLStyles(state, latestValues, options, transformTemplate) {
+        const { style, vars, transform, transformKeys, transformOrigin } = state;
+        transformKeys.length = 0;
+        // Track whether we encounter any transform or transformOrigin values.
+        let hasTransform = false;
+        let hasTransformOrigin = false;
+        // Does the calculated transform essentially equal "none"?
+        let transformIsNone = true;
+        /**
+         * Loop over all our latest animated values and decide whether to handle them
+         * as a style or CSS variable.
+         *
+         * Transforms and transform origins are kept seperately for further processing.
+         */
+        for (const key in latestValues) {
+            const value = latestValues[key];
+            /**
+             * If this is a CSS variable we don't do any further processing.
+             */
+            if (isCSSVariable(key)) {
+                vars[key] = value;
+                continue;
+            }
+            // Convert the value to its default value type, ie 0 -> "0px"
+            const valueType = numberValueTypes[key];
+            const valueAsType = getValueAsType(value, valueType);
+            if (transformProps.has(key)) {
+                // If this is a transform, flag to enable further transform processing
+                hasTransform = true;
+                transform[key] = valueAsType;
+                transformKeys.push(key);
+                // If we already know we have a non-default transform, early return
+                if (!transformIsNone)
+                    continue;
+                // Otherwise check to see if this is a default transform
+                if (value !== (valueType.default || 0))
+                    transformIsNone = false;
+            }
+            else if (key.startsWith("origin")) {
+                // If this is a transform origin, flag and enable further transform-origin processing
+                hasTransformOrigin = true;
+                transformOrigin[key] = valueAsType;
+            }
+            else {
+                style[key] = valueAsType;
+            }
         }
-        else {
-            prefersReducedMotion.current = false;
+        if (!latestValues.transform) {
+            if (hasTransform || transformTemplate) {
+                style.transform = buildTransform(state, options, transformIsNone, transformTemplate);
+            }
+            else if (style.transform) {
+                /**
+                 * If we have previously created a transform but currently don't have any,
+                 * reset transform style to none.
+                 */
+                style.transform = "none";
+            }
+        }
+        /**
+         * Build a transformOrigin style. Uses the same defaults as the browser for
+         * undefined origins.
+         */
+        if (hasTransformOrigin) {
+            const { originX = "50%", originY = "50%", originZ = 0, } = transformOrigin;
+            style.transformOrigin = `${originX} ${originY} ${originZ}`;
         }
     }
 
-    function isWillChangeMotionValue(value) {
-        return Boolean(isMotionValue(value) && value.add);
+    function isForcedMotionValue(key, { layout, layoutId }) {
+        return (transformProps.has(key) ||
+            key.startsWith("origin") ||
+            ((layout || layoutId !== undefined) &&
+                (!!scaleCorrectors[key] || key === "opacity")));
     }
 
-    function isAnimationControls(v) {
-        return typeof v === "object" && typeof v.start === "function";
+    function scrapeMotionValuesFromProps(props) {
+        const { style } = props;
+        const newValues = {};
+        for (const key in style) {
+            if (isMotionValue(style[key]) || isForcedMotionValue(key, props)) {
+                newValues[key] = style[key];
+            }
+        }
+        return newValues;
+    }
+
+    function renderHTML(element, { style, vars }, styleProp, projection) {
+        Object.assign(element.style, style, projection && projection.getProjectionStyles(styleProp));
+        // Loop over any CSS variables and assign those.
+        for (const key in vars) {
+            element.style.setProperty(key, vars[key]);
+        }
+    }
+
+    /**
+     * Bounding boxes tend to be defined as top, left, right, bottom. For various operations
+     * it's easier to consider each axis individually. This function returns a bounding box
+     * as a map of single-axis min/max values.
+     */
+    function convertBoundingBoxToBox({ top, left, right, bottom, }) {
+        return {
+            x: { min: left, max: right },
+            y: { min: top, max: bottom },
+        };
+    }
+    /**
+     * Applies a TransformPoint function to a bounding box. TransformPoint is usually a function
+     * provided by Framer to allow measured points to be corrected for device scaling. This is used
+     * when measuring DOM elements and DOM event points.
+     */
+    function transformBoxPoints(point, transformPoint) {
+        if (!transformPoint)
+            return point;
+        const topLeft = transformPoint({ x: point.left, y: point.top });
+        const bottomRight = transformPoint({ x: point.right, y: point.bottom });
+        return {
+            top: topLeft.y,
+            left: topLeft.x,
+            bottom: bottomRight.y,
+            right: bottomRight.x,
+        };
+    }
+
+    function measureViewportBox(instance, transformPoint) {
+        return convertBoundingBoxToBox(transformBoxPoints(instance.getBoundingClientRect(), transformPoint));
     }
 
     /**
@@ -4204,7 +4333,8 @@
             if (origin[key] === undefined) {
                 origin[key] = value;
             }
-            visualElement.setBaseTarget(key, value);
+            if (value !== null)
+                visualElement.setBaseTarget(key, value);
         }
     }
     function getOriginFromTransition(key, transition) {
@@ -4226,141 +4356,345 @@
         return origin;
     }
 
-    /**
-     * Decides if the supplied variable is variant label
-     */
-    function isVariantLabel(v) {
-        return typeof v === "string" || Array.isArray(v);
-    }
-
-    var AnimationType;
-    (function (AnimationType) {
-        AnimationType["Animate"] = "animate";
-        AnimationType["Hover"] = "whileHover";
-        AnimationType["Tap"] = "whileTap";
-        AnimationType["Drag"] = "whileDrag";
-        AnimationType["Focus"] = "whileFocus";
-        AnimationType["InView"] = "whileInView";
-        AnimationType["Exit"] = "exit";
-    })(AnimationType || (AnimationType = {}));
-
-    const variantPriorityOrder = [
-        AnimationType.Animate,
-        AnimationType.InView,
-        AnimationType.Focus,
-        AnimationType.Hover,
-        AnimationType.Tap,
-        AnimationType.Drag,
-        AnimationType.Exit,
-    ];
-
-    const names = [
-        "LayoutMeasure",
-        "BeforeLayoutMeasure",
-        "LayoutUpdate",
-        "ViewportBoxUpdate",
-        "Update",
-        "Render",
-        "AnimationComplete",
-        "LayoutAnimationComplete",
-        "AnimationStart",
-        "LayoutAnimationStart",
-        "SetAxisTarget",
-        "Unmount",
-    ];
-    function createLifecycles() {
-        const managers = names.map(() => new SubscriptionManager());
-        const propSubscriptions = {};
-        const lifecycles = {
-            clearAllListeners: () => managers.forEach((manager) => manager.clear()),
-            updatePropListeners: (props) => {
-                names.forEach((name) => {
-                    var _a;
-                    const on = "on" + name;
-                    const propListener = props[on];
-                    // Unsubscribe existing subscription
-                    (_a = propSubscriptions[name]) === null || _a === void 0 ? void 0 : _a.call(propSubscriptions);
-                    // Add new subscription
-                    if (propListener) {
-                        propSubscriptions[name] = lifecycles[on](propListener);
-                    }
-                });
-            },
-        };
-        managers.forEach((manager, i) => {
-            lifecycles["on" + names[i]] = (handler) => manager.add(handler);
-            lifecycles["notify" + names[i]] = (...args) => manager.notify(...args);
-        });
-        return lifecycles;
-    }
-
-    const warned = new Set();
-    function warnOnce(condition, message, element) {
-        if (condition || warned.has(message))
-            return;
-        console.warn(message);
-        if (element)
-            console.warn(element);
-        warned.add(message);
-    }
+    const isBrowser = typeof document !== "undefined";
 
-    function updateMotionValuesFromProps(element, next, prev) {
-        const { willChange } = next;
-        for (const key in next) {
-            const nextValue = next[key];
-            const prevValue = prev[key];
-            if (isMotionValue(nextValue)) {
-                /**
-                 * If this is a motion value found in props or style, we want to add it
-                 * to our visual element's motion value map.
-                 */
-                element.addValue(key, nextValue);
-                if (isWillChangeMotionValue(willChange)) {
-                    willChange.add(key);
-                }
-                /**
-                 * Check the version of the incoming motion value with this version
-                 * and warn against mismatches.
-                 */
-                {
-                    warnOnce(nextValue.version === "7.6.4", `Attempting to mix Framer Motion versions ${nextValue.version} with 7.6.4 may not work as expected.`);
-                }
-            }
-            else if (isMotionValue(prevValue)) {
-                /**
-                 * If we're swapping from a motion value to a static value,
-                 * create a new motion value from that
-                 */
-                element.addValue(key, motionValue(nextValue));
-                if (isWillChangeMotionValue(willChange)) {
-                    willChange.remove(key);
-                }
-            }
-            else if (prevValue !== nextValue) {
-                /**
-                 * If this is a flat value that has changed, update the motion value
-                 * or create one if it doesn't exist. We only want to do this if we're
-                 * not handling the value with our animation state.
-                 */
-                if (element.hasValue(key)) {
-                    const existingValue = element.getValue(key);
-                    // TODO: Only update values that aren't being animated or even looked at
-                    !existingValue.hasAnimated && existingValue.set(nextValue);
+    const positionalKeys = new Set([
+        "width",
+        "height",
+        "top",
+        "left",
+        "right",
+        "bottom",
+        "x",
+        "y",
+    ]);
+    const isPositionalKey = (key) => positionalKeys.has(key);
+    const hasPositionalKey = (target) => {
+        return Object.keys(target).some(isPositionalKey);
+    };
+    const setAndResetVelocity = (value, to) => {
+        // Looks odd but setting it twice doesn't render, it'll just
+        // set both prev and current to the latest value
+        value.set(to, false);
+        value.set(to);
+    };
+    const isNumOrPxType = (v) => v === number || v === px;
+    var BoundingBoxDimension;
+    (function (BoundingBoxDimension) {
+        BoundingBoxDimension["width"] = "width";
+        BoundingBoxDimension["height"] = "height";
+        BoundingBoxDimension["left"] = "left";
+        BoundingBoxDimension["right"] = "right";
+        BoundingBoxDimension["top"] = "top";
+        BoundingBoxDimension["bottom"] = "bottom";
+    })(BoundingBoxDimension || (BoundingBoxDimension = {}));
+    const getPosFromMatrix = (matrix, pos) => parseFloat(matrix.split(", ")[pos]);
+    const getTranslateFromMatrix = (pos2, pos3) => (_bbox, { transform }) => {
+        if (transform === "none" || !transform)
+            return 0;
+        const matrix3d = transform.match(/^matrix3d\((.+)\)$/);
+        if (matrix3d) {
+            return getPosFromMatrix(matrix3d[1], pos3);
+        }
+        else {
+            const matrix = transform.match(/^matrix\((.+)\)$/);
+            if (matrix) {
+                return getPosFromMatrix(matrix[1], pos2);
+            }
+            else {
+                return 0;
+            }
+        }
+    };
+    const transformKeys = new Set(["x", "y", "z"]);
+    const nonTranslationalTransformKeys = transformPropOrder.filter((key) => !transformKeys.has(key));
+    function removeNonTranslationalTransform(visualElement) {
+        const removedTransforms = [];
+        nonTranslationalTransformKeys.forEach((key) => {
+            const value = visualElement.getValue(key);
+            if (value !== undefined) {
+                removedTransforms.push([key, value.get()]);
+                value.set(key.startsWith("scale") ? 1 : 0);
+            }
+        });
+        // Apply changes to element before measurement
+        if (removedTransforms.length)
+            visualElement.render();
+        return removedTransforms;
+    }
+    const positionalValues = {
+        // Dimensions
+        width: ({ x }, { paddingLeft = "0", paddingRight = "0" }) => x.max - x.min - parseFloat(paddingLeft) - parseFloat(paddingRight),
+        height: ({ y }, { paddingTop = "0", paddingBottom = "0" }) => y.max - y.min - parseFloat(paddingTop) - parseFloat(paddingBottom),
+        top: (_bbox, { top }) => parseFloat(top),
+        left: (_bbox, { left }) => parseFloat(left),
+        bottom: ({ y }, { top }) => parseFloat(top) + (y.max - y.min),
+        right: ({ x }, { left }) => parseFloat(left) + (x.max - x.min),
+        // Transform
+        x: getTranslateFromMatrix(4, 13),
+        y: getTranslateFromMatrix(5, 14),
+    };
+    const convertChangedValueTypes = (target, visualElement, changedKeys) => {
+        const originBbox = visualElement.measureViewportBox();
+        const element = visualElement.current;
+        const elementComputedStyle = getComputedStyle(element);
+        const { display } = elementComputedStyle;
+        const origin = {};
+        // If the element is currently set to display: "none", make it visible before
+        // measuring the target bounding box
+        if (display === "none") {
+            visualElement.setStaticValue("display", target.display || "block");
+        }
+        /**
+         * Record origins before we render and update styles
+         */
+        changedKeys.forEach((key) => {
+            origin[key] = positionalValues[key](originBbox, elementComputedStyle);
+        });
+        // Apply the latest values (as set in checkAndConvertChangedValueTypes)
+        visualElement.render();
+        const targetBbox = visualElement.measureViewportBox();
+        changedKeys.forEach((key) => {
+            // Restore styles to their **calculated computed style**, not their actual
+            // originally set style. This allows us to animate between equivalent pixel units.
+            const value = visualElement.getValue(key);
+            setAndResetVelocity(value, origin[key]);
+            target[key] = positionalValues[key](targetBbox, elementComputedStyle);
+        });
+        return target;
+    };
+    const checkAndConvertChangedValueTypes = (visualElement, target, origin = {}, transitionEnd = {}) => {
+        target = { ...target };
+        transitionEnd = { ...transitionEnd };
+        const targetPositionalKeys = Object.keys(target).filter(isPositionalKey);
+        // We want to remove any transform values that could affect the element's bounding box before
+        // it's measured. We'll reapply these later.
+        let removedTransformValues = [];
+        let hasAttemptedToRemoveTransformValues = false;
+        const changedValueTypeKeys = [];
+        targetPositionalKeys.forEach((key) => {
+            const value = visualElement.getValue(key);
+            if (!visualElement.hasValue(key))
+                return;
+            let from = origin[key];
+            let fromType = findDimensionValueType(from);
+            const to = target[key];
+            let toType;
+            // TODO: The current implementation of this basically throws an error
+            // if you try and do value conversion via keyframes. There's probably
+            // a way of doing this but the performance implications would need greater scrutiny,
+            // as it'd be doing multiple resize-remeasure operations.
+            if (isKeyframesTarget(to)) {
+                const numKeyframes = to.length;
+                const fromIndex = to[0] === null ? 1 : 0;
+                from = to[fromIndex];
+                fromType = findDimensionValueType(from);
+                for (let i = fromIndex; i < numKeyframes; i++) {
+                    if (!toType) {
+                        toType = findDimensionValueType(to[i]);
+                        invariant(toType === fromType ||
+                            (isNumOrPxType(fromType) && isNumOrPxType(toType)), "Keyframes must be of the same dimension as the current value");
+                    }
+                    else {
+                        invariant(findDimensionValueType(to[i]) === toType, "All keyframes must be of the same type");
+                    }
+                }
+            }
+            else {
+                toType = findDimensionValueType(to);
+            }
+            if (fromType !== toType) {
+                // If they're both just number or px, convert them both to numbers rather than
+                // relying on resize/remeasure to convert (which is wasteful in this situation)
+                if (isNumOrPxType(fromType) && isNumOrPxType(toType)) {
+                    const current = value.get();
+                    if (typeof current === "string") {
+                        value.set(parseFloat(current));
+                    }
+                    if (typeof to === "string") {
+                        target[key] = parseFloat(to);
+                    }
+                    else if (Array.isArray(to) && toType === px) {
+                        target[key] = to.map(parseFloat);
+                    }
+                }
+                else if ((fromType === null || fromType === void 0 ? void 0 : fromType.transform) &&
+                    (toType === null || toType === void 0 ? void 0 : toType.transform) &&
+                    (from === 0 || to === 0)) {
+                    // If one or the other value is 0, it's safe to coerce it to the
+                    // type of the other without measurement
+                    if (from === 0) {
+                        value.set(toType.transform(from));
+                    }
+                    else {
+                        target[key] = fromType.transform(to);
+                    }
                 }
                 else {
-                    const latestValue = element.getStaticValue(key);
-                    element.addValue(key, motionValue(latestValue !== undefined ? latestValue : nextValue));
+                    // If we're going to do value conversion via DOM measurements, we first
+                    // need to remove non-positional transform values that could affect the bbox measurements.
+                    if (!hasAttemptedToRemoveTransformValues) {
+                        removedTransformValues =
+                            removeNonTranslationalTransform(visualElement);
+                        hasAttemptedToRemoveTransformValues = true;
+                    }
+                    changedValueTypeKeys.push(key);
+                    transitionEnd[key] =
+                        transitionEnd[key] !== undefined
+                            ? transitionEnd[key]
+                            : target[key];
+                    setAndResetVelocity(value, to);
                 }
             }
+        });
+        if (changedValueTypeKeys.length) {
+            const scrollY = changedValueTypeKeys.indexOf("height") >= 0
+                ? window.pageYOffset
+                : null;
+            const convertedTarget = convertChangedValueTypes(target, visualElement, changedValueTypeKeys);
+            // If we removed transform values, reapply them before the next render
+            if (removedTransformValues.length) {
+                removedTransformValues.forEach(([key, value]) => {
+                    visualElement.getValue(key).set(value);
+                });
+            }
+            // Reapply original values
+            visualElement.render();
+            // Restore scroll position
+            if (isBrowser && scrollY !== null) {
+                window.scrollTo({ top: scrollY });
+            }
+            return { target: convertedTarget, transitionEnd };
         }
-        // Handle removed values
-        for (const key in prev) {
-            if (next[key] === undefined)
-                element.removeValue(key);
+        else {
+            return { target, transitionEnd };
         }
-        return next;
+    };
+    /**
+     * Convert value types for x/y/width/height/top/left/bottom/right
+     *
+     * Allows animation between `'auto'` -> `'100%'` or `0` -> `'calc(50% - 10vw)'`
+     *
+     * @internal
+     */
+    function unitConversion(visualElement, target, origin, transitionEnd) {
+        return hasPositionalKey(target)
+            ? checkAndConvertChangedValueTypes(visualElement, target, origin, transitionEnd)
+            : { target, transitionEnd };
+    }
+
+    /**
+     * Parse a DOM variant to make it animatable. This involves resolving CSS variables
+     * and ensuring animations like "20%" => "calc(50vw)" are performed in pixels.
+     */
+    const parseDomVariant = (visualElement, target, origin, transitionEnd) => {
+        const resolved = resolveCSSVariables(visualElement, target, transitionEnd);
+        target = resolved.target;
+        transitionEnd = resolved.transitionEnd;
+        return unitConversion(visualElement, target, origin, transitionEnd);
+    };
+
+    const createDefinition = (propNames) => ({
+        isEnabled: (props) => propNames.some((name) => !!props[name]),
+    });
+    const featureDefinitions = {
+        measureLayout: createDefinition(["layout", "layoutId", "drag"]),
+        animation: createDefinition([
+            "animate",
+            "exit",
+            "variants",
+            "whileHover",
+            "whileTap",
+            "whileFocus",
+            "whileDrag",
+            "whileInView",
+        ]),
+        exit: createDefinition(["exit"]),
+        drag: createDefinition(["drag", "dragControls"]),
+        focus: createDefinition(["whileFocus"]),
+        hover: createDefinition(["whileHover", "onHoverStart", "onHoverEnd"]),
+        tap: createDefinition(["whileTap", "onTap", "onTapStart", "onTapCancel"]),
+        pan: createDefinition([
+            "onPan",
+            "onPanStart",
+            "onPanSessionStart",
+            "onPanEnd",
+        ]),
+        inView: createDefinition([
+            "whileInView",
+            "onViewportEnter",
+            "onViewportLeave",
+        ]),
+    };
+
+    function isRefObject(ref) {
+        return (typeof ref === "object" &&
+            Object.prototype.hasOwnProperty.call(ref, "current"));
+    }
+
+    /**
+     * Browser-safe usage of process
+     */
+    const defaultEnvironment = "production";
+    const env = typeof process === "undefined" || process.env === undefined
+        ? defaultEnvironment
+        : "development" ;
+
+    // Does this device prefer reduced motion? Returns `null` server-side.
+    const prefersReducedMotion = { current: null };
+    const hasReducedMotionListener = { current: false };
+
+    function initPrefersReducedMotion() {
+        hasReducedMotionListener.current = true;
+        if (!isBrowser)
+            return;
+        if (window.matchMedia) {
+            const motionMediaQuery = window.matchMedia("(prefers-reduced-motion)");
+            const setReducedMotionPreferences = () => (prefersReducedMotion.current = motionMediaQuery.matches);
+            motionMediaQuery.addListener(setReducedMotionPreferences);
+            setReducedMotionPreferences();
+        }
+        else {
+            prefersReducedMotion.current = false;
+        }
+    }
+
+    function isWillChangeMotionValue(value) {
+        return Boolean(isMotionValue(value) && value.add);
     }
 
+    function isAnimationControls(v) {
+        return typeof v === "object" && typeof v.start === "function";
+    }
+
+    /**
+     * Decides if the supplied variable is variant label
+     */
+    function isVariantLabel(v) {
+        return typeof v === "string" || Array.isArray(v);
+    }
+
+    var AnimationType;
+    (function (AnimationType) {
+        AnimationType["Animate"] = "animate";
+        AnimationType["Hover"] = "whileHover";
+        AnimationType["Tap"] = "whileTap";
+        AnimationType["Drag"] = "whileDrag";
+        AnimationType["Focus"] = "whileFocus";
+        AnimationType["InView"] = "whileInView";
+        AnimationType["Exit"] = "exit";
+    })(AnimationType || (AnimationType = {}));
+
+    const variantPriorityOrder = [
+        AnimationType.Animate,
+        AnimationType.InView,
+        AnimationType.Focus,
+        AnimationType.Hover,
+        AnimationType.Tap,
+        AnimationType.Drag,
+        AnimationType.Exit,
+    ];
+
     const variantProps$1 = [
         "initial",
         "animate",
@@ -4379,989 +4713,552 @@
         return Boolean(isControllingVariants(props) || props.variants);
     }
 
-    /**
-     * Browser-safe usage of process
-     */
-    const defaultEnvironment = "production";
-    const env = typeof process === "undefined" || process.env === undefined
-        ? defaultEnvironment
-        : "development" ;
-
-    const createDefinition = (propNames) => ({
-        isEnabled: (props) => propNames.some((name) => !!props[name]),
-    });
-    const featureDefinitions = {
-        measureLayout: createDefinition(["layout", "layoutId", "drag"]),
-        animation: createDefinition([
-            "animate",
-            "exit",
-            "variants",
-            "whileHover",
-            "whileTap",
-            "whileFocus",
-            "whileDrag",
-            "whileInView",
-        ]),
-        exit: createDefinition(["exit"]),
-        drag: createDefinition(["drag", "dragControls"]),
-        focus: createDefinition(["whileFocus"]),
-        hover: createDefinition(["whileHover", "onHoverStart", "onHoverEnd"]),
-        tap: createDefinition(["whileTap", "onTap", "onTapStart", "onTapCancel"]),
-        pan: createDefinition([
-            "onPan",
-            "onPanStart",
-            "onPanSessionStart",
-            "onPanEnd",
-        ]),
-        inView: createDefinition([
-            "whileInView",
-            "onViewportEnter",
-            "onViewportLeave",
-        ]),
-    };
-
-    function isRefObject(ref) {
-        return (typeof ref === "object" &&
-            Object.prototype.hasOwnProperty.call(ref, "current"));
+    const warned = new Set();
+    function warnOnce(condition, message, element) {
+        if (condition || warned.has(message))
+            return;
+        console.warn(message);
+        if (element)
+            console.warn(element);
+        warned.add(message);
     }
 
-    const featureNames = Object.keys(featureDefinitions);
-    const numFeatures = featureNames.length;
-    const visualElement = ({ treeType = "", build, getBaseTarget, makeTargetAnimatable, measureViewportBox, render: renderInstance, readValueFromInstance, removeValueFromRenderState, sortNodePosition, scrapeMotionValuesFromProps, }) => ({ parent, props, presenceId, blockInitialAnimation, visualState, reducedMotionConfig, }, options = {}) => {
-        let isMounted = false;
-        const { latestValues, renderState } = visualState;
-        /**
-         * The instance of the render-specific node that will be hydrated by the
-         * exposed React ref. So for example, this visual element can host a
-         * HTMLElement, plain object, or Three.js object. The functions provided
-         * in VisualElementConfig allow us to interface with this instance.
-         */
-        let instance;
-        /**
-         * Manages the subscriptions for a visual element's lifecycle, for instance
-         * onRender
-         */
-        const lifecycles = createLifecycles();
-        /**
-         * A map of all motion values attached to this visual element. Motion
-         * values are source of truth for any given animated value. A motion
-         * value might be provided externally by the component via props.
-         */
-        const values = new Map();
-        /**
-         * A map of every subscription that binds the provided or generated
-         * motion values onChange listeners to this visual element.
-         */
-        const valueSubscriptions = new Map();
-        /**
-         * A reference to the previously-provided motion values as returned
-         * from scrapeMotionValuesFromProps. We use the keys in here to determine
-         * if any motion values need to be removed after props are updated.
-         */
-        let prevMotionValues = {};
-        /**
-         * When values are removed from all animation props we need to search
-         * for a fallback value to animate to. These values are tracked in baseTarget.
-         */
-        const baseTarget = {
-            ...latestValues,
-        };
-        /**
-         * Create an object of the values we initially animated from (if initial prop present).
-         */
-        const initialValues = props.initial ? { ...latestValues } : {};
-        // Internal methods ========================
-        /**
-         * On mount, this will be hydrated with a callback to disconnect
-         * this visual element from its parent on unmount.
-         */
-        let removeFromVariantTree;
-        /**
-         * Render the element with the latest styles outside of the React
-         * render lifecycle
-         */
-        function render() {
-            if (!instance || !isMounted)
-                return;
-            triggerBuild();
-            renderInstance(instance, renderState, props.style, element.projection);
-        }
-        function triggerBuild() {
-            build(element, renderState, latestValues, options, props);
-        }
-        function update() {
-            lifecycles.notifyUpdate(latestValues);
-        }
-        /**
-         *
-         */
-        function bindToMotionValue(key, value) {
-            const removeOnChange = value.onChange((latestValue) => {
-                latestValues[key] = latestValue;
-                props.onUpdate && sync.update(update, false, true);
-            });
-            const removeOnRenderRequest = value.onRenderRequest(element.scheduleRender);
-            valueSubscriptions.set(key, () => {
-                removeOnChange();
-                removeOnRenderRequest();
-            });
-        }
-        /**
-         * Any motion values that are provided to the element when created
-         * aren't yet bound to the element, as this would technically be impure.
-         * However, we iterate through the motion values and set them to the
-         * initial values for this component.
-         *
-         * TODO: This is impure and we should look at changing this to run on mount.
-         * Doing so will break some tests but this isn't neccessarily a breaking change,
-         * more a reflection of the test.
-         */
-        const { willChange, ...initialMotionValues } = scrapeMotionValuesFromProps(props);
-        for (const key in initialMotionValues) {
-            const value = initialMotionValues[key];
-            if (latestValues[key] !== undefined && isMotionValue(value)) {
-                value.set(latestValues[key], false);
+    function updateMotionValuesFromProps(element, next, prev) {
+        const { willChange } = next;
+        for (const key in next) {
+            const nextValue = next[key];
+            const prevValue = prev[key];
+            if (isMotionValue(nextValue)) {
+                /**
+                 * If this is a motion value found in props or style, we want to add it
+                 * to our visual element's motion value map.
+                 */
+                element.addValue(key, nextValue);
                 if (isWillChangeMotionValue(willChange)) {
                     willChange.add(key);
                 }
-            }
-        }
-        /**
-         * Update external values with initial values
-         */
-        if (props.values) {
-            for (const key in props.values) {
-                const value = props.values[key];
-                if (latestValues[key] !== undefined && isMotionValue(value)) {
-                    value.set(latestValues[key]);
+                /**
+                 * Check the version of the incoming motion value with this version
+                 * and warn against mismatches.
+                 */
+                {
+                    warnOnce(nextValue.version === "7.6.6", `Attempting to mix Framer Motion versions ${nextValue.version} with 7.6.6 may not work as expected.`);
                 }
             }
-        }
-        /**
-         * Determine what role this visual element should take in the variant tree.
-         */
-        const isControllingVariants$1 = isControllingVariants(props);
-        const isVariantNode$1 = isVariantNode(props);
-        const element = {
-            treeType,
-            /**
-             * This is a mirror of the internal instance prop, which keeps
-             * VisualElement type-compatible with React's RefObject.
-             */
-            current: null,
-            /**
-             * The depth of this visual element within the visual element tree.
-             */
-            depth: parent ? parent.depth + 1 : 0,
-            parent,
-            children: new Set(),
-            /**
-             *
-             */
-            presenceId,
-            shouldReduceMotion: null,
-            /**
-             * If this component is part of the variant tree, it should track
-             * any children that are also part of the tree. This is essentially
-             * a shadow tree to simplify logic around how to stagger over children.
-             */
-            variantChildren: isVariantNode$1 ? new Set() : undefined,
-            /**
-             * Whether this instance is visible. This can be changed imperatively
-             * by the projection tree, is analogous to CSS's visibility in that
-             * hidden elements should take up layout, and needs enacting by the configured
-             * render function.
-             */
-            isVisible: undefined,
-            /**
-             * Normally, if a component is controlled by a parent's variants, it can
-             * rely on that ancestor to trigger animations further down the tree.
-             * However, if a component is created after its parent is mounted, the parent
-             * won't trigger that mount animation so the child needs to.
-             *
-             * TODO: This might be better replaced with a method isParentMounted
-             */
-            manuallyAnimateOnMount: Boolean(parent === null || parent === void 0 ? void 0 : parent.isMounted()),
-            /**
-             * This can be set by AnimatePresence to force components that mount
-             * at the same time as it to mount as if they have initial={false} set.
-             */
-            blockInitialAnimation,
-            /**
-             * Determine whether this component has mounted yet. This is mostly used
-             * by variant children to determine whether they need to trigger their
-             * own animations on mount.
-             */
-            isMounted: () => Boolean(instance),
-            mount(newInstance) {
-                isMounted = true;
-                instance = element.current = newInstance;
-                if (element.projection) {
-                    element.projection.mount(newInstance);
-                }
-                if (isVariantNode$1 && parent && !isControllingVariants$1) {
-                    removeFromVariantTree = parent === null || parent === void 0 ? void 0 : parent.addVariantChild(element);
-                }
-                values.forEach((value, key) => bindToMotionValue(key, value));
-                if (!hasReducedMotionListener.current) {
-                    initPrefersReducedMotion();
-                }
-                element.shouldReduceMotion =
-                    reducedMotionConfig === "never"
-                        ? false
-                        : reducedMotionConfig === "always"
-                            ? true
-                            : prefersReducedMotion.current;
-                parent === null || parent === void 0 ? void 0 : parent.children.add(element);
-                element.setProps(props);
-            },
-            /**
-             *
-             */
-            unmount() {
-                var _a;
-                (_a = element.projection) === null || _a === void 0 ? void 0 : _a.unmount();
-                cancelSync.update(update);
-                cancelSync.render(render);
-                valueSubscriptions.forEach((remove) => remove());
-                removeFromVariantTree === null || removeFromVariantTree === void 0 ? void 0 : removeFromVariantTree();
-                parent === null || parent === void 0 ? void 0 : parent.children.delete(element);
-                lifecycles.clearAllListeners();
-                instance = undefined;
-                isMounted = false;
-            },
-            loadFeatures(renderedProps, isStrict, preloadedFeatures, projectionId, ProjectionNodeConstructor, initialLayoutGroupConfig) {
-                const features = [];
+            else if (isMotionValue(prevValue)) {
                 /**
-                 * If we're in development mode, check to make sure we're not rendering a motion component
-                 * as a child of LazyMotion, as this will break the file-size benefits of using it.
+                 * If we're swapping from a motion value to a static value,
+                 * create a new motion value from that
                  */
-                if (env !== "production" && preloadedFeatures && isStrict) {
-                    invariant(false, "You have rendered a `motion` component within a `LazyMotion` component. This will break tree shaking. Import and render a `m` component instead.");
-                }
-                for (let i = 0; i < numFeatures; i++) {
-                    const name = featureNames[i];
-                    const { isEnabled, Component } = featureDefinitions[name];
-                    /**
-                     * It might be possible in the future to use this moment to
-                     * dynamically request functionality. In initial tests this
-                     * was producing a lot of duplication amongst bundles.
-                     */
-                    if (isEnabled(renderedProps) && Component) {
-                        features.push(react.createElement(Component, {
-                            key: name,
-                            ...renderedProps,
-                            visualElement: element,
-                        }));
-                    }
-                }
-                if (!element.projection && ProjectionNodeConstructor) {
-                    element.projection = new ProjectionNodeConstructor(projectionId, element.getLatestValues(), parent && parent.projection);
-                    const { layoutId, layout, drag, dragConstraints, layoutScroll, } = renderedProps;
-                    element.projection.setOptions({
-                        layoutId,
-                        layout,
-                        alwaysMeasureLayout: Boolean(drag) ||
-                            (dragConstraints && isRefObject(dragConstraints)),
-                        visualElement: element,
-                        scheduleRender: () => element.scheduleRender(),
-                        /**
-                         * TODO: Update options in an effect. This could be tricky as it'll be too late
-                         * to update by the time layout animations run.
-                         * We also need to fix this safeToRemove by linking it up to the one returned by usePresence,
-                         * ensuring it gets called if there's no potential layout animations.
-                         *
-                         */
-                        animationType: typeof layout === "string" ? layout : "both",
-                        initialPromotionConfig: initialLayoutGroupConfig,
-                        layoutScroll,
-                    });
-                }
-                return features;
-            },
-            /**
-             * Add a child visual element to our set of children.
-             */
-            addVariantChild(child) {
-                var _a;
-                const closestVariantNode = element.getClosestVariantNode();
-                if (closestVariantNode) {
-                    (_a = closestVariantNode.variantChildren) === null || _a === void 0 ? void 0 : _a.add(child);
-                    return () => closestVariantNode.variantChildren.delete(child);
+                element.addValue(key, motionValue(nextValue));
+                if (isWillChangeMotionValue(willChange)) {
+                    willChange.remove(key);
                 }
-            },
-            sortNodePosition(other) {
+            }
+            else if (prevValue !== nextValue) {
                 /**
-                 * If these nodes aren't even of the same type we can't compare their depth.
+                 * If this is a flat value that has changed, update the motion value
+                 * or create one if it doesn't exist. We only want to do this if we're
+                 * not handling the value with our animation state.
                  */
-                if (!sortNodePosition || treeType !== other.treeType)
-                    return 0;
-                return sortNodePosition(element.getInstance(), other.getInstance());
-            },
-            /**
-             * Returns the closest variant node in the tree starting from
-             * this visual element.
-             */
-            getClosestVariantNode: () => isVariantNode$1 ? element : parent === null || parent === void 0 ? void 0 : parent.getClosestVariantNode(),
-            /**
-             * Expose the latest layoutId prop.
-             */
-            getLayoutId: () => props.layoutId,
-            /**
-             * Returns the current instance.
-             */
-            getInstance: () => instance,
-            /**
-             * Get/set the latest static values.
-             */
-            getStaticValue: (key) => latestValues[key],
-            setStaticValue: (key, value) => (latestValues[key] = value),
-            /**
-             * Returns the latest motion value state. Currently only used to take
-             * a snapshot of the visual element - perhaps this can return the whole
-             * visual state
-             */
-            getLatestValues: () => latestValues,
-            /**
-             * Set the visiblity of the visual element. If it's changed, schedule
-             * a render to reflect these changes.
-             */
-            setVisibility(visibility) {
-                if (element.isVisible === visibility)
-                    return;
-                element.isVisible = visibility;
-                element.scheduleRender();
-            },
-            /**
-             * Make a target animatable by Popmotion. For instance, if we're
-             * trying to animate width from 100px to 100vw we need to measure 100vw
-             * in pixels to determine what we really need to animate to. This is also
-             * pluggable to support Framer's custom value types like Color,
-             * and CSS variables.
-             */
-            makeTargetAnimatable(target, canMutate = true) {
-                return makeTargetAnimatable(element, target, props, canMutate);
-            },
-            /**
-             * Measure the current viewport box with or without transforms.
-             * Only measures axis-aligned boxes, rotate and skew must be manually
-             * removed with a re-render to work.
-             */
-            measureViewportBox() {
-                return measureViewportBox(instance, props);
-            },
-            // Motion values ========================
-            /**
-             * Add a motion value and bind it to this visual element.
-             */
-            addValue(key, value) {
-                // Remove existing value if it exists
-                if (element.hasValue(key))
-                    element.removeValue(key);
-                values.set(key, value);
-                latestValues[key] = value.get();
-                bindToMotionValue(key, value);
-            },
-            /**
-             * Remove a motion value and unbind any active subscriptions.
-             */
-            removeValue(key) {
-                var _a;
-                values.delete(key);
-                (_a = valueSubscriptions.get(key)) === null || _a === void 0 ? void 0 : _a();
-                valueSubscriptions.delete(key);
-                delete latestValues[key];
-                removeValueFromRenderState(key, renderState);
-            },
-            /**
-             * Check whether we have a motion value for this key
-             */
-            hasValue: (key) => values.has(key),
-            /**
-             * Get a motion value for this key. If called with a default
-             * value, we'll create one if none exists.
-             */
-            getValue(key, defaultValue) {
-                if (props.values && props.values[key]) {
-                    return props.values[key];
+                if (element.hasValue(key)) {
+                    const existingValue = element.getValue(key);
+                    // TODO: Only update values that aren't being animated or even looked at
+                    !existingValue.hasAnimated && existingValue.set(nextValue);
                 }
-                let value = values.get(key);
-                if (value === undefined && defaultValue !== undefined) {
-                    value = motionValue(defaultValue);
-                    element.addValue(key, value);
+                else {
+                    const latestValue = element.getStaticValue(key);
+                    element.addValue(key, motionValue(latestValue !== undefined ? latestValue : nextValue));
                 }
-                return value;
-            },
-            /**
-             * Iterate over our motion values.
-             */
-            forEachValue: (callback) => values.forEach(callback),
-            /**
-             * If we're trying to animate to a previously unencountered value,
-             * we need to check for it in our state and as a last resort read it
-             * directly from the instance (which might have performance implications).
-             */
-            readValue: (key) => latestValues[key] !== undefined
-                ? latestValues[key]
-                : readValueFromInstance(instance, key, options),
-            /**
-             * Set the base target to later animate back to. This is currently
-             * only hydrated on creation and when we first read a value.
-             */
-            setBaseTarget(key, value) {
-                baseTarget[key] = value;
-            },
+            }
+        }
+        // Handle removed values
+        for (const key in prev) {
+            if (next[key] === undefined)
+                element.removeValue(key);
+        }
+        return next;
+    }
+
+    const featureNames = Object.keys(featureDefinitions);
+    const numFeatures = featureNames.length;
+    const propEventHandlers = [
+        "AnimationStart",
+        "AnimationComplete",
+        "Update",
+        "Unmount",
+        "BeforeLayoutMeasure",
+        "LayoutMeasure",
+        "LayoutAnimationStart",
+        "LayoutAnimationComplete",
+    ];
+    /**
+     * A VisualElement is an imperative abstraction around UI elements such as
+     * HTMLElement, SVGElement, Three.Object3D etc.
+     */
+    class VisualElement {
+        constructor({ parent, props, reducedMotionConfig, visualState, }, options = {}) {
             /**
-             * Find the base target for a value thats been removed from all animation
-             * props.
+             * A reference to the current underlying Instance, e.g. a HTMLElement
+             * or Three.Mesh etc.
              */
-            getBaseTarget(key) {
-                var _a;
-                const { initial } = props;
-                const valueFromInitial = typeof initial === "string" || typeof initial === "object"
-                    ? (_a = resolveVariantFromProps(props, initial)) === null || _a === void 0 ? void 0 : _a[key]
-                    : undefined;
-                /**
-                 * If this value still exists in the current initial variant, read that.
-                 */
-                if (initial && valueFromInitial !== undefined) {
-                    return valueFromInitial;
-                }
-                /**
-                 * Alternatively, if this VisualElement config has defined a getBaseTarget
-                 * so we can read the value from an alternative source, try that.
-                 */
-                if (getBaseTarget) {
-                    const target = getBaseTarget(props, key);
-                    if (target !== undefined && !isMotionValue(target))
-                        return target;
-                }
-                /**
-                 * If the value was initially defined on initial, but it doesn't any more,
-                 * return undefined. Otherwise return the value as initially read from the DOM.
-                 */
-                return initialValues[key] !== undefined &&
-                    valueFromInitial === undefined
-                    ? undefined
-                    : baseTarget[key];
-            },
-            // Lifecyles ========================
-            ...lifecycles,
+            this.current = null;
             /**
-             * Build the renderer state based on the latest visual state.
+             * A set containing references to this VisualElement's children.
              */
-            build() {
-                triggerBuild();
-                return renderState;
-            },
+            this.children = new Set();
             /**
-             * Schedule a render on the next animation frame.
+             * Determine what role this visual element should take in the variant tree.
              */
-            scheduleRender() {
-                sync.render(render, false, true);
-            },
+            this.isVariantNode = false;
+            this.isControllingVariants = false;
             /**
-             * Synchronously fire render. It's prefered that we batch renders but
-             * in many circumstances, like layout measurement, we need to run this
-             * synchronously. However in those instances other measures should be taken
-             * to batch reads/writes.
+             * Decides whether this VisualElement should animate in reduced motion
+             * mode.
+             *
+             * TODO: This is currently set on every individual VisualElement but feels
+             * like it could be set globally.
              */
-            syncRender: render,
+            this.shouldReduceMotion = null;
             /**
-             * Update the provided props. Ensure any newly-added motion values are
-             * added to our map, old ones removed, and listeners updated.
+             * A map of all motion values attached to this visual element. Motion
+             * values are source of truth for any given animated value. A motion
+             * value might be provided externally by the component via props.
              */
-            setProps(newProps) {
-                if (newProps.transformTemplate || props.transformTemplate) {
-                    element.scheduleRender();
-                }
-                props = newProps;
-                lifecycles.updatePropListeners(newProps);
-                prevMotionValues = updateMotionValuesFromProps(element, scrapeMotionValuesFromProps(props), prevMotionValues);
-            },
-            getProps: () => props,
-            // Variants ==============================
+            this.values = new Map();
             /**
-             * Returns the variant definition with a given name.
+             * Tracks whether this VisualElement's React component is currently present
+             * within the defined React tree.
              */
-            getVariant: (name) => { var _a; return (_a = props.variants) === null || _a === void 0 ? void 0 : _a[name]; },
+            this.isPresent = true;
             /**
-             * Returns the defined default transition on this component.
+             * A map of every subscription that binds the provided or generated
+             * motion values onChange listeners to this visual element.
              */
-            getDefaultTransition: () => props.transition,
-            getTransformPagePoint: () => {
-                return props.transformPagePoint;
-            },
+            this.valueSubscriptions = new Map();
             /**
-             * Used by child variant nodes to get the closest ancestor variant props.
+             * A reference to the previously-provided motion values as returned
+             * from scrapeMotionValuesFromProps. We use the keys in here to determine
+             * if any motion values need to be removed after props are updated.
              */
-            getVariantContext(startAtParent = false) {
-                if (startAtParent)
-                    return parent === null || parent === void 0 ? void 0 : parent.getVariantContext();
-                if (!isControllingVariants$1) {
-                    const context = (parent === null || parent === void 0 ? void 0 : parent.getVariantContext()) || {};
-                    if (props.initial !== undefined) {
-                        context.initial = props.initial;
-                    }
-                    return context;
-                }
-                const context = {};
-                for (let i = 0; i < numVariantProps; i++) {
-                    const name = variantProps[i];
-                    const prop = props[name];
-                    if (isVariantLabel(prop) || prop === false) {
-                        context[name] = prop;
+            this.prevMotionValues = {};
+            /**
+             * An object containing a SubscriptionManager for each active event.
+             */
+            this.events = {};
+            /**
+             * An object containing an unsubscribe function for each prop event subscription.
+             * For example, every "Update" event can have multiple subscribers via
+             * VisualElement.on(), but only one of those can be defined via the onUpdate prop.
+             */
+            this.propEventSubscriptions = {};
+            this.notifyUpdate = () => this.notify("Update", this.latestValues);
+            this.render = () => {
+                if (!this.current)
+                    return;
+                this.triggerBuild();
+                this.renderInstance(this.current, this.renderState, this.props.style, this.projection);
+            };
+            this.scheduleRender = () => sync.render(this.render, false, true);
+            const { latestValues, renderState } = visualState;
+            this.latestValues = latestValues;
+            this.baseTarget = { ...latestValues };
+            this.initialValues = props.initial ? { ...latestValues } : {};
+            this.renderState = renderState;
+            this.parent = parent;
+            this.props = props;
+            this.depth = parent ? parent.depth + 1 : 0;
+            this.reducedMotionConfig = reducedMotionConfig;
+            this.options = options;
+            this.isControllingVariants = isControllingVariants(props);
+            this.isVariantNode = isVariantNode(props);
+            if (this.isVariantNode) {
+                this.variantChildren = new Set();
+            }
+            this.manuallyAnimateOnMount = Boolean(parent && parent.current);
+            /**
+             * Any motion values that are provided to the element when created
+             * aren't yet bound to the element, as this would technically be impure.
+             * However, we iterate through the motion values and set them to the
+             * initial values for this component.
+             *
+             * TODO: This is impure and we should look at changing this to run on mount.
+             * Doing so will break some tests but this isn't neccessarily a breaking change,
+             * more a reflection of the test.
+             */
+            const { willChange, ...initialMotionValues } = this.scrapeMotionValuesFromProps(props);
+            for (const key in initialMotionValues) {
+                const value = initialMotionValues[key];
+                if (latestValues[key] !== undefined && isMotionValue(value)) {
+                    value.set(latestValues[key], false);
+                    if (isWillChangeMotionValue(willChange)) {
+                        willChange.add(key);
                     }
                 }
-                return context;
-            },
-        };
-        return element;
-    };
-    const variantProps = ["initial", ...variantPriorityOrder];
-    const numVariantProps = variantProps.length;
-
-    /**
-     * Returns true if the provided key is a CSS variable
-     */
-    function isCSSVariable(key) {
-        return key.startsWith("--");
-    }
-
-    /**
-     * Provided a value and a ValueType, returns the value as that value type.
-     */
-    const getValueAsType = (value, type) => {
-        return type && typeof value === "number"
-            ? type.transform(value)
-            : value;
-    };
-
-    function buildHTMLStyles(state, latestValues, options, transformTemplate) {
-        const { style, vars, transform, transformKeys, transformOrigin } = state;
-        transformKeys.length = 0;
-        // Track whether we encounter any transform or transformOrigin values.
-        let hasTransform = false;
-        let hasTransformOrigin = false;
-        // Does the calculated transform essentially equal "none"?
-        let transformIsNone = true;
-        /**
-         * Loop over all our latest animated values and decide whether to handle them
-         * as a style or CSS variable.
-         *
-         * Transforms and transform origins are kept seperately for further processing.
-         */
-        for (const key in latestValues) {
-            const value = latestValues[key];
+            }
             /**
-             * If this is a CSS variable we don't do any further processing.
+             * Update external values with initial values
              */
-            if (isCSSVariable(key)) {
-                vars[key] = value;
-                continue;
-            }
-            // Convert the value to its default value type, ie 0 -> "0px"
-            const valueType = numberValueTypes[key];
-            const valueAsType = getValueAsType(value, valueType);
-            if (transformProps.has(key)) {
-                // If this is a transform, flag to enable further transform processing
-                hasTransform = true;
-                transform[key] = valueAsType;
-                transformKeys.push(key);
-                // If we already know we have a non-default transform, early return
-                if (!transformIsNone)
-                    continue;
-                // Otherwise check to see if this is a default transform
-                if (value !== (valueType.default || 0))
-                    transformIsNone = false;
-            }
-            else if (key.startsWith("origin")) {
-                // If this is a transform origin, flag and enable further transform-origin processing
-                hasTransformOrigin = true;
-                transformOrigin[key] = valueAsType;
-            }
-            else {
-                style[key] = valueAsType;
-            }
-        }
-        if (!latestValues.transform) {
-            if (hasTransform || transformTemplate) {
-                style.transform = buildTransform(state, options, transformIsNone, transformTemplate);
-            }
-            else if (style.transform) {
-                /**
-                 * If we have previously created a transform but currently don't have any,
-                 * reset transform style to none.
-                 */
-                style.transform = "none";
+            if (props.values) {
+                for (const key in props.values) {
+                    const value = props.values[key];
+                    if (latestValues[key] !== undefined && isMotionValue(value)) {
+                        value.set(latestValues[key]);
+                    }
+                }
             }
         }
         /**
-         * Build a transformOrigin style. Uses the same defaults as the browser for
-         * undefined origins.
+         * This method takes React props and returns found MotionValues. For example, HTML
+         * MotionValues will be found within the style prop, whereas for Three.js within attribute arrays.
+         *
+         * This isn't an abstract method as it needs calling in the constructor, but it is
+         * intended to be one.
          */
-        if (hasTransformOrigin) {
-            const { originX = "50%", originY = "50%", originZ = 0, } = transformOrigin;
-            style.transformOrigin = `${originX} ${originY} ${originZ}`;
+        scrapeMotionValuesFromProps(_props) {
+            return {};
         }
-    }
-
-    const positionalKeys = new Set([
-        "width",
-        "height",
-        "top",
-        "left",
-        "right",
-        "bottom",
-        "x",
-        "y",
-    ]);
-    const isPositionalKey = (key) => positionalKeys.has(key);
-    const hasPositionalKey = (target) => {
-        return Object.keys(target).some(isPositionalKey);
-    };
-    const setAndResetVelocity = (value, to) => {
-        // Looks odd but setting it twice doesn't render, it'll just
-        // set both prev and current to the latest value
-        value.set(to, false);
-        value.set(to);
-    };
-    const isNumOrPxType = (v) => v === number || v === px;
-    var BoundingBoxDimension;
-    (function (BoundingBoxDimension) {
-        BoundingBoxDimension["width"] = "width";
-        BoundingBoxDimension["height"] = "height";
-        BoundingBoxDimension["left"] = "left";
-        BoundingBoxDimension["right"] = "right";
-        BoundingBoxDimension["top"] = "top";
-        BoundingBoxDimension["bottom"] = "bottom";
-    })(BoundingBoxDimension || (BoundingBoxDimension = {}));
-    const getPosFromMatrix = (matrix, pos) => parseFloat(matrix.split(", ")[pos]);
-    const getTranslateFromMatrix = (pos2, pos3) => (_bbox, { transform }) => {
-        if (transform === "none" || !transform)
-            return 0;
-        const matrix3d = transform.match(/^matrix3d\((.+)\)$/);
-        if (matrix3d) {
-            return getPosFromMatrix(matrix3d[1], pos3);
+        mount(instance) {
+            var _a;
+            this.current = instance;
+            if (this.projection) {
+                this.projection.mount(instance);
+            }
+            if (this.parent && this.isVariantNode && !this.isControllingVariants) {
+                this.removeFromVariantTree = (_a = this.parent) === null || _a === void 0 ? void 0 : _a.addVariantChild(this);
+            }
+            this.values.forEach((value, key) => this.bindToMotionValue(key, value));
+            if (!hasReducedMotionListener.current) {
+                initPrefersReducedMotion();
+            }
+            this.shouldReduceMotion =
+                this.reducedMotionConfig === "never"
+                    ? false
+                    : this.reducedMotionConfig === "always"
+                        ? true
+                        : prefersReducedMotion.current;
+            if (this.parent)
+                this.parent.children.add(this);
+            this.setProps(this.props);
+        }
+        unmount() {
+            var _a, _b, _c;
+            (_a = this.projection) === null || _a === void 0 ? void 0 : _a.unmount();
+            cancelSync.update(this.notifyUpdate);
+            cancelSync.render(this.render);
+            this.valueSubscriptions.forEach((remove) => remove());
+            (_b = this.removeFromVariantTree) === null || _b === void 0 ? void 0 : _b.call(this);
+            (_c = this.parent) === null || _c === void 0 ? void 0 : _c.children.delete(this);
+            for (const key in this.events) {
+                this.events[key].clear();
+            }
+            this.current = null;
+        }
+        bindToMotionValue(key, value) {
+            const removeOnChange = value.onChange((latestValue) => {
+                this.latestValues[key] = latestValue;
+                this.props.onUpdate &&
+                    sync.update(this.notifyUpdate, false, true);
+            });
+            const removeOnRenderRequest = value.onRenderRequest(this.scheduleRender);
+            this.valueSubscriptions.set(key, () => {
+                removeOnChange();
+                removeOnRenderRequest();
+            });
         }
-        else {
-            const matrix = transform.match(/^matrix\((.+)\)$/);
-            if (matrix) {
-                return getPosFromMatrix(matrix[1], pos2);
-            }
-            else {
+        sortNodePosition(other) {
+            /**
+             * If these nodes aren't even of the same type we can't compare their depth.
+             */
+            if (!this.current ||
+                !this.sortInstanceNodePosition ||
+                this.type !== other.type)
                 return 0;
-            }
+            return this.sortInstanceNodePosition(this.current, other.current);
         }
-    };
-    const transformKeys = new Set(["x", "y", "z"]);
-    const nonTranslationalTransformKeys = transformPropOrder.filter((key) => !transformKeys.has(key));
-    function removeNonTranslationalTransform(visualElement) {
-        const removedTransforms = [];
-        nonTranslationalTransformKeys.forEach((key) => {
-            const value = visualElement.getValue(key);
-            if (value !== undefined) {
-                removedTransforms.push([key, value.get()]);
-                value.set(key.startsWith("scale") ? 1 : 0);
+        loadFeatures(renderedProps, isStrict, preloadedFeatures, projectionId, ProjectionNodeConstructor, initialLayoutGroupConfig) {
+            const features = [];
+            /**
+             * If we're in development mode, check to make sure we're not rendering a motion component
+             * as a child of LazyMotion, as this will break the file-size benefits of using it.
+             */
+            if (env !== "production" && preloadedFeatures && isStrict) {
+                invariant(false, "You have rendered a `motion` component within a `LazyMotion` component. This will break tree shaking. Import and render a `m` component instead.");
             }
-        });
-        // Apply changes to element before measurement
-        if (removedTransforms.length)
-            visualElement.syncRender();
-        return removedTransforms;
-    }
-    const positionalValues = {
-        // Dimensions
-        width: ({ x }, { paddingLeft = "0", paddingRight = "0" }) => x.max - x.min - parseFloat(paddingLeft) - parseFloat(paddingRight),
-        height: ({ y }, { paddingTop = "0", paddingBottom = "0" }) => y.max - y.min - parseFloat(paddingTop) - parseFloat(paddingBottom),
-        top: (_bbox, { top }) => parseFloat(top),
-        left: (_bbox, { left }) => parseFloat(left),
-        bottom: ({ y }, { top }) => parseFloat(top) + (y.max - y.min),
-        right: ({ x }, { left }) => parseFloat(left) + (x.max - x.min),
-        // Transform
-        x: getTranslateFromMatrix(4, 13),
-        y: getTranslateFromMatrix(5, 14),
-    };
-    const convertChangedValueTypes = (target, visualElement, changedKeys) => {
-        const originBbox = visualElement.measureViewportBox();
-        const element = visualElement.getInstance();
-        const elementComputedStyle = getComputedStyle(element);
-        const { display } = elementComputedStyle;
-        const origin = {};
-        // If the element is currently set to display: "none", make it visible before
-        // measuring the target bounding box
-        if (display === "none") {
-            visualElement.setStaticValue("display", target.display || "block");
-        }
-        /**
-         * Record origins before we render and update styles
-         */
-        changedKeys.forEach((key) => {
-            origin[key] = positionalValues[key](originBbox, elementComputedStyle);
-        });
-        // Apply the latest values (as set in checkAndConvertChangedValueTypes)
-        visualElement.syncRender();
-        const targetBbox = visualElement.measureViewportBox();
-        changedKeys.forEach((key) => {
-            // Restore styles to their **calculated computed style**, not their actual
-            // originally set style. This allows us to animate between equivalent pixel units.
-            const value = visualElement.getValue(key);
-            setAndResetVelocity(value, origin[key]);
-            target[key] = positionalValues[key](targetBbox, elementComputedStyle);
-        });
-        return target;
-    };
-    const checkAndConvertChangedValueTypes = (visualElement, target, origin = {}, transitionEnd = {}) => {
-        target = { ...target };
-        transitionEnd = { ...transitionEnd };
-        const targetPositionalKeys = Object.keys(target).filter(isPositionalKey);
-        // We want to remove any transform values that could affect the element's bounding box before
-        // it's measured. We'll reapply these later.
-        let removedTransformValues = [];
-        let hasAttemptedToRemoveTransformValues = false;
-        const changedValueTypeKeys = [];
-        targetPositionalKeys.forEach((key) => {
-            const value = visualElement.getValue(key);
-            if (!visualElement.hasValue(key))
-                return;
-            let from = origin[key];
-            let fromType = findDimensionValueType(from);
-            const to = target[key];
-            let toType;
-            // TODO: The current implementation of this basically throws an error
-            // if you try and do value conversion via keyframes. There's probably
-            // a way of doing this but the performance implications would need greater scrutiny,
-            // as it'd be doing multiple resize-remeasure operations.
-            if (isKeyframesTarget(to)) {
-                const numKeyframes = to.length;
-                const fromIndex = to[0] === null ? 1 : 0;
-                from = to[fromIndex];
-                fromType = findDimensionValueType(from);
-                for (let i = fromIndex; i < numKeyframes; i++) {
-                    if (!toType) {
-                        toType = findDimensionValueType(to[i]);
-                        invariant(toType === fromType ||
-                            (isNumOrPxType(fromType) && isNumOrPxType(toType)), "Keyframes must be of the same dimension as the current value");
-                    }
-                    else {
-                        invariant(findDimensionValueType(to[i]) === toType, "All keyframes must be of the same type");
-                    }
+            for (let i = 0; i < numFeatures; i++) {
+                const name = featureNames[i];
+                const { isEnabled, Component } = featureDefinitions[name];
+                /**
+                 * It might be possible in the future to use this moment to
+                 * dynamically request functionality. In initial tests this
+                 * was producing a lot of duplication amongst bundles.
+                 */
+                if (isEnabled(renderedProps) && Component) {
+                    features.push(react.createElement(Component, {
+                        key: name,
+                        ...renderedProps,
+                        visualElement: this,
+                    }));
                 }
             }
-            else {
-                toType = findDimensionValueType(to);
+            if (!this.projection && ProjectionNodeConstructor) {
+                this.projection = new ProjectionNodeConstructor(projectionId, this.latestValues, this.parent && this.parent.projection);
+                const { layoutId, layout, drag, dragConstraints, layoutScroll } = renderedProps;
+                this.projection.setOptions({
+                    layoutId,
+                    layout,
+                    alwaysMeasureLayout: Boolean(drag) ||
+                        (dragConstraints && isRefObject(dragConstraints)),
+                    visualElement: this,
+                    scheduleRender: () => this.scheduleRender(),
+                    /**
+                     * TODO: Update options in an effect. This could be tricky as it'll be too late
+                     * to update by the time layout animations run.
+                     * We also need to fix this safeToRemove by linking it up to the one returned by usePresence,
+                     * ensuring it gets called if there's no potential layout animations.
+                     *
+                     */
+                    animationType: typeof layout === "string" ? layout : "both",
+                    initialPromotionConfig: initialLayoutGroupConfig,
+                    layoutScroll,
+                });
+            }
+            return features;
+        }
+        triggerBuild() {
+            this.build(this.renderState, this.latestValues, this.options, this.props);
+        }
+        /**
+         * Measure the current viewport box with or without transforms.
+         * Only measures axis-aligned boxes, rotate and skew must be manually
+         * removed with a re-render to work.
+         */
+        measureViewportBox() {
+            return this.current
+                ? this.measureInstanceViewportBox(this.current, this.props)
+                : createBox();
+        }
+        getStaticValue(key) {
+            return this.latestValues[key];
+        }
+        setStaticValue(key, value) {
+            this.latestValues[key] = value;
+        }
+        /**
+         * Make a target animatable by Popmotion. For instance, if we're
+         * trying to animate width from 100px to 100vw we need to measure 100vw
+         * in pixels to determine what we really need to animate to. This is also
+         * pluggable to support Framer's custom value types like Color,
+         * and CSS variables.
+         */
+        makeTargetAnimatable(target, canMutate = true) {
+            return this.makeTargetAnimatableFromInstance(target, this.props, canMutate);
+        }
+        /**
+         * Update the provided props. Ensure any newly-added motion values are
+         * added to our map, old ones removed, and listeners updated.
+         */
+        setProps(props) {
+            if (props.transformTemplate || this.props.transformTemplate) {
+                this.scheduleRender();
             }
-            if (fromType !== toType) {
-                // If they're both just number or px, convert them both to numbers rather than
-                // relying on resize/remeasure to convert (which is wasteful in this situation)
-                if (isNumOrPxType(fromType) && isNumOrPxType(toType)) {
-                    const current = value.get();
-                    if (typeof current === "string") {
-                        value.set(parseFloat(current));
-                    }
-                    if (typeof to === "string") {
-                        target[key] = parseFloat(to);
-                    }
-                    else if (Array.isArray(to) && toType === px) {
-                        target[key] = to.map(parseFloat);
-                    }
+            this.props = props;
+            /**
+             * Update prop event handlers ie onAnimationStart, onAnimationComplete
+             */
+            for (let i = 0; i < propEventHandlers.length; i++) {
+                const key = propEventHandlers[i];
+                if (this.propEventSubscriptions[key]) {
+                    this.propEventSubscriptions[key]();
+                    delete this.propEventSubscriptions[key];
                 }
-                else if ((fromType === null || fromType === void 0 ? void 0 : fromType.transform) &&
-                    (toType === null || toType === void 0 ? void 0 : toType.transform) &&
-                    (from === 0 || to === 0)) {
-                    // If one or the other value is 0, it's safe to coerce it to the
-                    // type of the other without measurement
-                    if (from === 0) {
-                        value.set(toType.transform(from));
-                    }
-                    else {
-                        target[key] = fromType.transform(to);
-                    }
+                const listener = props["on" + key];
+                if (listener) {
+                    this.propEventSubscriptions[key] = this.on(key, listener);
                 }
-                else {
-                    // If we're going to do value conversion via DOM measurements, we first
-                    // need to remove non-positional transform values that could affect the bbox measurements.
-                    if (!hasAttemptedToRemoveTransformValues) {
-                        removedTransformValues =
-                            removeNonTranslationalTransform(visualElement);
-                        hasAttemptedToRemoveTransformValues = true;
-                    }
-                    changedValueTypeKeys.push(key);
-                    transitionEnd[key] =
-                        transitionEnd[key] !== undefined
-                            ? transitionEnd[key]
-                            : target[key];
-                    setAndResetVelocity(value, to);
+            }
+            this.prevMotionValues = updateMotionValuesFromProps(this, this.scrapeMotionValuesFromProps(props), this.prevMotionValues);
+        }
+        getProps() {
+            return this.props;
+        }
+        /**
+         * Returns the variant definition with a given name.
+         */
+        getVariant(name) {
+            var _a;
+            return (_a = this.props.variants) === null || _a === void 0 ? void 0 : _a[name];
+        }
+        /**
+         * Returns the defined default transition on this component.
+         */
+        getDefaultTransition() {
+            return this.props.transition;
+        }
+        getTransformPagePoint() {
+            return this.props.transformPagePoint;
+        }
+        getClosestVariantNode() {
+            var _a;
+            return this.isVariantNode ? this : (_a = this.parent) === null || _a === void 0 ? void 0 : _a.getClosestVariantNode();
+        }
+        getVariantContext(startAtParent = false) {
+            var _a, _b;
+            if (startAtParent)
+                return (_a = this.parent) === null || _a === void 0 ? void 0 : _a.getVariantContext();
+            if (!this.isControllingVariants) {
+                const context = ((_b = this.parent) === null || _b === void 0 ? void 0 : _b.getVariantContext()) || {};
+                if (this.props.initial !== undefined) {
+                    context.initial = this.props.initial;
                 }
+                return context;
             }
-        });
-        if (changedValueTypeKeys.length) {
-            const scrollY = changedValueTypeKeys.indexOf("height") >= 0
-                ? window.pageYOffset
-                : null;
-            const convertedTarget = convertChangedValueTypes(target, visualElement, changedValueTypeKeys);
-            // If we removed transform values, reapply them before the next render
-            if (removedTransformValues.length) {
-                removedTransformValues.forEach(([key, value]) => {
-                    visualElement.getValue(key).set(value);
-                });
+            const context = {};
+            for (let i = 0; i < numVariantProps; i++) {
+                const name = variantProps[i];
+                const prop = this.props[name];
+                if (isVariantLabel(prop) || prop === false) {
+                    context[name] = prop;
+                }
             }
-            // Reapply original values
-            visualElement.syncRender();
-            // Restore scroll position
-            if (isBrowser && scrollY !== null) {
-                window.scrollTo({ top: scrollY });
+            return context;
+        }
+        /**
+         * Add a child visual element to our set of children.
+         */
+        addVariantChild(child) {
+            var _a;
+            const closestVariantNode = this.getClosestVariantNode();
+            if (closestVariantNode) {
+                (_a = closestVariantNode.variantChildren) === null || _a === void 0 ? void 0 : _a.add(child);
+                return () => closestVariantNode.variantChildren.delete(child);
             }
-            return { target: convertedTarget, transitionEnd };
         }
-        else {
-            return { target, transitionEnd };
+        /**
+         * Add a motion value and bind it to this visual element.
+         */
+        addValue(key, value) {
+            // Remove existing value if it exists
+            if (this.hasValue(key))
+                this.removeValue(key);
+            this.values.set(key, value);
+            this.latestValues[key] = value.get();
+            this.bindToMotionValue(key, value);
         }
-    };
-    /**
-     * Convert value types for x/y/width/height/top/left/bottom/right
-     *
-     * Allows animation between `'auto'` -> `'100%'` or `0` -> `'calc(50% - 10vw)'`
-     *
-     * @internal
-     */
-    function unitConversion(visualElement, target, origin, transitionEnd) {
-        return hasPositionalKey(target)
-            ? checkAndConvertChangedValueTypes(visualElement, target, origin, transitionEnd)
-            : { target, transitionEnd };
-    }
-
-    /**
-     * Parse a DOM variant to make it animatable. This involves resolving CSS variables
-     * and ensuring animations like "20%" => "calc(50vw)" are performed in pixels.
-     */
-    const parseDomVariant = (visualElement, target, origin, transitionEnd) => {
-        const resolved = resolveCSSVariables(visualElement, target, transitionEnd);
-        target = resolved.target;
-        transitionEnd = resolved.transitionEnd;
-        return unitConversion(visualElement, target, origin, transitionEnd);
-    };
-
-    function isForcedMotionValue(key, { layout, layoutId }) {
-        return (transformProps.has(key) ||
-            key.startsWith("origin") ||
-            ((layout || layoutId !== undefined) &&
-                (!!scaleCorrectors[key] || key === "opacity")));
-    }
-
-    function scrapeMotionValuesFromProps(props) {
-        const { style } = props;
-        const newValues = {};
-        for (const key in style) {
-            if (isMotionValue(style[key]) || isForcedMotionValue(key, props)) {
-                newValues[key] = style[key];
+        /**
+         * Remove a motion value and unbind any active subscriptions.
+         */
+        removeValue(key) {
+            var _a;
+            this.values.delete(key);
+            (_a = this.valueSubscriptions.get(key)) === null || _a === void 0 ? void 0 : _a();
+            this.valueSubscriptions.delete(key);
+            delete this.latestValues[key];
+            this.removeValueFromRenderState(key, this.renderState);
+        }
+        /**
+         * Check whether we have a motion value for this key
+         */
+        hasValue(key) {
+            return this.values.has(key);
+        }
+        /**
+         * Get a motion value for this key. If called with a default
+         * value, we'll create one if none exists.
+         */
+        getValue(key, defaultValue) {
+            if (this.props.values && this.props.values[key]) {
+                return this.props.values[key];
+            }
+            let value = this.values.get(key);
+            if (value === undefined && defaultValue !== undefined) {
+                value = motionValue(defaultValue);
+                this.addValue(key, value);
             }
+            return value;
         }
-        return newValues;
-    }
-
-    function renderHTML(element, { style, vars }, styleProp, projection) {
-        Object.assign(element.style, style, projection && projection.getProjectionStyles(styleProp));
-        // Loop over any CSS variables and assign those.
-        for (const key in vars) {
-            element.style.setProperty(key, vars[key]);
+        /**
+         * If we're trying to animate to a previously unencountered value,
+         * we need to check for it in our state and as a last resort read it
+         * directly from the instance (which might have performance implications).
+         */
+        readValue(key) {
+            return this.latestValues[key] !== undefined || !this.current
+                ? this.latestValues[key]
+                : this.readValueFromInstance(this.current, key, this.options);
         }
-    }
-
-    /**
-     * Bounding boxes tend to be defined as top, left, right, bottom. For various operations
-     * it's easier to consider each axis individually. This function returns a bounding box
-     * as a map of single-axis min/max values.
-     */
-    function convertBoundingBoxToBox({ top, left, right, bottom, }) {
-        return {
-            x: { min: left, max: right },
-            y: { min: top, max: bottom },
-        };
-    }
-    /**
-     * Applies a TransformPoint function to a bounding box. TransformPoint is usually a function
-     * provided by Framer to allow measured points to be corrected for device scaling. This is used
-     * when measuring DOM elements and DOM event points.
-     */
-    function transformBoxPoints(point, transformPoint) {
-        if (!transformPoint)
-            return point;
-        const topLeft = transformPoint({ x: point.left, y: point.top });
-        const bottomRight = transformPoint({ x: point.right, y: point.bottom });
-        return {
-            top: topLeft.y,
-            left: topLeft.x,
-            bottom: bottomRight.y,
-            right: bottomRight.x,
-        };
-    }
-
-    function measureViewportBox(instance, transformPoint) {
-        return convertBoundingBoxToBox(transformBoxPoints(instance.getBoundingClientRect(), transformPoint));
-    }
-
-    function getComputedStyle$1(element) {
-        return window.getComputedStyle(element);
-    }
-    const htmlConfig = {
-        treeType: "dom",
-        readValueFromInstance(domElement, key) {
-            if (transformProps.has(key)) {
-                const defaultType = getDefaultValueType(key);
-                return defaultType ? defaultType.default || 0 : 0;
+        /**
+         * Set the base target to later animate back to. This is currently
+         * only hydrated on creation and when we first read a value.
+         */
+        setBaseTarget(key, value) {
+            this.baseTarget[key] = value;
+        }
+        /**
+         * Find the base target for a value thats been removed from all animation
+         * props.
+         */
+        getBaseTarget(key) {
+            var _a;
+            const { initial } = this.props;
+            const valueFromInitial = typeof initial === "string" || typeof initial === "object"
+                ? (_a = resolveVariantFromProps(this.props, initial)) === null || _a === void 0 ? void 0 : _a[key]
+                : undefined;
+            /**
+             * If this value still exists in the current initial variant, read that.
+             */
+            if (initial && valueFromInitial !== undefined) {
+                return valueFromInitial;
             }
-            else {
-                const computedStyle = getComputedStyle$1(domElement);
-                const value = (isCSSVariable(key)
-                    ? computedStyle.getPropertyValue(key)
-                    : computedStyle[key]) || 0;
-                return typeof value === "string" ? value.trim() : value;
+            /**
+             * Alternatively, if this VisualElement config has defined a getBaseTarget
+             * so we can read the value from an alternative source, try that.
+             */
+            const target = this.getBaseTargetFromProps(this.props, key);
+            if (target !== undefined && !isMotionValue(target))
+                return target;
+            /**
+             * If the value was initially defined on initial, but it doesn't any more,
+             * return undefined. Otherwise return the value as initially read from the DOM.
+             */
+            return this.initialValues[key] !== undefined &&
+                valueFromInitial === undefined
+                ? undefined
+                : this.baseTarget[key];
+        }
+        on(eventName, callback) {
+            if (!this.events[eventName]) {
+                this.events[eventName] = new SubscriptionManager();
             }
-        },
-        sortNodePosition(a, b) {
+            return this.events[eventName].add(callback);
+        }
+        notify(eventName, ...args) {
+            var _a;
+            (_a = this.events[eventName]) === null || _a === void 0 ? void 0 : _a.notify(...args);
+        }
+    }
+    const variantProps = ["initial", ...variantPriorityOrder];
+    const numVariantProps = variantProps.length;
+
+    class DOMVisualElement extends VisualElement {
+        sortInstanceNodePosition(a, b) {
             /**
              * compareDocumentPosition returns a bitmask, by using the bitwise &
              * we're returning true if 2 in that bitmask is set to true. 2 is set
              * to true if b preceeds a.
              */
             return a.compareDocumentPosition(b) & 2 ? 1 : -1;
-        },
-        getBaseTarget(props, key) {
+        }
+        getBaseTargetFromProps(props, key) {
             var _a;
             return (_a = props.style) === null || _a === void 0 ? void 0 : _a[key];
-        },
-        measureViewportBox(element, { transformPagePoint }) {
-            return measureViewportBox(element, transformPagePoint);
-        },
-        /**
-         * Reset the transform on the current Element. This is called as part
-         * of a batched process across the entire layout tree. To remove this write
-         * cycle it'd be interesting to see if it's possible to "undo" all the current
-         * layout transforms up the tree in the same way this.getBoundingBoxWithoutTransforms
-         * works
-         */
-        resetTransform(element, domElement, props) {
-            const { transformTemplate } = props;
-            domElement.style.transform = transformTemplate
-                ? transformTemplate({}, "")
-                : "none";
-            // Ensure that whatever happens next, we restore our transform on the next frame
-            element.scheduleRender();
-        },
-        restoreTransform(instance, mutableState) {
-            instance.style.transform = mutableState.style.transform;
-        },
+        }
         removeValueFromRenderState(key, { vars, style }) {
             delete vars[key];
             delete style[key];
-        },
-        /**
-         * Ensure that HTML and Framer-specific value types like `px`->`%` and `Color`
-         * can be animated by Motion.
-         */
-        makeTargetAnimatable(element, { transition, transitionEnd, ...target }, { transformValues }, isMounted = true) {
-            let origin = getOrigin(target, transition || {}, element);
+        }
+        makeTargetAnimatableFromInstance({ transition, transitionEnd, ...target }, { transformValues }, isMounted) {
+            let origin = getOrigin(target, transition || {}, this);
             /**
              * If Framer has provided a function to convert `Color` etc value types, convert them
              */
@@ -5374,8 +5271,8 @@
                     origin = transformValues(origin);
             }
             if (isMounted) {
-                checkTargetForNewValues(element, target, origin);
-                const parsed = parseDomVariant(element, target, origin, transitionEnd);
+                checkTargetForNewValues(this, target, origin);
+                const parsed = parseDomVariant(this, target, origin, transitionEnd);
                 transitionEnd = parsed.transitionEnd;
                 target = parsed.target;
             }
@@ -5384,28 +5281,48 @@
                 transitionEnd,
                 ...target,
             };
-        },
-        scrapeMotionValuesFromProps,
-        build(element, renderState, latestValues, options, props) {
-            if (element.isVisible !== undefined) {
-                renderState.style.visibility = element.isVisible
-                    ? "visible"
-                    : "hidden";
+        }
+    }
+
+    function getComputedStyle$1(element) {
+        return window.getComputedStyle(element);
+    }
+    class HTMLVisualElement extends DOMVisualElement {
+        readValueFromInstance(instance, key) {
+            if (transformProps.has(key)) {
+                const defaultType = getDefaultValueType(key);
+                return defaultType ? defaultType.default || 0 : 0;
+            }
+            else {
+                const computedStyle = getComputedStyle$1(instance);
+                const value = (isCSSVariable(key)
+                    ? computedStyle.getPropertyValue(key)
+                    : computedStyle[key]) || 0;
+                return typeof value === "string" ? value.trim() : value;
             }
+        }
+        measureInstanceViewportBox(instance, { transformPagePoint }) {
+            return measureViewportBox(instance, transformPagePoint);
+        }
+        build(renderState, latestValues, options, props) {
             buildHTMLStyles(renderState, latestValues, options, props.transformTemplate);
-        },
-        render: renderHTML,
-    };
-    const htmlVisualElement = visualElement(htmlConfig);
+        }
+        scrapeMotionValuesFromProps(props) {
+            return scrapeMotionValuesFromProps(props);
+        }
+        renderInstance(instance, renderState, styleProp, projection) {
+            renderHTML(instance, renderState, styleProp, projection);
+        }
+    }
 
     exports.HTMLProjectionNode = HTMLProjectionNode;
+    exports.HTMLVisualElement = HTMLVisualElement;
     exports.addScaleCorrector = addScaleCorrector;
     exports.animate = animate$1;
     exports.buildTransform = buildTransform;
     exports.calcBoxDelta = calcBoxDelta;
     exports.correctBorderRadius = correctBorderRadius;
     exports.correctBoxShadow = correctBoxShadow;
-    exports.htmlVisualElement = htmlVisualElement;
     exports.mix = mix;
     exports.nodeGroup = nodeGroup;
     exports.sync = sync;