framer-motion 7.6.4 → 7.6.6

package/dist/framer-motion.dev.js

@@ -57,7 +57,7 @@
         const lazyContext = React.useContext(LazyContext);
         const presenceContext = React.useContext(PresenceContext);
         const reducedMotionConfig = React.useContext(MotionConfigContext).reducedMotion;
-        const visualElementRef = React.useRef(undefined);
+        const visualElementRef = React.useRef();
         /**
          * If we haven't preloaded a renderer, check to see if we have one lazy-loaded
          */
@@ -76,14 +76,14 @@
         }
         const visualElement = visualElementRef.current;
         useIsomorphicLayoutEffect(() => {
-            visualElement && visualElement.syncRender();
+            visualElement && visualElement.render();
         });
         React.useEffect(() => {
             if (visualElement && visualElement.animationState) {
                 visualElement.animationState.animateChanges();
             }
         });
-        useIsomorphicLayoutEffect(() => () => visualElement && visualElement.notifyUnmount(), []);
+        useIsomorphicLayoutEffect(() => () => visualElement && visualElement.notify("Unmount"), []);
         return visualElement;
     }
 
@@ -1489,7 +1489,7 @@
      * @param ref
      * @internal
      */
-    function useFocusGesture({ whileFocus, visualElement }) {
+    function useFocusGesture({ whileFocus, visualElement, }) {
         const { animationState } = visualElement;
         const onFocus = () => {
             animationState && animationState.setActive(exports.AnimationType.Focus, true);
@@ -2698,7 +2698,7 @@
              * We only count this as a tap gesture if the event.target is the same
              * as, or a child of, this component's element
              */
-            !isNodeOrChild(visualElement.getInstance(), event.target)
+            !isNodeOrChild(visualElement.current, event.target)
                 ? onTapCancel && onTapCancel(event, info)
                 : onTap && onTap(event, info);
         }
@@ -2809,7 +2809,7 @@
     };
     function useIntersectionObserver(shouldObserve, state, visualElement, { root, margin: rootMargin, amount = "some", once }) {
         React.useEffect(() => {
-            if (!shouldObserve)
+            if (!shouldObserve || !visualElement.current)
                 return;
             const options = {
                 root: root === null || root === void 0 ? void 0 : root.current,
@@ -2847,7 +2847,7 @@
                     : props.onViewportLeave;
                 callback && callback(entry);
             };
-            return observeIntersection(visualElement.getInstance(), options, intersectionCallback);
+            return observeIntersection(visualElement.current, options, intersectionCallback);
         }, [shouldObserve, root, rootMargin, amount]);
     }
     /**
@@ -3426,7 +3426,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.
              *
@@ -3740,7 +3740,7 @@
      */
     function getCurrent(visualElement) {
         const current = {};
-        visualElement.forEachValue((value, key) => (current[key] = value.get()));
+        visualElement.values.forEach((value, key) => (current[key] = value.get()));
         return current;
     }
     /**
@@ -3748,7 +3748,7 @@
      */
     function getVelocity$1(visualElement) {
         const velocity = {};
-        visualElement.forEachValue((value, key) => (velocity[key] = value.getVelocity()));
+        visualElement.values.forEach((value, key) => (velocity[key] = value.getVelocity()));
         return velocity;
     }
     function resolveVariant(visualElement, definition, custom) {
@@ -3842,7 +3842,8 @@
             if (origin[key] === undefined) {
                 origin[key] = value;
             }
-            visualElement.setBaseTarget(key, value);
+            if (value !== null)
+                visualElement.setBaseTarget(key, value);
         }
     }
     function getOriginFromTransition(key, transition) {
@@ -3869,7 +3870,7 @@
     }
 
     function animateVisualElement(visualElement, definition, options = {}) {
-        visualElement.notifyAnimationStart(definition);
+        visualElement.notify("AnimationStart", definition);
         let animation;
         if (Array.isArray(definition)) {
             const animations = definition.map((variant) => animateVariant(visualElement, variant, options));
@@ -3884,7 +3885,7 @@
                 : definition;
             animation = animateTarget(visualElement, resolvedDefinition, options);
         }
-        return animation.then(() => visualElement.notifyAnimationComplete(definition));
+        return animation.then(() => visualElement.notify("AnimationComplete", definition));
     }
     function animateVariant(visualElement, variant, options = {}) {
         var _a;
@@ -3979,12 +3980,12 @@
             animations.push(animateVariant(child, variant, {
                 ...options,
                 delay: delayChildren + generateStaggerDuration(i),
-            }).then(() => child.notifyAnimationComplete(variant)));
+            }).then(() => child.notify("AnimationComplete", variant)));
         });
         return Promise.all(animations);
     }
     function stopAnimation(visualElement) {
-        visualElement.forEachValue((value) => value.stop());
+        visualElement.values.forEach((value) => value.stop());
     }
     function sortByTreeOrder(a, b) {
         return a.sortNodePosition(b);
@@ -4905,7 +4906,7 @@
                      * If the MotionValue is a percentage value convert to px
                      */
                     if (percent.test(current)) {
-                        const measuredAxis = (_b = (_a = this.visualElement.projection) === null || _a === void 0 ? void 0 : _a.layout) === null || _b === void 0 ? void 0 : _b.actual[axis];
+                        const measuredAxis = (_b = (_a = this.visualElement.projection) === null || _a === void 0 ? void 0 : _a.layout) === null || _b === void 0 ? void 0 : _b.layoutBox[axis];
                         if (measuredAxis) {
                             const length = calcLength(measuredAxis);
                             current = length * (parseFloat(current) / 100);
@@ -4942,9 +4943,9 @@
                  * of a re-render we want to ensure the browser can read the latest
                  * bounding box to ensure the pointer and element don't fall out of sync.
                  */
-                this.visualElement.syncRender();
+                this.visualElement.render();
                 /**
-                 * This must fire after the syncRender call as it might trigger a state
+                 * This must fire after the render call as it might trigger a state
                  * change which itself might trigger a layout update.
                  */
                 onDrag === null || onDrag === void 0 ? void 0 : onDrag(event, info);
@@ -5006,7 +5007,7 @@
             }
             else {
                 if (dragConstraints && layout) {
-                    this.constraints = calcRelativeConstraints(layout.actual, dragConstraints);
+                    this.constraints = calcRelativeConstraints(layout.layoutBox, dragConstraints);
                 }
                 else {
                     this.constraints = false;
@@ -5023,7 +5024,7 @@
                 !this.hasMutatedConstraints) {
                 eachAxis((axis) => {
                     if (this.getAxisMotionValue(axis)) {
-                        this.constraints[axis] = rebaseAxisConstraints(layout.actual[axis], this.constraints[axis]);
+                        this.constraints[axis] = rebaseAxisConstraints(layout.layoutBox[axis], this.constraints[axis]);
                     }
                 });
             }
@@ -5039,7 +5040,7 @@
             if (!projection || !projection.layout)
                 return false;
             const constraintsBox = measurePageBox(constraintsElement, projection.root, this.visualElement.getTransformPagePoint());
-            let measuredConstraints = calcViewportConstraints(projection.layout.actual, constraintsBox);
+            let measuredConstraints = calcViewportConstraints(projection.layout.layoutBox, constraintsBox);
             /**
              * If there's an onMeasureDragConstraints listener we call it and
              * if different constraints are returned, set constraints to that
@@ -5121,7 +5122,7 @@
                 const { projection } = this.visualElement;
                 const axisValue = this.getAxisMotionValue(axis);
                 if (projection && projection.layout) {
-                    const { min, max } = projection.layout.actual[axis];
+                    const { min, max } = projection.layout.layoutBox[axis];
                     axisValue.set(point[axis] - mix$1(min, max, 0.5));
                 }
             });
@@ -5133,6 +5134,8 @@
          */
         scalePositionWithinConstraints() {
             var _a;
+            if (!this.visualElement.current)
+                return;
             const { drag, dragConstraints } = this.getProps();
             const { projection } = this.visualElement;
             if (!isRefObject(dragConstraints) || !projection || !this.constraints)
@@ -5158,7 +5161,7 @@
              * Update the layout of this element and resolve the latest drag constraints
              */
             const { transformTemplate } = this.visualElement.getProps();
-            this.visualElement.getInstance().style.transform = transformTemplate
+            this.visualElement.current.style.transform = transformTemplate
                 ? transformTemplate({}, "")
                 : "none";
             (_a = projection.root) === null || _a === void 0 ? void 0 : _a.updateScroll();
@@ -5181,8 +5184,10 @@
         }
         addListeners() {
             var _a;
+            if (!this.visualElement.current)
+                return;
             elementDragControls.set(this.visualElement, this);
-            const element = this.visualElement.getInstance();
+            const element = this.visualElement.current;
             /**
              * Attach a pointerdown event listener on this DOM element to initiate drag tracking.
              */
@@ -5221,7 +5226,7 @@
                         this.originPoint[axis] += delta[axis].translate;
                         motionValue.set(motionValue.get() + delta[axis].translate);
                     });
-                    this.visualElement.syncRender();
+                    this.visualElement.render();
                 }
             }));
             return () => {
@@ -5326,618 +5331,6 @@
         drag: makeRenderlessComponent(useDrag),
     };
 
