framer-motion 12.6.2 → 12.6.3

package/dist/es/animation/animators/waapi/animate-elements.mjs

@@ -1,6 +1,5 @@
-import { resolveElements, getValueTransition } from 'motion-dom';
+import { resolveElements, getValueTransition, NativeAnimation } from 'motion-dom';
 import { invariant, secondsToMilliseconds } from 'motion-utils';
-import { NativeAnimation } from './NativeAnimation.mjs';
 
 function animateElements(elementOrSelector, keyframes, options, scope) {
     const elements = resolveElements(elementOrSelector, scope);
@@ -21,13 +20,15 @@ function animateElements(elementOrSelector, keyframes, options, scope) {
             const valueOptions = {
                 ...getValueTransition(elementTransition, valueName),
             };
-            valueOptions.duration = valueOptions.duration
-                ? secondsToMilliseconds(valueOptions.duration)
-                : valueOptions.duration;
-            valueOptions.delay = secondsToMilliseconds(valueOptions.delay || 0);
-            valueOptions.allowFlatten =
-                !elementTransition.type && !elementTransition.ease;
-            animations.push(new NativeAnimation(element, valueName, valueKeyframes, valueOptions));
+            valueOptions.duration && (valueOptions.duration = secondsToMilliseconds(valueOptions.duration));
+            valueOptions.delay && (valueOptions.delay = secondsToMilliseconds(valueOptions.delay));
+            animations.push(new NativeAnimation({
+                element,
+                name: valueName,
+                keyframes: valueKeyframes,
+                transition: valueOptions,
+                allowFlatten: !elementTransition.type && !elementTransition.ease,
+            }));
         }
     }
     return animations;

package/dist/es/animation/animators/waapi/animate-sequence.mjs

@@ -1,4 +1,4 @@
-import { GroupPlaybackControls } from 'motion-dom';
+import { GroupAnimationWithThen } from 'motion-dom';
 import { createAnimationsFromSequence } from '../../sequence/create.mjs';
 import { animateElements } from './animate-elements.mjs';
 
@@ -7,7 +7,7 @@ function animateSequence(definition, options) {
     createAnimationsFromSequence(definition, options).forEach(({ keyframes, transition }, element) => {
         animations.push(...animateElements(element, keyframes, transition));
     });
-    return new GroupPlaybackControls(animations);
+    return new GroupAnimationWithThen(animations);
 }
 
 export { animateSequence };

package/dist/es/animation/animators/waapi/animate-style.mjs

@@ -1,9 +1,9 @@
-import { GroupPlaybackControls } from 'motion-dom';
+import { GroupAnimationWithThen } from 'motion-dom';
 import { animateElements } from './animate-elements.mjs';
 
 const createScopedWaapiAnimate = (scope) => {
     function scopedAnimate(elementOrSelector, keyframes, options) {
-        return new GroupPlaybackControls(animateElements(elementOrSelector, keyframes, options, scope));
+        return new GroupAnimationWithThen(animateElements(elementOrSelector, keyframes, options, scope));
     }
     return scopedAnimate;
 };

package/dist/es/animation/generators/spring/index.mjs

@@ -1,4 +1,4 @@
-import { calcGeneratorDuration, maxGeneratorDuration, generateLinearEasing } from 'motion-dom';
+import { createGeneratorEasing, supportsLinearEasing, calcGeneratorDuration, maxGeneratorDuration, generateLinearEasing } from 'motion-dom';
 import { millisecondsToSeconds, secondsToMilliseconds } from 'motion-utils';
 import { clamp } from '../../../utils/clamp.mjs';
 import { calcGeneratorVelocity } from '../utils/velocity.mjs';
@@ -159,8 +159,16 @@ function spring(optionsOrVisualDuration = springDefaults.visualDuration, bounce
             const easing = generateLinearEasing((progress) => generator.next(calculatedDuration * progress).value, calculatedDuration, 30);
             return calculatedDuration + "ms " + easing;
         },
