framer-motion 9.1.1 → 9.1.3

package/dist/cjs/index.js

@@ -150,25 +150,14 @@ function isAnimationControls(v) {
     return typeof v === "object" && typeof v.start === "function";
 }
 
-exports.AnimationType = void 0;
-(function (AnimationType) {
-    AnimationType["Animate"] = "animate";
-    AnimationType["Hover"] = "whileHover";
-    AnimationType["Tap"] = "whileTap";
-    AnimationType["Drag"] = "whileDrag";
-    AnimationType["Focus"] = "whileFocus";
-    AnimationType["InView"] = "whileInView";
-    AnimationType["Exit"] = "exit";
-})(exports.AnimationType || (exports.AnimationType = {}));
-
 const variantPriorityOrder$1 = [
-    exports.AnimationType.Animate,
-    exports.AnimationType.InView,
-    exports.AnimationType.Focus,
-    exports.AnimationType.Hover,
-    exports.AnimationType.Tap,
-    exports.AnimationType.Drag,
-    exports.AnimationType.Exit,
+    "animate" /* AnimationType.Animate */,
+    "whileInView" /* AnimationType.InView */,
+    "whileFocus" /* AnimationType.Focus */,
+    "whileHover" /* AnimationType.Hover */,
+    "whileTap" /* AnimationType.Tap */,
+    "whileDrag" /* AnimationType.Drag */,
+    "exit" /* AnimationType.Exit */,
 ];
 const variantProps = ["initial", ...variantPriorityOrder$1];
 
@@ -1416,7 +1405,7 @@ function addHoverEvent(node, isActive) {
             return;
         const props = node.getProps();
         if (node.animationState && props.whileHover) {
-            node.animationState.setActive(exports.AnimationType.Hover, isActive);
+            node.animationState.setActive("whileHover" /* AnimationType.Hover */, isActive);
         }
         if (props[callbackName]) {
             props[callbackName](event, info);
@@ -1454,13 +1443,13 @@ class FocusGesture extends Feature {
         }
         if (!isFocusVisible || !this.node.animationState)
             return;
-        this.node.animationState.setActive(exports.AnimationType.Focus, true);
+        this.node.animationState.setActive("whileFocus" /* AnimationType.Focus */, true);
         this.isActive = true;
     }
     onBlur() {
         if (!this.isActive || !this.node.animationState)
             return;
-        this.node.animationState.setActive(exports.AnimationType.Focus, false);
+        this.node.animationState.setActive("whileFocus" /* AnimationType.Focus */, false);
         this.isActive = false;
     }
     mount() {
@@ -1556,7 +1545,7 @@ class PressGesture extends Feature {
          * Ensure we trigger animations before firing event callback
          */
         if (whileTap && this.node.animationState) {
-            this.node.animationState.setActive(exports.AnimationType.Tap, true);
+            this.node.animationState.setActive("whileTap" /* AnimationType.Tap */, true);
         }
         onTapStart && onTapStart(event, info);
     }
@@ -1565,7 +1554,7 @@ class PressGesture extends Feature {
         this.isPressing = false;
         const props = this.node.getProps();
         if (props.whileTap && this.node.animationState) {
-            this.node.animationState.setActive(exports.AnimationType.Tap, false);
+            this.node.animationState.setActive("whileTap" /* AnimationType.Tap */, false);
         }
         return !isDragActive();
     }
@@ -1660,7 +1649,7 @@ class InViewFeature extends Feature {
             const { onViewportEnter } = this.node.getProps();
             onViewportEnter && onViewportEnter(null);
             if (this.node.animationState) {
-                this.node.animationState.setActive(exports.AnimationType.InView, true);
+                this.node.animationState.setActive("whileInView" /* AnimationType.InView */, true);
             }
         });
     }