-    // 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;
-        }
-    }
-
-    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;
-    }
-
-    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);
-                }
-                else {
-                    const latestValue = element.getStaticValue(key);
-                    element.addValue(key, motionValue(latestValue !== undefined ? latestValue : nextValue));
-                }
-            }
-        }
-        // 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 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);
-                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]);
-                }
-            }
-        }
-        /**
-         * 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 = [];
-                /**
-                 * 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.");
-                }
-                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);
-                }
-            },
-            sortNodePosition(other) {
-                /**
-                 * If these nodes aren't even of the same type we can't compare their depth.
-                 */
-                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];
-                }
-                let value = values.get(key);
-                if (value === undefined && defaultValue !== undefined) {
-                    value = motionValue(defaultValue);
-                    element.addValue(key, value);
-                }
-                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;
-            },
-            /**
-             * Find the base target for a value thats been removed from all animation
-             * props.
-             */
-            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,
-            /**
-             * Build the renderer state based on the latest visual state.
-             */
-            build() {
-                triggerBuild();
-                return renderState;
-            },
-            /**
-             * Schedule a render on the next animation frame.
-             */
-            scheduleRender() {
-                sync.render(render, false, true);
-            },
-            /**
-             * 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.
-             */
-            syncRender: render,
-            /**
-             * Update the provided props. Ensure any newly-added motion values are
-             * added to our map, old ones removed, and listeners updated.
-             */
-            setProps(newProps) {
-                if (newProps.transformTemplate || props.transformTemplate) {
-                    element.scheduleRender();
-                }
-                props = newProps;
-                lifecycles.updatePropListeners(newProps);
-                prevMotionValues = updateMotionValuesFromProps(element, scrapeMotionValuesFromProps(props), prevMotionValues);
-            },
-            getProps: () => props,
-            // Variants ==============================
-            /**
-             * Returns the variant definition with a given name.
-             */
-            getVariant: (name) => { var _a; return (_a = props.variants) === null || _a === void 0 ? void 0 : _a[name]; },
-            /**
-             * Returns the defined default transition on this component.
-             */
-            getDefaultTransition: () => props.transition,
-            getTransformPagePoint: () => {
-                return props.transformPagePoint;
-            },
-            /**
-             * Used by child variant nodes to get the closest ancestor variant props.
-             */
-            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;
-                    }
-                }
-                return context;
-            },
-        };
-        return element;
-    };
-    const variantProps = ["initial", ...variantPriorityOrder];
-    const numVariantProps = variantProps.length;
-
     function isCSSVariable(value) {
         return typeof value === "string" && value.startsWith("var(--");
     }