+        toTransition: () => { },
     };
     return generator;
 }
+spring.applyToOptions = (options) => {
+    const generatorOptions = createGeneratorEasing(options, 100, spring);
+    options.ease = supportsLinearEasing() ? generatorOptions.ease : "easeOut";
+    options.duration = secondsToMilliseconds(generatorOptions.duration);
+    options.type = "keyframes";
+    return options;
+};
 
 export { spring };

package/dist/es/animation/interfaces/motion-value.mjs

@@ -1,4 +1,4 @@
-import { getValueTransition, frame, GroupPlaybackControls } from 'motion-dom';
+import { getValueTransition, frame, GroupAnimationWithThen } from 'motion-dom';
 import { secondsToMilliseconds, MotionGlobalConfig } from 'motion-utils';
 import { instantAnimationState } from '../../utils/use-instant-transition-state.mjs';
 import { AcceleratedAnimation } from '../animators/AcceleratedAnimation.mjs';
@@ -96,7 +96,7 @@ const animateMotionValue = (name, value, target, transition = {}, element, isHan
             });
             // We still want to return some animation controls here rather
             // than returning undefined
-            return new GroupPlaybackControls([]);
+            return new GroupAnimationWithThen([]);
         }
     }
     /**

package/dist/es/animation/interfaces/visual-element-target.mjs

@@ -17,7 +17,6 @@ function shouldBlockAnimation({ protectedKeys, needsAnimating }, key) {
     return shouldBlock;
 }
 function animateTarget(visualElement, targetAndTransition, { delay = 0, transitionOverride, type } = {}) {
-    var _a;
     let { transition = visualElement.getDefaultTransition(), transitionEnd, ...target } = targetAndTransition;
     if (transitionOverride)
         transition = transitionOverride;
@@ -26,7 +25,7 @@ function animateTarget(visualElement, targetAndTransition, { delay = 0, transiti
         visualElement.animationState &&
         visualElement.animationState.getState()[type];
     for (const key in target) {
-        const value = visualElement.getValue(key, (_a = visualElement.latestValues[key]) !== null && _a !== void 0 ? _a : null);
+        const value = visualElement.getValue(key, visualElement.latestValues[key] ?? null);
         const valueTarget = target[key];
         if (valueTarget === undefined ||
             (animationTypeState &&

package/dist/es/animation/interfaces/visual-element-variant.mjs

@@ -2,9 +2,8 @@ import { resolveVariant } from '../../render/utils/resolve-dynamic-variants.mjs'
 import { animateTarget } from './visual-element-target.mjs';
 
 function animateVariant(visualElement, variant, options = {}) {
-    var _a;
     const resolved = resolveVariant(visualElement, variant, options.type === "exit"
-        ? (_a = visualElement.presenceContext) === null || _a === void 0 ? void 0 : _a.custom
+        ? visualElement.presenceContext?.custom
         : undefined);
     let { transition = visualElement.getDefaultTransition() || {} } = resolved || {};
     if (options.transitionOverride) {

package/dist/es/animation/optimized-appear/handoff.mjs

@@ -2,7 +2,6 @@ import { appearAnimationStore } from './store.mjs';
 import { appearStoreId } from './store-id.mjs';
 
 function handoffOptimizedAppearAnimation(elementId, valueName, frame) {
-    var _a;
     const storeId = appearStoreId(elementId, valueName);
     const optimisedAnimation = appearAnimationStore.get(storeId);
     if (!optimisedAnimation) {
@@ -10,8 +9,7 @@ function handoffOptimizedAppearAnimation(elementId, valueName, frame) {
     }
     const { animation, startTime } = optimisedAnimation;
     function cancelAnimation() {
-        var _a;
-        (_a = window.MotionCancelOptimisedAnimation) === null || _a === void 0 ? void 0 : _a.call(window, elementId, valueName, frame);
+        window.MotionCancelOptimisedAnimation?.(elementId, valueName, frame);
     }
     /**
      * We can cancel the animation once it's finished now that we've synced
@@ -21,7 +19,7 @@ function handoffOptimizedAppearAnimation(elementId, valueName, frame) {
      * older browsers.
      */
     animation.onfinish = cancelAnimation;