@@ -1697,7 +1686,7 @@ class InViewFeature extends Feature {
                 this.hasEnteredView = true;
             }
             if (this.node.animationState) {
-                this.node.animationState.setActive(exports.AnimationType.InView, isIntersecting);
+                this.node.animationState.setActive("whileInView" /* AnimationType.InView */, isIntersecting);
             }
             /**
              * Use the latest committed props rather than the ones in scope
@@ -2011,7 +2000,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 = "9.1.1";
+        this.version = "9.1.3";
         /**
          * Duration, in milliseconds, since last updating frame.
          *
@@ -4191,13 +4180,13 @@ function shouldBlockAnimation({ protectedKeys, needsAnimating }, key) {
 }
 
 const variantPriorityOrder = [
-    exports.AnimationType.Animate,
-    exports.AnimationType.InView,
-    exports.AnimationType.Focus,
-    exports.AnimationType.Hover,
-    exports.AnimationType.Tap,
-    exports.AnimationType.Drag,
-    exports.AnimationType.Exit,
+    "animate" /* AnimationType.Animate */,
+    "whileInView" /* AnimationType.InView */,
+    "whileFocus" /* AnimationType.Focus */,
+    "whileHover" /* AnimationType.Hover */,
+    "whileTap" /* AnimationType.Tap */,
+    "whileDrag" /* AnimationType.Drag */,
+    "exit" /* AnimationType.Exit */,
 ];
 const reversePriorityOrder = [...variantPriorityOrder].reverse();
 const numAnimationTypes = variantPriorityOrder.length;
@@ -4499,13 +4488,13 @@ function createTypeState(isActive = false) {
 }
 function createState() {
     return {
-        [exports.AnimationType.Animate]: createTypeState(true),
-        [exports.AnimationType.InView]: createTypeState(),
-        [exports.AnimationType.Hover]: createTypeState(),
-        [exports.AnimationType.Tap]: createTypeState(),
-        [exports.AnimationType.Drag]: createTypeState(),
-        [exports.AnimationType.Focus]: createTypeState(),
-        [exports.AnimationType.Exit]: createTypeState(),
+        ["animate" /* AnimationType.Animate */]: createTypeState(true),
+        ["whileInView" /* AnimationType.InView */]: createTypeState(),
+        ["whileHover" /* AnimationType.Hover */]: createTypeState(),
+        ["whileTap" /* AnimationType.Tap */]: createTypeState(),
+        ["whileDrag" /* AnimationType.Drag */]: createTypeState(),
+        ["whileFocus" /* AnimationType.Focus */]: createTypeState(),
+        ["exit" /* AnimationType.Exit */]: createTypeState(),
     };
 }
 