@@ -5984,7 +5377,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`
@@ -5993,7 +5386,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(current))
                 return;
@@ -6083,7 +5476,7 @@
         });
         // Apply changes to element before measurement
         if (removedTransforms.length)
-            visualElement.syncRender();
+            visualElement.render();
         return removedTransforms;
     }
     const positionalValues = {
@@ -6100,7 +5493,7 @@
     };
     const convertChangedValueTypes = (target, visualElement, changedKeys) => {
         const originBbox = visualElement.measureViewportBox();
-        const element = visualElement.getInstance();
+        const element = visualElement.current;
         const elementComputedStyle = getComputedStyle(element);
         const { display } = elementComputedStyle;
         const origin = {};
@@ -6116,7 +5509,7 @@
             origin[key] = positionalValues[key](originBbox, elementComputedStyle);
         });
         // Apply the latest values (as set in checkAndConvertChangedValueTypes)
-        visualElement.syncRender();
+        visualElement.render();
         const targetBbox = visualElement.measureViewportBox();
         changedKeys.forEach((key) => {
             // Restore styles to their **calculated computed style**, not their actual
@@ -6194,131 +5587,625 @@
                         target[key] = fromType.transform(to);
                     }
                 }
-                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;
+                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);
+                }
+            }
+        });
+        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 };
+        }
+        else {
+            return { target, transitionEnd };
+        }
+    };
+    /**
+     * 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);
+    };
+
+    // 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 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.6", `Attempting to mix Framer Motion versions ${nextValue.version} with 7.6.6 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);
+                }
+                else {
+                    const latestValue = element.getStaticValue(key);
+                    element.addValue(key, motionValue(latestValue !== undefined ? latestValue : nextValue));
+                }
+            }
+        }
+        // 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 = {}) {
+            /**
+             * A reference to the current underlying Instance, e.g. a HTMLElement
+             * or Three.Mesh etc.
+             */
+            this.current = null;
+            /**
+             * A set containing references to this VisualElement's children.
+             */
+            this.children = new Set();
+            /**
+             * Determine what role this visual element should take in the variant tree.
+             */
+            this.isVariantNode = false;
+            this.isControllingVariants = false;
+            /**
+             * 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.
+             */
+            this.shouldReduceMotion = null;
+            /**
+             * 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.
+             */
+            this.values = new Map();
+            /**
+             * Tracks whether this VisualElement's React component is currently present
+             * within the defined React tree.
+             */
+            this.isPresent = true;
+            /**
+             * A map of every subscription that binds the provided or generated
+             * motion values onChange listeners to this visual element.
+             */
+            this.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.
+             */
+            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);
+                    }
+                }
+            }
+            /**
+             * 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]);
                     }
-                    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);
+        }
+        /**
+         * 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.
+         */
+        scrapeMotionValuesFromProps(_props) {
+            return {};
+        }
+        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();
+            });
+        }
+        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);
+        }
+        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.");
+            }
+            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,
+                    }));
+                }
+            }
+            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,
                 });
             }