-    if (startTime === null || ((_a = window.MotionHandoffIsComplete) === null || _a === void 0 ? void 0 : _a.call(window, elementId))) {
+    if (startTime === null || window.MotionHandoffIsComplete?.(elementId)) {
         /**
          * If the startTime is null, this animation is the Paint Ready detection animation
          * and we can cancel it immediately without handoff.

package/dist/es/animation/optimized-appear/start.mjs

@@ -1,5 +1,5 @@
+import { startWaapiAnimation } from 'motion-dom';
 import { noop } from 'motion-utils';
-import { startWaapiAnimation } from '../animators/waapi/index.mjs';
 import { optimizedAppearDataId } from './data-id.mjs';
 import { getOptimisedAppearId } from './get-appear-id.mjs';
 import { handoffOptimizedAppearAnimation } from './handoff.mjs';
@@ -124,18 +124,16 @@ function startOptimizedAppearAnimation(element, name, keyframes, options, onRead
             }
         };
         window.MotionCheckAppearSync = (visualElement, valueName, value) => {
-            var _a, _b;
             const appearId = getOptimisedAppearId(visualElement);
             if (!appearId)
                 return;
-            const valueIsOptimised = (_a = window.MotionHasOptimisedAnimation) === null || _a === void 0 ? void 0 : _a.call(window, appearId, valueName);
-            const externalAnimationValue = (_b = visualElement.props.values) === null || _b === void 0 ? void 0 : _b[valueName];
+            const valueIsOptimised = window.MotionHasOptimisedAnimation?.(appearId, valueName);
+            const externalAnimationValue = visualElement.props.values?.[valueName];
             if (!valueIsOptimised || !externalAnimationValue)
                 return;
             const removeSyncCheck = value.on("change", (latestValue) => {
-                var _a;
                 if (externalAnimationValue.get() !== latestValue) {
-                    (_a = window.MotionCancelOptimisedAnimation) === null || _a === void 0 ? void 0 : _a.call(window, appearId, valueName);
+                    window.MotionCancelOptimisedAnimation?.(appearId, valueName);
                     removeSyncCheck();
                 }
             });

package/dist/es/animation/sequence/create.mjs

@@ -69,7 +69,7 @@ function createAnimationsFromSequence(sequence, { defaultTransition = {}, ...seq
             const numKeyframes = valueKeyframesAsList.length;
             const createGenerator = isGenerator(type)
                 ? type
-                : generators === null || generators === void 0 ? void 0 : generators[type];
+                : generators?.[type];
             if (numKeyframes <= 2 && createGenerator) {
                 /**
                  * As we're creating an easing function from a spring,
@@ -91,7 +91,7 @@ function createAnimationsFromSequence(sequence, { defaultTransition = {}, ...seq
                 ease = springEasing.ease;
                 duration = springEasing.duration;
             }
-            duration !== null && duration !== void 0 ? duration : (duration = defaultDuration);
+            duration ?? (duration = defaultDuration);
             const startTime = currentTime + calculatedDelay;
             /**
              * If there's only one time offset of 0, fill in a second with length 1

package/dist/es/animation/sequence/utils/calc-time.mjs

@@ -3,7 +3,6 @@
  * calculate an absolute time for the next keyframes.
  */
 function calcNextTime(current, next, prev, labels) {
-    var _a;
     if (typeof next === "number") {
         return next;
     }
@@ -14,7 +13,7 @@ function calcNextTime(current, next, prev, labels) {
         return prev;
     }
     else {
-        return (_a = labels.get(next)) !== null && _a !== void 0 ? _a : current;
+        return labels.get(next) ?? current;
     }
 }
 

package/dist/es/components/AnimatePresence/index.mjs

@@ -151,9 +151,9 @@ const AnimatePresence = ({ children, custom, initial = true, onExitComplete, pre
                         isEveryExitComplete = false;
                 });
                 if (isEveryExitComplete) {
-                    forceRender === null || forceRender === void 0 ? void 0 : forceRender();
+                    forceRender?.();
                     setRenderedChildren(pendingPresentChildren.current);
-                    propagate && (safeToRemove === null || safeToRemove === void 0 ? void 0 : safeToRemove());
+                    propagate && safeToRemove?.();
                     onExitComplete && onExitComplete();
                 }
             };

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

@@ -134,11 +134,8 @@ class VisualElementDragControls {
             onDrag && onDrag(event, info);
         };
         const onSessionEnd = (event, info) => this.stop(event, info);
-        const resumeAnimation = () => eachAxis((axis) => {
-            var _a;
-            return this.getAnimationState(axis) === "paused" &&
-                ((_a = this.getAxisMotionValue(axis).animation) === null || _a === void 0 ? void 0 : _a.play());
-        });
+        const resumeAnimation = () => eachAxis((axis) => this.getAnimationState(axis) === "paused" &&
+            this.getAxisMotionValue(axis).animation?.play());
         const { dragSnapToOrigin } = this.getProps();
         this.panSession = new PanSession(originEvent, {
             onSessionStart,
@@ -193,12 +190,11 @@ class VisualElementDragControls {
         axisValue.set(next);
     }
     resolveConstraints() {
-        var _a;
         const { dragConstraints, dragElastic } = this.getProps();
         const layout = this.visualElement.projection &&
             !this.visualElement.projection.layout
             ? this.visualElement.projection.measure(false)
-            : (_a = this.visualElement.projection) === null || _a === void 0 ? void 0 : _a.layout;
+            : this.visualElement.projection?.layout;
         const prevConstraints = this.constraints;
         if (dragConstraints && isRefObject(dragConstraints)) {
             if (!this.constraints) {
@@ -301,11 +297,10 @@ class VisualElementDragControls {
         eachAxis((axis) => this.getAxisMotionValue(axis).stop());
     }
     pauseAnimation() {
-        eachAxis((axis) => { var _a; return (_a = this.getAxisMotionValue(axis).animation) === null || _a === void 0 ? void 0 : _a.pause(); });
+        eachAxis((axis) => this.getAxisMotionValue(axis).animation?.pause());
     }
     getAnimationState(axis) {
-        var _a;
-        return (_a = this.getAxisMotionValue(axis).animation) === null || _a === void 0 ? void 0 : _a.state;
+        return this.getAxisMotionValue(axis).animation?.state;
     }
     /**
      * Drag works differently depending on which props are provided.

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

@@ -32,9 +32,8 @@ class AnimationFeature extends Feature {
         }
     }
     unmount() {
-        var _a;
         this.node.animationState.reset();
-        (_a = this.unmountControls) === null || _a === void 0 ? void 0 : _a.call(this);
+        this.unmountControls?.();
     }
 }
 

package/dist/es/motion/index.mjs

@@ -24,7 +24,6 @@ import { useVisualElement } from './utils/use-visual-element.mjs';
  * component "offline", or outside the React render cycle.
  */
 function createRendererMotionComponent({ preloadedFeatures, createVisualElement, useRender, useVisualState, Component, }) {
-    var _a, _b;
     preloadedFeatures && loadFeatures(preloadedFeatures);
     function MotionComponent(props, externalRef) {
         /**
@@ -60,7 +59,7 @@ function createRendererMotionComponent({ preloadedFeatures, createVisualElement,
     }
     MotionComponent.displayName = `motion.${typeof Component === "string"
         ? Component
-        : `create(${(_b = (_a = Component.displayName) !== null && _a !== void 0 ? _a : Component.name) !== null && _b !== void 0 ? _b : ""})`}`;
+        : `create(${Component.displayName ?? Component.name ?? ""})`}`;
     const ForwardRefMotionComponent = forwardRef(MotionComponent);
     ForwardRefMotionComponent[motionComponentSymbol] = Component;
     return ForwardRefMotionComponent;
@@ -92,7 +91,7 @@ function getProjectionFunctionality(props) {
         return {};
     const combined = { ...drag, ...layout };
     return {
-        MeasureLayout: (drag === null || drag === void 0 ? void 0 : drag.isEnabled(props)) || (layout === null || layout === void 0 ? void 0 : layout.isEnabled(props))
+        MeasureLayout: drag?.isEnabled(props) || layout?.isEnabled(props)
             ? combined.MeasureLayout
             : undefined,
         ProjectionNode: combined.ProjectionNode,

package/dist/es/motion/utils/use-visual-element.mjs

@@ -10,7 +10,6 @@ import { isRefObject } from '../../utils/is-ref-object.mjs';
 import { useIsomorphicLayoutEffect } from '../../utils/use-isomorphic-effect.mjs';
 
 function useVisualElement(Component, visualState, props, createVisualElement, ProjectionNodeConstructor) {
-    var _a, _b;
     const { visualElement: parent } = useContext(MotionContext);
     const lazyContext = useContext(LazyContext);
     const presenceContext = useContext(PresenceContext);
@@ -60,8 +59,8 @@ function useVisualElement(Component, visualState, props, createVisualElement, Pr
      */
     const optimisedAppearId = props[optimizedAppearDataAttribute];
     const wantsHandoff = useRef(Boolean(optimisedAppearId) &&
-        !((_a = window.MotionHandoffIsComplete) === null || _a === void 0 ? void 0 : _a.call(window, optimisedAppearId)) &&
-        ((_b = window.MotionHasOptimisedAnimation) === null || _b === void 0 ? void 0 : _b.call(window, optimisedAppearId)));
+        !window.MotionHandoffIsComplete?.(optimisedAppearId) &&
+        window.MotionHasOptimisedAnimation?.(optimisedAppearId));
     useIsomorphicLayoutEffect(() => {
         if (!visualElement)
             return;
@@ -92,8 +91,7 @@ function useVisualElement(Component, visualState, props, createVisualElement, Pr
         if (wantsHandoff.current) {
             // This ensures all future calls to animateChanges() in this component will run in useEffect
             queueMicrotask(() => {
-                var _a;
-                (_a = window.MotionHandoffMarkAsComplete) === null || _a === void 0 ? void 0 : _a.call(window, optimisedAppearId);
+                window.MotionHandoffMarkAsComplete?.(optimisedAppearId);
             });
             wantsHandoff.current = false;
         }

package/dist/es/projection/node/create-projection-node.mjs

@@ -65,7 +65,7 @@ function cancelTreeOptimisedTransformAnimations(projectionNode) {
 }
 function createProjectionNode({ attachResizeListener, defaultParent, measureScroll, checkIsScrollRoot, resetTransform, }) {
     return class ProjectionNode {
-        constructor(latestValues = {}, parent = defaultParent === null || defaultParent === void 0 ? void 0 : defaultParent()) {
+        constructor(latestValues = {}, parent = defaultParent?.()) {
             /**
              * A unique ID generated for every projection node.
              */
@@ -596,12 +596,11 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
             };
         }
         measurePageBox() {
-            var _a;
             const { visualElement } = this.options;
             if (!visualElement)
                 return createBox();
             const box = visualElement.measureViewportBox();
-            const wasInScrollRoot = ((_a = this.scroll) === null || _a === void 0 ? void 0 : _a.wasRoot) || this.path.some(checkNodeWasScrollRoot);
+            const wasInScrollRoot = this.scroll?.wasRoot || this.path.some(checkNodeWasScrollRoot);
             if (!wasInScrollRoot) {
                 // Remove viewport scroll to give page-relative coordinates
                 const { scroll } = this.root;
@@ -613,10 +612,9 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
             return box;
         }
         removeElementScroll(box) {
-            var _a;
             const boxWithoutScroll = createBox();
             copyBoxInto(boxWithoutScroll, box);
-            if ((_a = this.scroll) === null || _a === void 0 ? void 0 : _a.wasRoot) {
+            if (this.scroll?.wasRoot) {
                 return boxWithoutScroll;
             }
             /**
@@ -719,7 +717,6 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
             }
         }
         resolveTargetDelta(forceRecalculation = false) {
-            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
@@ -737,7 +734,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
             const canSkip = !(forceRecalculation ||
                 (isShared && this.isSharedProjectionDirty) ||
                 this.isProjectionDirty ||
-                ((_a = this.parent) === null || _a === void 0 ? void 0 : _a.isProjectionDirty) ||
+                this.parent?.isProjectionDirty ||
                 this.attemptToResolveRelativeTarget ||
                 this.root.updateBlockedByResize);
             if (canSkip)
@@ -862,7 +859,6 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
                 this.layout);
         }
         calcProjection() {
-            var _a;
             const lead = this.getLead();
             const isShared = Boolean(this.resumingFrom) || this !== lead;
             let canSkip = true;
@@ -870,7 +866,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
              * 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)) {
+            if (this.isProjectionDirty || this.parent?.isProjectionDirty) {
                 canSkip = false;
             }
             /**
@@ -982,8 +978,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
             // TODO: Schedule render
         }
         scheduleRender(notifyAll = true) {
-            var _a;
-            (_a = this.options.visualElement) === null || _a === void 0 ? void 0 : _a.scheduleRender();
+            this.options.visualElement?.scheduleRender();
             if (notifyAll) {
                 const stack = this.getStack();
                 stack && stack.scheduleRender();
@@ -1170,14 +1165,12 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
             return stack ? stack.lead === this : true;
         }
         getLead() {
-            var _a;
             const { layoutId } = this.options;
-            return layoutId ? ((_a = this.getStack()) === null || _a === void 0 ? void 0 : _a.lead) || this : this;
+            return layoutId ? this.getStack()?.lead || this : this;
         }
         getPrevLead() {
-            var _a;
             const { layoutId } = this.options;
-            return layoutId ? (_a = this.getStack()) === null || _a === void 0 ? void 0 : _a.prevLead : undefined;
+            return layoutId ? this.getStack()?.prevLead : undefined;
         }
         getStack() {
             const { layoutId } = this.options;
@@ -1251,7 +1244,6 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
             visualElement.scheduleRender();
         }
         getProjectionStyles(styleProp) {
-            var _a, _b;
             if (!this.instance || this.isSVG)
                 return undefined;
             if (!this.isVisible) {
@@ -1265,7 +1257,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
                 this.needsReset = false;
                 styles.opacity = "";
                 styles.pointerEvents =
-                    resolveMotionValue(styleProp === null || styleProp === void 0 ? void 0 : styleProp.pointerEvents) || "";
+                    resolveMotionValue(styleProp?.pointerEvents) || "";
                 styles.transform = transformTemplate
                     ? transformTemplate(this.latestValues, "")
                     : "none";
@@ -1280,7 +1272,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
                             ? this.latestValues.opacity
                             : 1;
                     emptyStyles.pointerEvents =
-                        resolveMotionValue(styleProp === null || styleProp === void 0 ? void 0 : styleProp.pointerEvents) || "";
+                        resolveMotionValue(styleProp?.pointerEvents) || "";
                 }
                 if (this.hasProjected && !hasTransform(this.latestValues)) {
                     emptyStyles.transform = transformTemplate
@@ -1305,7 +1297,9 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
                  */
                 styles.opacity =
                     lead === this
-                        ? (_b = (_a = valuesToRender.opacity) !== null && _a !== void 0 ? _a : this.latestValues.opacity) !== null && _b !== void 0 ? _b : 1
+                        ? valuesToRender.opacity ??
+                            this.latestValues.opacity ??
+                            1
                         : this.preserveOpacity
                             ? this.latestValues.opacity
                             : valuesToRender.opacityExit;
@@ -1366,7 +1360,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
             if (this.options.layoutId) {
                 styles.pointerEvents =
                     lead === this
-                        ? resolveMotionValue(styleProp === null || styleProp === void 0 ? void 0 : styleProp.pointerEvents) || ""
+                        ? resolveMotionValue(styleProp?.pointerEvents) || ""
                         : "none";
             }
             return styles;
@@ -1376,7 +1370,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
         }
         // Only run on root
         resetTree() {
-            this.root.nodes.forEach((node) => { var _a; return (_a = node.currentAnimation) === null || _a === void 0 ? void 0 : _a.stop(); });
+            this.root.nodes.forEach((node) => node.currentAnimation?.stop());
             this.root.nodes.forEach(clearMeasurements);
             this.root.sharedNodes.clear();
         }
@@ -1386,8 +1380,7 @@ function updateLayout(node) {
     node.updateLayout();
 }
 function notifyLayoutUpdate(node) {
-    var _a;
-    const snapshot = ((_a = node.resumeFrom) === null || _a === void 0 ? void 0 : _a.snapshot) || node.snapshot;
+    const snapshot = node.resumeFrom?.snapshot || node.snapshot;
     if (node.isLead() &&
         node.layout &&
         snapshot &&
@@ -1593,8 +1586,7 @@ function shouldAnimatePositionOnly(animationType, snapshot, layout) {
             !isNear(aspectRatio(snapshot), aspectRatio(layout), 0.2)));
 }
 function checkNodeWasScrollRoot(node) {
-    var _a;
-    return node !== node.root && ((_a = node.scroll) === null || _a === void 0 ? void 0 : _a.wasRoot);
+    return node !== node.root && node.scroll?.wasRoot;
 }
 
 export { cleanDirtyNodes, createProjectionNode, mixAxis, mixAxisDelta, mixBox, propagateDirtyNodes };

package/dist/es/projection/styles/transform.mjs

@@ -8,7 +8,7 @@ function buildProjectionTransform(delta, treeScale, latestTransform) {
      */
     const xTranslate = delta.x.translate / treeScale.x;
     const yTranslate = delta.y.translate / treeScale.y;
-    const zTranslate = (latestTransform === null || latestTransform === void 0 ? void 0 : latestTransform.z) || 0;
+    const zTranslate = latestTransform?.z || 0;
     if (xTranslate || yTranslate || zTranslate) {
         transform = `translate3d(${xTranslate}px, ${yTranslate}px, ${zTranslate}px) `;
     }

package/dist/es/render/VisualElement.mjs

@@ -402,10 +402,10 @@ class VisualElement {
      * directly from the instance (which might have performance implications).
      */
     readValue(key, target) {
-        var _a;
         let value = this.latestValues[key] !== undefined || !this.current
             ? this.latestValues[key]
-            : (_a = this.getBaseTargetFromProps(this.props, key)) !== null && _a !== void 0 ? _a : this.readValueFromInstance(this.current, key, this.options);
+            : this.getBaseTargetFromProps(this.props, key) ??
+                this.readValueFromInstance(this.current, key, this.options);
         if (value !== undefined && value !== null) {
             if (typeof value === "string" &&
                 (isNumericalString(value) || isZeroValueString(value))) {
@@ -431,11 +431,10 @@ class VisualElement {
      * props.
      */
     getBaseTarget(key) {
-        var _a;
         const { initial } = this.props;
         let valueFromInitial;
         if (typeof initial === "string" || typeof initial === "object") {
-            const variant = resolveVariantFromProps(this.props, initial, (_a = this.presenceContext) === null || _a === void 0 ? void 0 : _a.custom);
+            const variant = resolveVariantFromProps(this.props, initial, this.presenceContext?.custom);
             if (variant) {
                 valueFromInitial = variant[key];
             }

package/dist/es/render/dom/DOMKeyframesResolver.mjs

@@ -104,7 +104,6 @@ class DOMKeyframesResolver extends KeyframeResolver {
         }
     }
     measureEndState() {
-        var _a;
         const { element, name, unresolvedKeyframes } = this;
         if (!element || !element.current)
             return;
@@ -117,7 +116,7 @@ class DOMKeyframesResolver extends KeyframeResolver {
             this.finalKeyframe = finalKeyframe;
         }
         // If we removed transform values, reapply them before the next render
-        if ((_a = this.removedTransforms) === null || _a === void 0 ? void 0 : _a.length) {
+        if (this.removedTransforms?.length) {
             this.removedTransforms.forEach(([unsetTransformName, unsetTransformValue]) => {
                 element
                     .getValue(unsetTransformName)

package/dist/es/render/dom/resize/handle-element.mjs

@@ -18,8 +18,7 @@ function getElementSize(target, borderBoxSize) {
     }
 }
 function notifyTarget({ target, contentRect, borderBoxSize, }) {
-    var _a;
-    (_a = resizeHandlers.get(target)) === null || _a === void 0 ? void 0 : _a.forEach((handler) => {
+    resizeHandlers.get(target)?.forEach((handler) => {
         handler({
             target,
             contentSize: contentRect,
@@ -48,14 +47,14 @@ function resizeElement(target, handler) {
             resizeHandlers.set(element, elementHandlers);
         }
         elementHandlers.add(handler);
-        observer === null || observer === void 0 ? void 0 : observer.observe(element);
+        observer?.observe(element);
     });
     return () => {
         elements.forEach((element) => {
             const elementHandlers = resizeHandlers.get(element);
-            elementHandlers === null || elementHandlers === void 0 ? void 0 : elementHandlers.delete(handler);
-            if (!(elementHandlers === null || elementHandlers === void 0 ? void 0 : elementHandlers.size)) {
-                observer === null || observer === void 0 ? void 0 : observer.unobserve(element);
+            elementHandlers?.delete(handler);
+            if (!elementHandlers?.size) {
+                observer?.unobserve(element);
             }
         });
     };

package/dist/es/render/dom/scroll/track.mjs

@@ -57,7 +57,6 @@ function scrollInfo(onScroll, { container = document.documentElement, ...options
     const listener = scrollListeners.get(container);
     frame.read(listener, false, true);
     return () => {
-        var _a;
         cancelFrame(listener);
         /**
          * Check if we even have any handlers for this container.
@@ -75,7 +74,7 @@ function scrollInfo(onScroll, { container = document.documentElement, ...options
         scrollListeners.delete(container);
         if (scrollListener) {
             getEventTarget(container).removeEventListener("scroll", scrollListener);
-            (_a = resizeListeners.get(container)) === null || _a === void 0 ? void 0 : _a();
+            resizeListeners.get(container)?.();
             window.removeEventListener("resize", scrollListener);
         }
     };

package/dist/es/render/dom/utils/css-variables-conversion.mjs

@@ -19,7 +19,7 @@ function parseCSSVariable(current) {
     if (!match)
         return [,];
     const [, token1, token2, fallback] = match;
-    return [`--${token1 !== null && token1 !== void 0 ? token1 : token2}`, fallback];
+    return [`--${token1 ?? token2}`, fallback];
 }
 const maxDepth = 4;
 function getVariableValue(current, element, depth = 1) {

package/dist/es/render/dom/utils/filter-props.mjs

@@ -28,7 +28,7 @@ try {
      */
     loadExternalIsValidProp(require("@emotion/is-prop-valid").default);
 }
-catch (_a) {
+catch {
     // We don't need to actually do anything here - the fallback is the existing `isPropValid`.
 }
 function filterProps(props, isDom, forwardMotionProps) {