framer-motion 7.6.4 → 7.6.6

package/dist/cjs/index.js

@@ -63,7 +63,7 @@ function useVisualElement(Component, visualState, props, createVisualElement) {
     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
      */
@@ -82,14 +82,14 @@ function useVisualElement(Component, visualState, props, createVisualElement) {
     }
     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;
 }
 
@@ -1294,7 +1294,7 @@ function useDomEvent(ref, eventName, handler, options) {
  * @param ref
  * @internal
  */
-function useFocusGesture({ whileFocus, visualElement }) {
+function useFocusGesture({ whileFocus, visualElement, }) {
     const { animationState } = visualElement;
     const onFocus = () => {
         animationState && animationState.setActive(exports.AnimationType.Focus, true);
@@ -1530,7 +1530,7 @@ function useTapGesture({ onTap, onTapStart, onTapCancel, whileTap, visualElement
          * 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);
     }
@@ -1641,7 +1641,7 @@ const thresholdNames = {
 };
 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,
@@ -1679,7 +1679,7 @@ function useIntersectionObserver(shouldObserve, state, visualElement, { root, ma
                 : props.onViewportLeave;
             callback && callback(entry);
         };
-        return observeIntersection(visualElement.getInstance(), options, intersectionCallback);
+        return observeIntersection(visualElement.current, options, intersectionCallback);
     }, [shouldObserve, root, rootMargin, amount]);
 }
 /**
@@ -2258,7 +2258,7 @@ class MotionValue {
          * This will be replaced by the build step with the latest version number.
          * When MotionValues are provided to motion components, warn if versions are mixed.
          */
-        this.version = "7.6.4";
+        this.version = "7.6.6";
         /**
          * Duration, in milliseconds, since last updating frame.
          *
@@ -2572,7 +2572,7 @@ const findValueType = (v) => valueTypes.find(testValueType(v));
  */
 function getCurrent(visualElement) {
     const current = {};
-    visualElement.forEachValue((value, key) => (current[key] = value.get()));
+    visualElement.values.forEach((value, key) => (current[key] = value.get()));
     return current;
 }
 /**
@@ -2580,7 +2580,7 @@ function getCurrent(visualElement) {
  */
 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) {
@@ -2674,7 +2674,8 @@ function checkTargetForNewValues(visualElement, target, origin) {
         if (origin[key] === undefined) {
             origin[key] = value;
         }
-        visualElement.setBaseTarget(key, value);
+        if (value !== null)
+            visualElement.setBaseTarget(key, value);
     }
 }
 function getOriginFromTransition(key, transition) {
@@ -2701,7 +2702,7 @@ function isWillChangeMotionValue(value) {
 }
 
 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));
@@ -2716,7 +2717,7 @@ function animateVisualElement(visualElement, definition, options = {}) {
             : 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;
@@ -2811,12 +2812,12 @@ function animateChildren(visualElement, variant, delayChildren = 0, staggerChild
         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);
@@ -3737,7 +3738,7 @@ class VisualElementDragControls {
                  * If the MotionValue is a percentage value convert to px
                  */
                 if (styleValueTypes.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);
@@ -3774,9 +3775,9 @@ class VisualElementDragControls {
              * 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);
@@ -3838,7 +3839,7 @@ class VisualElementDragControls {
         }
         else {
             if (dragConstraints && layout) {
-                this.constraints = calcRelativeConstraints(layout.actual, dragConstraints);
+                this.constraints = calcRelativeConstraints(layout.layoutBox, dragConstraints);
             }
             else {
                 this.constraints = false;
@@ -3855,7 +3856,7 @@ class VisualElementDragControls {
             !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]);
                 }
             });
         }
@@ -3871,7 +3872,7 @@ class VisualElementDragControls {
         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
@@ -3953,7 +3954,7 @@ class VisualElementDragControls {
             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] - popmotion.mix(min, max, 0.5));
             }
         });