-            // Reapply original values
-            visualElement.syncRender();
-            // Restore scroll position
-            if (isBrowser && scrollY !== null) {
-                window.scrollTo({ top: scrollY });
+            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();
             }
-            return { target: convertedTarget, transitionEnd };
+            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];
+                }
+                const listener = props["on" + key];
+                if (listener) {
+                    this.propEventSubscriptions[key] = this.on(key, listener);
+                }
+            }
+            this.prevMotionValues = updateMotionValuesFromProps(this, this.scrapeMotionValuesFromProps(props), this.prevMotionValues);
         }
-        else {
-            return { target, transitionEnd };
+        getProps() {
+            return this.props;
         }
-    };
-    /**
-     * 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 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;
+        /**
+         * 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;
             }
-            else {
-                const computedStyle = getComputedStyle$1(domElement);
-                const value = (isCSSVariable$1(key)
-                    ? computedStyle.getPropertyValue(key)
-                    : computedStyle[key]) || 0;
-                return typeof value === "string" ? value.trim() : 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;
+                }
             }
-        },
-        sortNodePosition(a, b) {
+            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);
+            }
+        }
+        /**
+         * 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);
+        }
+        /**
+         * 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;
+        }
+        /**
+         * 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);
+        }
+        /**
+         * 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;
+            }
+            /**
+             * 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();
+            }
+            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
              */
@@ -6331,8 +6218,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;
             }
@@ -6341,44 +6228,70 @@
                 transitionEnd,
                 ...target,
             };
-        },
-        scrapeMotionValuesFromProps: scrapeMotionValuesFromProps$1,
-        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$1(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$1(props);
+        }
+        renderInstance(instance, renderState, styleProp, projection) {
+            renderHTML(instance, renderState, styleProp, projection);
+        }
+    }
 
-    const svgVisualElement = visualElement({
-        ...htmlConfig,
-        getBaseTarget(props, key) {
+    class SVGVisualElement extends DOMVisualElement {
+        getBaseTargetFromProps(props, key) {
             return props[key];
-        },
-        readValueFromInstance(domElement, key) {
+        }
+        readValueFromInstance(instance, key) {
             var _a;
             if (transformProps.has(key)) {
                 return ((_a = getDefaultValueType(key)) === null || _a === void 0 ? void 0 : _a.default) || 0;
             }
             key = !camelCaseAttributes.has(key) ? camelToDash(key) : key;
-            return domElement.getAttribute(key);
-        },
-        scrapeMotionValuesFromProps,
-        build(_element, renderState, latestValues, options, props) {
+            return instance.getAttribute(key);
+        }
+        measureInstanceViewportBox() {
+            return createBox();
+        }
+        scrapeMotionValuesFromProps(props) {
+            return scrapeMotionValuesFromProps(props);
+        }
+        build(renderState, latestValues, options, props) {
             buildSVGAttrs(renderState, latestValues, options, props.transformTemplate);
-        },
-        render: renderSVG,
-    });
+        }
+        renderInstance(instance, renderState, styleProp, projection) {
+            renderSVG(instance, renderState, styleProp, projection);
+        }
+    }
 
     const createDomVisualElement = (Component, options) => {
         return isSVGComponent(Component)
-            ? svgVisualElement(options, { enableHardwareAcceleration: false })
-            : htmlVisualElement(options, { enableHardwareAcceleration: true });
+            ? new SVGVisualElement(options, { enableHardwareAcceleration: false })
+            : new HTMLVisualElement(options, { enableHardwareAcceleration: true });
     };
 
     function pixelsToPercent(pixels, axis) {
@@ -6976,7 +6889,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.
@@ -7029,7 +6942,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
@@ -7059,13 +6972,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;
                 }