@@ -4556,7 +4545,7 @@ class ExitAnimationFeature extends Feature {
         if (!this.node.animationState || isPresent === prevIsPresent) {
             return;
         }
-        const exitAnimation = this.node.animationState.setActive(exports.AnimationType.Exit, !isPresent, { custom: custom !== null && custom !== void 0 ? custom : this.node.getProps().custom });
+        const exitAnimation = this.node.animationState.setActive("exit" /* AnimationType.Exit */, !isPresent, { custom: custom !== null && custom !== void 0 ? custom : this.node.getProps().custom });
         if (onExitComplete && !isPresent) {
             exitAnimation.then(() => onExitComplete(this.id));
         }
@@ -5170,7 +5159,7 @@ class VisualElementDragControls {
             // Fire onDragStart event
             onDragStart && onDragStart(event, info);
             const { animationState } = this.visualElement;
-            animationState && animationState.setActive(exports.AnimationType.Drag, true);
+            animationState && animationState.setActive("whileDrag" /* AnimationType.Drag */, true);
         };
         const onMove = (event, info) => {
             // latestPointerEvent = event
@@ -5235,7 +5224,7 @@ class VisualElementDragControls {
             this.openGlobalLock();
             this.openGlobalLock = null;
         }
-        animationState && animationState.setActive(exports.AnimationType.Drag, false);
+        animationState && animationState.setActive("whileDrag" /* AnimationType.Drag */, false);
     }
     updateAxis(axis, _point, offset) {
         const { drag } = this.getProps();
@@ -5955,6 +5944,12 @@ class FlatTree {
     }
 }
 
+function record(data) {
+    if (window.MotionDebug) {
+        window.MotionDebug.record(data);
+    }
+}
+
 const transformAxes = ["", "X", "Y", "Z"];
 /**
  * We use 1000 as the animation target as 0-1000 maps better to pixels than 0-1
@@ -5962,6 +5957,16 @@ const transformAxes = ["", "X", "Y", "Z"];
  */
 const animationTarget = 1000;
 let id$1 = 0;
+/**
+ * Use a mutable data object for debug data so as to not create a new
+ * object every frame.
+ */
+const projectionFrameData = {
+    type: "projectionFrame",
+    totalNodes: 0,
+    resolvedTargetDeltas: 0,
+    recalculatedProjection: 0,
+};
 function createProjectionNode({ attachResizeListener, defaultParent, measureScroll, checkIsScrollRoot, resetTransform, }) {
     return class ProjectionNode {
         constructor(elementId, latestValues = {}, parent = defaultParent === null || defaultParent === void 0 ? void 0 : defaultParent()) {
@@ -5999,12 +6004,21 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
              * and if one node is dirtied, they all are.
              */
             this.isLayoutDirty = false;
-            this.isTransformDirty = false;
             /**
-             * Flag to true if we think the projection calculations for this or any
-             * child might need recalculating as a result of an updated transform or layout animation.
+             * Flag to true if we think the projection calculations for this node needs
+             * recalculating as a result of an updated transform or layout animation.
              */
             this.isProjectionDirty = false;
+            /**
+             * Flag to true if the layout *or* transform has changed. This then gets propagated
+             * throughout the projection tree, forcing any element below to recalculate on the next frame.
+             */
+            this.isSharedProjectionDirty = false;
+            /**
+             * Flag transform dirty. This gets propagated throughout the whole tree but is only
+             * respected by shared nodes.
+             */
+            this.isTransformDirty = false;
             /**
              * Block layout updates for instant layout transitions throughout the tree.
              */
@@ -6055,9 +6069,19 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
              * the next step.
              */
             this.updateProjection = () => {
+                /**
+                 * Reset debug counts. Manually resetting rather than creating a new
+                 * object each frame.
+                 */
+                projectionFrameData.totalNodes =
+                    projectionFrameData.resolvedTargetDeltas =
+                        projectionFrameData.recalculatedProjection =
+                            0;
                 this.nodes.forEach(propagateDirtyNodes);
                 this.nodes.forEach(resolveTargetDelta);
                 this.nodes.forEach(calcProjection);
+                this.nodes.forEach(cleanDirtyNodes);
+                record(projectionFrameData);
             };
             this.hasProjected = false;
             this.isVisible = true;
@@ -6513,13 +6537,10 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
             }
             return boxWithoutTransform;
         }
-        /**
-         *
-         */
         setTargetDelta(delta) {
             this.targetDelta = delta;
-            this.isProjectionDirty = true;
             this.root.scheduleUpdateProjection();
+            this.isProjectionDirty = true;
         }
         setOptions(options) {
             this.options = {
@@ -6541,6 +6562,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
          * Frame calculations
          */
         resolveTargetDelta() {
+            var _a;
             /**
              * Once the dirty status of nodes has been spread through the tree, we also
              * need to check if we have a shared node of a different depth that has itself
@@ -6549,11 +6571,17 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
             const lead = this.getLead();
             this.isProjectionDirty || (this.isProjectionDirty = lead.isProjectionDirty);
             this.isTransformDirty || (this.isTransformDirty = lead.isTransformDirty);
+            this.isSharedProjectionDirty || (this.isSharedProjectionDirty = lead.isSharedProjectionDirty);
+            const isShared = Boolean(this.resumingFrom) || this !== lead;
             /**
              * We don't use transform for this step of processing so we don't
              * need to check whether any nodes have changed transform.
              */
-            if (!this.isProjectionDirty && !this.attemptToResolveRelativeTarget)
+            const canSkip = !((isShared && this.isSharedProjectionDirty) ||
+                this.isProjectionDirty ||
+                ((_a = this.parent) === null || _a === void 0 ? void 0 : _a.isProjectionDirty) ||
+                this.attemptToResolveRelativeTarget);
+            if (canSkip)
                 return;
             const { layout, layoutId } = this.options;
             /**
@@ -6643,6 +6671,10 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
                     this.relativeParent = this.relativeTarget = undefined;
                 }
             }
+            /**
+             * Increase debug counter for resolved target deltas
+             */
+            projectionFrameData.resolvedTargetDeltas++;
         }
         getClosestProjectingParent() {
             if (!this.parent ||
@@ -6650,26 +6682,39 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
                 has2DTranslate(this.parent.latestValues)) {
                 return undefined;
             }
-            if ((this.parent.relativeTarget ||
-                this.parent.targetDelta ||
-                this.parent.options.layoutRoot) &&
-                this.parent.layout) {
+            if (this.parent.isProjecting()) {
                 return this.parent;
             }
             else {
                 return this.parent.getClosestProjectingParent();
             }
         }
+        isProjecting() {
+            return Boolean((this.relativeTarget ||
+                this.targetDelta ||
+                this.options.layoutRoot) &&
+                this.layout);
+        }
         calcProjection() {
-            const { isProjectionDirty, isTransformDirty } = this;
-            this.isProjectionDirty = this.isTransformDirty = false;
+            var _a;
             const lead = this.getLead();
             const isShared = Boolean(this.resumingFrom) || this !== lead;
             let canSkip = true;
-            if (isProjectionDirty)
+            /**
+             * If this is a normal layout animation and neither this node nor its nearest projecting
+             * is dirty then we can't skip.
+             */
+            if (this.isProjectionDirty || ((_a = this.parent) === null || _a === void 0 ? void 0 : _a.isProjectionDirty)) {
                 canSkip = false;
-            if (isShared && isTransformDirty)
+            }
+            /**
+             * If this is a shared layout animation and this node's shared projection is dirty then
+             * we can't skip.
+             */
+            if (isShared &&
+                (this.isSharedProjectionDirty || this.isTransformDirty)) {
                 canSkip = false;
+            }
             if (canSkip)
                 return;
             const { layout, layoutId } = this.options;
@@ -6723,6 +6768,10 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
                 this.scheduleRender();
                 this.notifyListeners("projectionUpdate", target);
             }
+            /**
+             * Increase debug counter for recalculated projections
+             */
+            projectionFrameData.recalculatedProjection++;
         }
         hide() {
             this.isVisible = false;
@@ -6765,6 +6814,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
                 this.options.crossfade === true &&
                 !this.path.some(hasOpacityCrossfade));
             this.animationProgress = 0;
+            let prevRelativeTarget;
             this.mixTargetDelta = (latest) => {
                 const progress = latest / 1000;
                 mixAxisDelta(targetDelta.x, delta.x, progress);
@@ -6777,6 +6827,17 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
                     this.relativeParent.layout) {
                     calcRelativePosition(relativeLayout, this.layout.layoutBox, this.relativeParent.layout.layoutBox);
                     mixBox(this.relativeTarget, this.relativeTargetOrigin, relativeLayout, progress);
+                    /**
+                     * If this is an unchanged relative target we can consider the
+                     * projection not dirty.
+                     */
+                    if (prevRelativeTarget &&
+                        boxEquals(this.relativeTarget, prevRelativeTarget)) {
+                        this.isProjectionDirty = false;
+                    }
+                    if (!prevRelativeTarget)
+                        prevRelativeTarget = createBox();
+                    copyBoxInto(prevRelativeTarget, this.relativeTarget);
                 }
                 if (isSharedLayoutAnimation) {
                     this.animationValues = mixedValues;
@@ -7190,14 +7251,35 @@ function notifyLayoutUpdate(node) {
 }
 function propagateDirtyNodes(node) {
     /**
-     * Propagate isProjectionDirty. Nodes are ordered by depth, so if the parent here
-     * is dirty we can simply pass this forward.
+     * Increase debug counter for nodes encountered this frame
      */
-    node.isProjectionDirty || (node.isProjectionDirty = Boolean(node.parent && node.parent.isProjectionDirty));
+    projectionFrameData.totalNodes++;
+    if (!node.parent)
+        return;
+    /**
+     * If this node isn't projecting, propagate isProjectionDirty. It will have
+     * no performance impact but it will allow the next child that *is* projecting
+     * but *isn't* dirty to just check its parent to see if *any* ancestor needs
+     * correcting.
+     */
+    if (!node.isProjecting()) {
+        node.isProjectionDirty = node.parent.isProjectionDirty;
+    }
     /**
-     * Propagate isTransformDirty.
+     * Propagate isSharedProjectionDirty and isTransformDirty
+     * throughout the whole tree. A future revision can take another look at
+     * this but for safety we still recalcualte shared nodes.
      */
-    node.isTransformDirty || (node.isTransformDirty = Boolean(node.parent && node.parent.isTransformDirty));
+    node.isSharedProjectionDirty || (node.isSharedProjectionDirty = Boolean(node.isProjectionDirty ||
+        node.parent.isProjectionDirty ||
+        node.parent.isSharedProjectionDirty));
+    node.isTransformDirty || (node.isTransformDirty = node.parent.isTransformDirty);
+}
+function cleanDirtyNodes(node) {
+    node.isProjectionDirty =
+        node.isSharedProjectionDirty =
+            node.isTransformDirty =
+                false;
 }
 function clearSnapshot(node) {
     node.clearSnapshot();
@@ -7521,15 +7603,6 @@ const hasPositionalKey = (target) => {
     return Object.keys(target).some(isPositionalKey);
 };
 const isNumOrPxType = (v) => v === number || v === px;
-var BoundingBoxDimension;
-(function (BoundingBoxDimension) {
-    BoundingBoxDimension["width"] = "width";
-    BoundingBoxDimension["height"] = "height";
-    BoundingBoxDimension["left"] = "left";
-    BoundingBoxDimension["right"] = "right";
-    BoundingBoxDimension["top"] = "top";
-    BoundingBoxDimension["bottom"] = "bottom";
-})(BoundingBoxDimension || (BoundingBoxDimension = {}));
 const getPosFromMatrix = (matrix, pos) => parseFloat(matrix.split(", ")[pos]);
 const getTranslateFromMatrix = (pos2, pos3) => (_bbox, { transform }) => {
     if (transform === "none" || !transform)
@@ -7784,7 +7857,7 @@ function updateMotionValuesFromProps(element, next, prev) {
              * and warn against mismatches.
              */
             if (process.env.NODE_ENV === "development") {
-                warnOnce(nextValue.version === "9.1.1", `Attempting to mix Framer Motion versions ${nextValue.version} with 9.1.1 may not work as expected.`);
+                warnOnce(nextValue.version === "9.1.3", `Attempting to mix Framer Motion versions ${nextValue.version} with 9.1.3 may not work as expected.`);
             }
         }
         else if (isMotionValue(prevValue)) {
@@ -9299,6 +9372,17 @@ const Reorder = {
     Item,
 };
 
+exports.AnimationType = void 0;
+(function (AnimationType) {
+    AnimationType["Animate"] = "animate";
+    AnimationType["Hover"] = "whileHover";
+    AnimationType["Tap"] = "whileTap";
+    AnimationType["Drag"] = "whileDrag";
+    AnimationType["Focus"] = "whileFocus";
+    AnimationType["InView"] = "whileInView";
+    AnimationType["Exit"] = "exit";
+})(exports.AnimationType || (exports.AnimationType = {}));
+
 /**
  * @public
  */

package/dist/es/debug/record.mjs

@@ -0,0 +1,7 @@
+function record(data) {
+    if (window.MotionDebug) {
+        window.MotionDebug.record(data);
+    }
+}
+
+export { record };

package/dist/es/gestures/drag/VisualElementDragControls.mjs

@@ -4,7 +4,6 @@ import { getGlobalLock } from './utils/lock.mjs';
 import { isRefObject } from '../../utils/is-ref-object.mjs';
 import { addPointerEvent } from '../../events/add-pointer-event.mjs';
 import { applyConstraints, calcRelativeConstraints, resolveDragElastic, calcViewportConstraints, defaultElastic, rebaseAxisConstraints, calcOrigin } from './utils/constraints.mjs';
-import { AnimationType } from '../../render/utils/types.mjs';
 import { createBox } from '../../projection/geometry/models.mjs';
 import { eachAxis } from '../../projection/utils/each-axis.mjs';
 import { measurePageBox } from '../../projection/utils/measure.mjs';
@@ -97,7 +96,7 @@ class VisualElementDragControls {
             // Fire onDragStart event
             onDragStart && onDragStart(event, info);
             const { animationState } = this.visualElement;
-            animationState && animationState.setActive(AnimationType.Drag, true);
+            animationState && animationState.setActive("whileDrag" /* AnimationType.Drag */, true);
         };
         const onMove = (event, info) => {
             // latestPointerEvent = event
@@ -162,7 +161,7 @@ class VisualElementDragControls {
             this.openGlobalLock();
             this.openGlobalLock = null;
         }
-        animationState && animationState.setActive(AnimationType.Drag, false);
+        animationState && animationState.setActive("whileDrag" /* AnimationType.Drag */, false);
     }
     updateAxis(axis, _point, offset) {
         const { drag } = this.getProps();

package/dist/es/gestures/focus.mjs

@@ -1,6 +1,5 @@
 import { addDomEvent } from '../events/add-dom-event.mjs';
 import { Feature } from '../motion/features/Feature.mjs';
-import { AnimationType } from '../render/utils/types.mjs';
 import { pipe } from '../utils/pipe.mjs';
 
 class FocusGesture extends Feature {
@@ -24,13 +23,13 @@ class FocusGesture extends Feature {
         }
         if (!isFocusVisible || !this.node.animationState)
             return;
-        this.node.animationState.setActive(AnimationType.Focus, true);
+        this.node.animationState.setActive("whileFocus" /* AnimationType.Focus */, true);
         this.isActive = true;
     }
     onBlur() {
         if (!this.isActive || !this.node.animationState)
             return;
-        this.node.animationState.setActive(AnimationType.Focus, false);
+        this.node.animationState.setActive("whileFocus" /* AnimationType.Focus */, false);
         this.isActive = false;
     }
     mount() {

package/dist/es/gestures/hover.mjs

@@ -1,5 +1,4 @@
 import { addPointerEvent } from '../events/add-pointer-event.mjs';
-import { AnimationType } from '../render/utils/types.mjs';
 import { pipe } from '../utils/pipe.mjs';
 import { isDragActive } from './drag/utils/lock.mjs';
 import { Feature } from '../motion/features/Feature.mjs';
@@ -12,7 +11,7 @@ function addHoverEvent(node, isActive) {
             return;
         const props = node.getProps();
         if (node.animationState && props.whileHover) {
-            node.animationState.setActive(AnimationType.Hover, isActive);
+            node.animationState.setActive("whileHover" /* AnimationType.Hover */, isActive);
         }
         if (props[callbackName]) {
             props[callbackName](event, info);

package/dist/es/gestures/press.mjs

@@ -2,7 +2,6 @@ import { extractEventInfo } from '../events/event-info.mjs';
 import { addDomEvent } from '../events/add-dom-event.mjs';
 import { addPointerEvent } from '../events/add-pointer-event.mjs';
 import { Feature } from '../motion/features/Feature.mjs';
-import { AnimationType } from '../render/utils/types.mjs';
 import { pipe } from '../utils/pipe.mjs';
 import { isDragActive } from './drag/utils/lock.mjs';
 import { isNodeOrChild } from './utils/is-node-or-child.mjs';
@@ -74,7 +73,7 @@ class PressGesture extends Feature {
          * Ensure we trigger animations before firing event callback
          */
         if (whileTap && this.node.animationState) {
-            this.node.animationState.setActive(AnimationType.Tap, true);
+            this.node.animationState.setActive("whileTap" /* AnimationType.Tap */, true);
         }
         onTapStart && onTapStart(event, info);
     }
@@ -83,7 +82,7 @@ class PressGesture extends Feature {
         this.isPressing = false;
         const props = this.node.getProps();
         if (props.whileTap && this.node.animationState) {
-            this.node.animationState.setActive(AnimationType.Tap, false);
+            this.node.animationState.setActive("whileTap" /* AnimationType.Tap */, false);
         }
         return !isDragActive();
     }

package/dist/es/motion/features/animation/exit.mjs

@@ -1,4 +1,3 @@
-import { AnimationType } from '../../../render/utils/types.mjs';
 import { Feature } from '../Feature.mjs';
 
 let id = 0;
@@ -15,7 +14,7 @@ class ExitAnimationFeature extends Feature {
         if (!this.node.animationState || isPresent === prevIsPresent) {
             return;
         }
-        const exitAnimation = this.node.animationState.setActive(AnimationType.Exit, !isPresent, { custom: custom !== null && custom !== void 0 ? custom : this.node.getProps().custom });
+        const exitAnimation = this.node.animationState.setActive("exit" /* AnimationType.Exit */, !isPresent, { custom: custom !== null && custom !== void 0 ? custom : this.node.getProps().custom });
         if (onExitComplete && !isPresent) {
             exitAnimation.then(() => onExitComplete(this.id));
         }

package/dist/es/motion/features/viewport/index.mjs

@@ -1,4 +1,3 @@
-import { AnimationType } from '../../../render/utils/types.mjs';
 import { Feature } from '../Feature.mjs';
 import { observeIntersection } from './observers.mjs';
 
@@ -26,7 +25,7 @@ class InViewFeature extends Feature {
             const { onViewportEnter } = this.node.getProps();
             onViewportEnter && onViewportEnter(null);
             if (this.node.animationState) {
-                this.node.animationState.setActive(AnimationType.InView, true);
+                this.node.animationState.setActive("whileInView" /* AnimationType.InView */, true);
             }
         });
     }
@@ -63,7 +62,7 @@ class InViewFeature extends Feature {
                 this.hasEnteredView = true;
             }
             if (this.node.animationState) {
-                this.node.animationState.setActive(AnimationType.InView, isIntersecting);
+                this.node.animationState.setActive("whileInView" /* AnimationType.InView */, isIntersecting);
             }
             /**
              * Use the latest committed props rather than the ones in scope