@@ -3965,6 +3966,8 @@ class VisualElementDragControls {
      */
     scalePositionWithinConstraints() {
         var _a;
+        if (!this.visualElement.current)
+            return;
         const { drag, dragConstraints } = this.getProps();
         const { projection } = this.visualElement;
         if (!isRefObject(dragConstraints) || !projection || !this.constraints)
@@ -3990,7 +3993,7 @@ class VisualElementDragControls {
          * 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();
@@ -4013,8 +4016,10 @@ class VisualElementDragControls {
     }
     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.
          */
@@ -4053,7 +4058,7 @@ class VisualElementDragControls {
                     this.originPoint[axis] += delta[axis].translate;
                     motionValue.set(motionValue.get() + delta[axis].translate);
                 });
-                this.visualElement.syncRender();
+                this.visualElement.render();
             }
         }));
         return () => {
@@ -4158,618 +4163,6 @@ const drag = {
     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.
-             */
-            if (process.env.NODE_ENV === "development") {
-                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__default["default"].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();
-            sync.cancelSync.update(update);
-            sync.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) {
-                heyListen.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__default["default"].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(--");
 }
@@ -4816,7 +4209,7 @@ function getVariableValue(current, element, depth = 1) {
  * @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`
@@ -4825,7 +4218,7 @@ function resolveCSSVariables(visualElement, { ...target }, transitionEnd) {
         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;
@@ -4915,7 +4308,7 @@ function removeNonTranslationalTransform(visualElement) {
     });
     // Apply changes to element before measurement
     if (removedTransforms.length)
-        visualElement.syncRender();
+        visualElement.render();
     return removedTransforms;
 }
 const positionalValues = {
@@ -4932,7 +4325,7 @@ const positionalValues = {
 };
 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 = {};
@@ -4948,7 +4341,7 @@ const convertChangedValueTypes = (target, visualElement, changedKeys) => {
         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
@@ -5026,131 +4419,625 @@ const checkAndConvertChangedValueTypes = (visualElement, target, origin = {}, tr
                     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.
+             */
+            if (process.env.NODE_ENV === "development") {
+                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__default["default"].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();
+        sync.cancelSync.update(this.notifyUpdate);
+        sync.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__default["default"].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) {
+            heyListen.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
          */
@@ -5163,8 +5050,8 @@ const htmlConfig = {
                 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;
         }
@@ -5173,44 +5060,70 @@ const htmlConfig = {
             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) {
@@ -5808,7 +5721,7 @@ const transformAxes = ["", "X", "Y", "Z"];
 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.
@@ -5861,7 +5774,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
             /**
              * 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
@@ -5891,13 +5804,13 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
              */
             // 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;
             }
@@ -5931,12 +5844,12 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
                 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;
             }
@@ -6152,14 +6065,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
         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;
@@ -6184,18 +6090,13 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
                     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) {
@@ -6221,7 +6122,25 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
                 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();
@@ -6302,9 +6221,9 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
                     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);
@@ -6353,13 +6272,17 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
             // 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
@@ -6388,10 +6311,10 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
             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);
             }
@@ -6399,24 +6322,28 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
                 /**
                  * 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() {
@@ -6452,7 +6379,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
              * 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.
@@ -6529,7 +6456,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
                     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) {
@@ -6613,12 +6540,12 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
             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;
             }
@@ -6632,7 +6559,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
             /**
              * 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);
@@ -6715,7 +6642,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
                 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]);
@@ -6788,7 +6715,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
             }
             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 =
@@ -6852,53 +6779,53 @@ function notifyLayoutUpdate(node) {
         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;
                     }
@@ -6933,7 +6860,7 @@ function clearMeasurements(node) {
 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();
 }
@@ -8333,23 +8260,33 @@ function useResetProjection() {
 }
 
 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,
@@ -8361,10 +8298,12 @@ const useVisualState = makeUseVisualState({
 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({
@@ -8439,6 +8378,7 @@ exports.MotionValue = MotionValue;
 exports.PresenceContext = PresenceContext;
 exports.Reorder = Reorder;
 exports.SwitchLayoutGroupContext = SwitchLayoutGroupContext;
+exports.VisualElement = VisualElement;
 exports.addPointerEvent = addPointerEvent;
 exports.addScaleCorrector = addScaleCorrector;
 exports.animate = animate;
@@ -8497,5 +8437,4 @@ exports.useVelocity = useVelocity;
 exports.useViewportScroll = useViewportScroll;
 exports.useVisualElementContext = useVisualElementContext;
 exports.useWillChange = useWillChange;
-exports.visualElement = visualElement;
 exports.wrapHandler = wrapHandler;