@@ -7099,12 +7012,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;
                 }
@@ -7320,14 +7233,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;
@@ -7352,18 +7258,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) {
@@ -7389,7 +7290,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();
@@ -7470,9 +7389,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);
@@ -7521,13 +7440,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
@@ -7556,10 +7479,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);
                 }
@@ -7567,24 +7490,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() {
@@ -7620,7 +7547,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.
@@ -7697,7 +7624,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) {
@@ -7781,12 +7708,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;
                 }
@@ -7800,7 +7727,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);
@@ -7883,7 +7810,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]);
@@ -7956,7 +7883,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 =
@@ -8020,53 +7947,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;
                         }
@@ -8101,7 +8028,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();
     }
@@ -10082,23 +10009,33 @@
     }
 
     const createObject = () => ({});
-    const stateVisualElement = visualElement({
-        build() { },
-        measureViewportBox: createBox,
-        resetTransform() { },
-        restoreTransform() { },
-        removeValueFromRenderState() { },
-        render() { },
-        scrapeMotionValuesFromProps: createObject,
+    class StateVisualElement extends VisualElement {
+        build() { }
+        measureInstanceViewportBox() {
+            return createBox();
+        }
+        resetTransform() { }
+        restoreTransform() { }
+        removeValueFromRenderState() { }
+        renderInstance() { }
+        scrapeMotionValuesFromProps() {
+            return createObject();
+        }
+        getBaseTargetFromProps() {
+            return undefined;
+        }
         readValueFromInstance(_state, key, options) {
             return options.initialState[key] || 0;
-        },
-        makeTargetAnimatable(element, { transition, transitionEnd, ...target }) {
-            const origin = getOrigin(target, transition || {}, element);
-            checkTargetForNewValues(element, target, origin);
+        }
+        sortInstanceNodePosition() {
+            return 0;
+        }
+        makeTargetAnimatableFromInstance({ transition, transitionEnd, ...target }) {
+            const origin = getOrigin(target, transition || {}, this);
+            checkTargetForNewValues(this, target, origin);
             return { transition, transitionEnd, ...target };
-        },
-    });
+        }
+    }
     const useVisualState = makeUseVisualState({
         scrapeMotionValuesFromProps: createObject,
         createRenderState: createObject,
@@ -10110,10 +10047,12 @@
     function useAnimatedState(initialState) {
         const [animationState, setAnimationState] = React.useState(initialState);
         const visualState = useVisualState({}, false);
-        const element = useConstant(() => stateVisualElement({ props: {}, visualState }, { initialState }));
+        const element = useConstant(() => {
+            return new StateVisualElement({ props: {}, visualState }, { initialState });
+        });
         React.useEffect(() => {
             element.mount({});
-            return element.unmount;
+            return () => element.unmount();
         }, [element]);
         React.useEffect(() => {
             element.setProps({
@@ -10188,6 +10127,7 @@
     exports.PresenceContext = PresenceContext;
     exports.Reorder = Reorder;
     exports.SwitchLayoutGroupContext = SwitchLayoutGroupContext;
+    exports.VisualElement = VisualElement;
     exports.addPointerEvent = addPointerEvent;
     exports.addScaleCorrector = addScaleCorrector;
     exports.animate = animate;
@@ -10246,7 +10186,6 @@
     exports.useViewportScroll = useViewportScroll;
     exports.useVisualElementContext = useVisualElementContext;
     exports.useWillChange = useWillChange;
-    exports.visualElement = visualElement;
     exports.wrapHandler = wrapHandler;
 
     Object.defineProperty(exports, '__esModule', { value: true });