motion 12.8.0 → 12.9.0

package/dist/cjs/react-m.js

@@ -30,9 +30,6 @@ if (process.env.NODE_ENV !== "production") {
 
 const MotionGlobalConfig = {};
 
-/*#__NO_SIDE_EFFECTS__*/
-const noop = (any) => any;
-
 const LayoutGroupContext = react.createContext({});
 
 const LazyContext = react.createContext({ strict: false });
@@ -352,8 +349,6 @@ function createRenderBatcher(scheduleNextBatch, allowKeepAlive) {
     return { schedule, cancel, state, steps };
 }
 
-const { schedule: frame, cancel: cancelFrame, state: frameData, steps: frameSteps, } = /* @__PURE__ */ createRenderBatcher(typeof requestAnimationFrame !== "undefined" ? requestAnimationFrame : noop, true);
-
 const checkStringStartsWith = (token) => (key) => typeof key === "string" && key.startsWith(token);
 const isCSSVariableName = 
 /*@__PURE__*/ checkStringStartsWith("--");
@@ -1111,25 +1106,10 @@ function buildSVGPath(attrs, length, spacing = 1, offset = 0, useDashCase = true
     attrs[keys.array] = `${pathLength} ${pathSpacing}`;
 }
 
-function calcOrigin(origin, offset, size) {
-    return typeof origin === "string"
-        ? origin
-        : px.transform(offset + size * origin);
-}
-/**
- * The SVG transform origin defaults are different to CSS and is less intuitive,
- * so we use the measured dimensions of the SVG to reconcile these.
- */
-function calcSVGTransformOrigin(dimensions, originX, originY) {
-    const pxOriginX = calcOrigin(originX, dimensions.x, dimensions.width);
-    const pxOriginY = calcOrigin(originY, dimensions.y, dimensions.height);
-    return `${pxOriginX} ${pxOriginY}`;
-}
-
 /**
  * Build SVG visual attrbutes, like cx and style.transform
  */
-function buildSVGAttrs(state, { attrX, attrY, attrScale, originX, originY, pathLength, pathSpacing = 1, pathOffset = 0, 
+function buildSVGAttrs(state, { attrX, attrY, attrScale, pathLength, pathSpacing = 1, pathOffset = 0, 
 // This is object creation, which we try to avoid per-frame.
 ...latest }, isSVGTag, transformTemplate) {
     buildHTMLStyles(state, latest, transformTemplate);
@@ -1145,20 +1125,26 @@ function buildSVGAttrs(state, { attrX, attrY, attrScale, originX, originY, pathL
     }
     state.attrs = state.style;
     state.style = {};
-    const { attrs, style, dimensions } = state;
+    const { attrs, style } = state;
     /**
-     * However, we apply transforms as CSS transforms. So if we detect a transform we take it from attrs
-     * and copy it into style.
+     * However, we apply transforms as CSS transforms.
+     * So if we detect a transform, transformOrigin we take it from attrs and copy it into style.
      */
     if (attrs.transform) {
-        if (dimensions)
-            style.transform = attrs.transform;
+        style.transform = attrs.transform;
         delete attrs.transform;
     }
-    // Parse transformOrigin
-    if (dimensions &&
-        (originX !== undefined || originY !== undefined || style.transform)) {
-        style.transformOrigin = calcSVGTransformOrigin(dimensions, originX !== undefined ? originX : 0.5, originY !== undefined ? originY : 0.5);
+    if (style.transform || attrs.transformOrigin) {
+        style.transformOrigin = attrs.transformOrigin ?? "50% 50%";
+        delete attrs.transformOrigin;
+    }
+    if (style.transform) {
+        /**
+         * SVG's element transform-origin uses its own median as a reference.
+         * Therefore, transformBox becomes a fill-box
+         */
+        style.transformBox = "fill-box";
+        delete attrs.transformBox;
     }
     // Render attrX/attrY/attrScale as attributes
     if (attrX !== undefined)
@@ -1281,20 +1267,11 @@ function resolveMotionValue(value) {
     return isMotionValue(value) ? value.get() : value;
 }
 
-function makeState({ scrapeMotionValuesFromProps, createRenderState, onUpdate, }, props, context, presenceContext) {
+function makeState({ scrapeMotionValuesFromProps, createRenderState, }, props, context, presenceContext) {
     const state = {
         latestValues: makeLatestValues(props, context, presenceContext, scrapeMotionValuesFromProps),
         renderState: createRenderState(),
     };
-    if (onUpdate) {
-        /**
-         * onMount works without the VisualElement because it could be
-         * called before the VisualElement payload has been hydrated.
-         * (e.g. if someone is using m components <m.circle />)
-         */
-        state.onMount = (instance) => onUpdate({ props, current: instance, ...state });
-        state.onUpdate = (visualElement) => onUpdate(visualElement);
-    }
     return state;
 }
 const makeUseVisualState = (config) => (props, isStatic) => {
@@ -1381,68 +1358,6 @@ const htmlMotionConfig = {
     }),
 };
 
-function updateSVGDimensions(instance, renderState) {
-    try {
-        renderState.dimensions =
-            typeof instance.getBBox === "function"
-                ? instance.getBBox()
-                : instance.getBoundingClientRect();
-    }
-    catch (e) {
-        // Most likely trying to measure an unrendered element under Firefox
-        renderState.dimensions = {
-            x: 0,
-            y: 0,
-            width: 0,
-            height: 0,
-        };
-    }
-}
-
-function renderHTML(element, { style, vars }, styleProp, projection) {
-    Object.assign(element.style, style, projection && projection.getProjectionStyles(styleProp));
-    // Loop over any CSS variables and assign those.
-    for (const key in vars) {
-        element.style.setProperty(key, vars[key]);
-    }
-}
-
-/**
- * A set of attribute names that are always read/written as camel case.
- */
-const camelCaseAttributes = new Set([
-    "baseFrequency",
-    "diffuseConstant",
-    "kernelMatrix",
-    "kernelUnitLength",
-    "keySplines",
-    "keyTimes",
-    "limitingConeAngle",
-    "markerHeight",
-    "markerWidth",
-    "numOctaves",
-    "targetX",
-    "targetY",
-    "surfaceScale",
-    "specularConstant",
-    "specularExponent",
-    "stdDeviation",
-    "tableValues",
-    "viewBox",
-    "gradientTransform",
-    "pathLength",
-    "startOffset",
-    "textLength",
-    "lengthAdjust",
-]);
-
-function renderSVG(element, renderState, _styleProp, projection) {
-    renderHTML(element, renderState, undefined, projection);
-    for (const key in renderState.attrs) {
-        element.setAttribute(!camelCaseAttributes.has(key) ? camelToDash(key) : key, renderState.attrs[key]);
-    }
-}
-
 function scrapeMotionValuesFromProps(props, prevProps, visualElement) {
     const newValues = scrapeMotionValuesFromProps$1(props, prevProps, visualElement);
     for (const key in props) {
@@ -1457,49 +1372,10 @@ function scrapeMotionValuesFromProps(props, prevProps, visualElement) {
     return newValues;
 }
 
-const layoutProps = ["x", "y", "width", "height", "cx", "cy", "r"];
 const svgMotionConfig = {
     useVisualState: makeUseVisualState({
         scrapeMotionValuesFromProps: scrapeMotionValuesFromProps,
         createRenderState: createSvgRenderState,
-        onUpdate: ({ props, prevProps, current, renderState, latestValues, }) => {
-            if (!current)
-                return;
-            let hasTransform = !!props.drag;
-            if (!hasTransform) {
-                for (const key in latestValues) {
-                    if (transformProps.has(key)) {
-                        hasTransform = true;
-                        break;
-                    }
-                }
-            }
-            if (!hasTransform)
-                return;
-            let needsMeasure = !prevProps;
-            if (prevProps) {
-                /**
-                 * Check the layout props for changes, if any are found we need to
-                 * measure the element again.
-                 */
-                for (let i = 0; i < layoutProps.length; i++) {
-                    const key = layoutProps[i];
-                    if (props[key] !==
-                        prevProps[key]) {
-                        needsMeasure = true;
-                    }
-                }
-            }
-            if (!needsMeasure)
-                return;
-            frame.read(() => {
-                updateSVGDimensions(current, renderState);
-                frame.render(() => {
-                    buildSVGAttrs(renderState, latestValues, isSVGTag(current.tagName), props.transformTemplate);
-                    renderSVG(current, renderState);
-                });
-            });
-        },
     }),
 };
 

package/dist/cjs/react-mini.js

@@ -231,7 +231,7 @@ class NativeAnimation extends WithPromise {
         this.isStopped = false;
         if (!options)
             return;
-        const { element, name, keyframes, pseudoElement, allowFlatten = false, finalKeyframe, } = options;
+        const { element, name, keyframes, pseudoElement, allowFlatten = false, finalKeyframe, onComplete, } = options;
         this.isPseudoElement = Boolean(pseudoElement);
         this.allowFlatten = allowFlatten;
         this.options = options;
@@ -257,8 +257,13 @@ class NativeAnimation extends WithPromise {
                 }
                 this.animation.cancel();
             }
+            onComplete?.();
             this.notifyFinished();
         };
+        /**
+         * TODO: In a breaking change, we should replace this with `.notifyCancel()`
+         */
+        this.animation.oncancel = () => this.notifyFinished();
     }
     play() {
         if (this.isStopped)

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

@@ -37,6 +37,17 @@ function animateTarget(visualElement, targetAndTransition, { delay = 0, transiti
             delay,
             ...getValueTransition(transition || {}, key),
         };
+        /**
+         * If the value is already at the defined target, skip the animation.
+         */
+        const currentValue = value.get();
+        if (currentValue !== undefined &&
+            !value.isAnimating &&
+            !Array.isArray(valueTarget) &&
+            valueTarget === currentValue &&
+            !valueTransition.velocity) {
+            continue;
+        }
         /**
          * If this is the first time a value is being animated, check
          * to see if we're handling off from an existing animation.

package/dist/es/framer-motion/dist/es/motion/utils/use-visual-state.mjs

@@ -7,20 +7,11 @@ import { resolveVariantFromProps } from '../../render/utils/resolve-variants.mjs
 import { useConstant } from '../../utils/use-constant.mjs';
 import { resolveMotionValue } from '../../value/utils/resolve-motion-value.mjs';
 
-function makeState({ scrapeMotionValuesFromProps, createRenderState, onUpdate, }, props, context, presenceContext) {
+function makeState({ scrapeMotionValuesFromProps, createRenderState, }, props, context, presenceContext) {
     const state = {
         latestValues: makeLatestValues(props, context, presenceContext, scrapeMotionValuesFromProps),
         renderState: createRenderState(),
     };
-    if (onUpdate) {
-        /**
-         * onMount works without the VisualElement because it could be
-         * called before the VisualElement payload has been hydrated.
-         * (e.g. if someone is using m components <m.circle />)
-         */
-        state.onMount = (instance) => onUpdate({ props, current: instance, ...state });
-        state.onUpdate = (visualElement) => onUpdate(visualElement);
-    }
     return state;
 }
 const makeUseVisualState = (config) => (props, isStatic) => {

package/dist/es/framer-motion/dist/es/render/VisualElement.mjs

@@ -114,8 +114,7 @@ class VisualElement {
                 frame.render(this.render, false, true);
             }
         };
-        const { latestValues, renderState, onUpdate } = visualState;
-        this.onUpdate = onUpdate;
+        const { latestValues, renderState } = visualState;
         this.latestValues = latestValues;
         this.baseTarget = { ...latestValues };
         this.initialValues = props.initial ? { ...latestValues } : {};
@@ -317,7 +316,6 @@ class VisualElement {
         if (this.handleChildMotionValue) {
             this.handleChildMotionValue();
         }
-        this.onUpdate && this.onUpdate(this);
     }
     getProps() {
         return this.props;

package/dist/es/framer-motion/dist/es/render/svg/SVGVisualElement.mjs

@@ -4,12 +4,10 @@ import { camelToDash } from '../dom/utils/camel-to-dash.mjs';
 import { buildSVGAttrs } from './utils/build-attrs.mjs';
 import { camelCaseAttributes } from './utils/camel-case-attrs.mjs';
 import { isSVGTag } from './utils/is-svg-tag.mjs';
-import { updateSVGDimensions } from './utils/measure.mjs';
 import { renderSVG } from './utils/render.mjs';
 import { scrapeMotionValuesFromProps } from './utils/scrape-motion-values.mjs';
 import { transformProps } from '../../../../../motion-dom/dist/es/render/utils/keys-transform.mjs';
 import { getDefaultValueType } from '../../../../../motion-dom/dist/es/value/types/maps/defaults.mjs';
-import { frame } from '../../../../../motion-dom/dist/es/frameloop/frame.mjs';
 
 class SVGVisualElement extends DOMVisualElement {
     constructor() {
@@ -17,11 +15,6 @@ class SVGVisualElement extends DOMVisualElement {
         this.type = "svg";
         this.isSVGTag = false;
         this.measureInstanceViewportBox = createBox;
-        this.updateDimensions = () => {
-            if (this.current && !this.renderState.dimensions) {
-                updateSVGDimensions(this.current, this.renderState);
-            }
-        };
     }
     getBaseTargetFromProps(props, key) {
         return props[key];
@@ -37,11 +30,6 @@ class SVGVisualElement extends DOMVisualElement {
     scrapeMotionValuesFromProps(props, prevProps, visualElement) {
         return scrapeMotionValuesFromProps(props, prevProps, visualElement);
     }
-    onBindTransform() {
-        if (this.current && !this.renderState.dimensions) {
-            frame.postRender(this.updateDimensions);
-        }
-    }
     build(renderState, latestValues, props) {
         buildSVGAttrs(renderState, latestValues, this.isSVGTag, props.transformTemplate);
     }

package/dist/es/framer-motion/dist/es/render/svg/config-motion.mjs

@@ -1,56 +1,11 @@
 import { makeUseVisualState } from '../../motion/utils/use-visual-state.mjs';
-import { buildSVGAttrs } from './utils/build-attrs.mjs';
 import { createSvgRenderState } from './utils/create-render-state.mjs';
-import { isSVGTag } from './utils/is-svg-tag.mjs';
-import { updateSVGDimensions } from './utils/measure.mjs';
-import { renderSVG } from './utils/render.mjs';
 import { scrapeMotionValuesFromProps } from './utils/scrape-motion-values.mjs';
-import { transformProps } from '../../../../../motion-dom/dist/es/render/utils/keys-transform.mjs';
-import { frame } from '../../../../../motion-dom/dist/es/frameloop/frame.mjs';
 
-const layoutProps = ["x", "y", "width", "height", "cx", "cy", "r"];
 const svgMotionConfig = {
     useVisualState: makeUseVisualState({
         scrapeMotionValuesFromProps: scrapeMotionValuesFromProps,
         createRenderState: createSvgRenderState,
-        onUpdate: ({ props, prevProps, current, renderState, latestValues, }) => {
-            if (!current)
-                return;
-            let hasTransform = !!props.drag;
-            if (!hasTransform) {
-                for (const key in latestValues) {
-                    if (transformProps.has(key)) {
-                        hasTransform = true;
-                        break;
-                    }
-                }
-            }
-            if (!hasTransform)
-                return;
-            let needsMeasure = !prevProps;
-            if (prevProps) {
-                /**
-                 * Check the layout props for changes, if any are found we need to
-                 * measure the element again.
-                 */
-                for (let i = 0; i < layoutProps.length; i++) {
-                    const key = layoutProps[i];
-                    if (props[key] !==
-                        prevProps[key]) {
-                        needsMeasure = true;
-                    }
-                }
-            }
-            if (!needsMeasure)
-                return;
-            frame.read(() => {
-                updateSVGDimensions(current, renderState);
-                frame.render(() => {
-                    buildSVGAttrs(renderState, latestValues, isSVGTag(current.tagName), props.transformTemplate);
-                    renderSVG(current, renderState);
-                });
-            });
-        },
     }),
 };
 

package/dist/es/framer-motion/dist/es/render/svg/utils/build-attrs.mjs

@@ -1,11 +1,10 @@
 import { buildHTMLStyles } from '../../html/utils/build-styles.mjs';
 import { buildSVGPath } from './path.mjs';
-import { calcSVGTransformOrigin } from './transform-origin.mjs';
 
 /**
  * Build SVG visual attrbutes, like cx and style.transform
  */
-function buildSVGAttrs(state, { attrX, attrY, attrScale, originX, originY, pathLength, pathSpacing = 1, pathOffset = 0, 
+function buildSVGAttrs(state, { attrX, attrY, attrScale, pathLength, pathSpacing = 1, pathOffset = 0, 
 // This is object creation, which we try to avoid per-frame.
 ...latest }, isSVGTag, transformTemplate) {
     buildHTMLStyles(state, latest, transformTemplate);
@@ -21,20 +20,26 @@ function buildSVGAttrs(state, { attrX, attrY, attrScale, originX, originY, pathL
     }
     state.attrs = state.style;
     state.style = {};
-    const { attrs, style, dimensions } = state;
+    const { attrs, style } = state;
     /**
-     * However, we apply transforms as CSS transforms. So if we detect a transform we take it from attrs
-     * and copy it into style.
+     * However, we apply transforms as CSS transforms.
+     * So if we detect a transform, transformOrigin we take it from attrs and copy it into style.
      */
     if (attrs.transform) {
-        if (dimensions)
-            style.transform = attrs.transform;
+        style.transform = attrs.transform;
         delete attrs.transform;
     }
-    // Parse transformOrigin
-    if (dimensions &&
-        (originX !== undefined || originY !== undefined || style.transform)) {
-        style.transformOrigin = calcSVGTransformOrigin(dimensions, originX !== undefined ? originX : 0.5, originY !== undefined ? originY : 0.5);
+    if (style.transform || attrs.transformOrigin) {
+        style.transformOrigin = attrs.transformOrigin ?? "50% 50%";
+        delete attrs.transformOrigin;
+    }
+    if (style.transform) {
+        /**
+         * SVG's element transform-origin uses its own median as a reference.
+         * Therefore, transformBox becomes a fill-box
+         */
+        style.transformBox = "fill-box";
+        delete attrs.transformBox;
     }
     // Render attrX/attrY/attrScale as attributes
     if (attrX !== undefined)

package/dist/es/framer-motion/dist/es/render/utils/motion-values.mjs

@@ -17,7 +17,7 @@ function updateMotionValuesFromProps(element, next, prev) {
              * and warn against mismatches.
              */
             if (process.env.NODE_ENV === "development") {
-                warnOnce(nextValue.version === "12.8.0", `Attempting to mix Motion versions ${nextValue.version} with 12.8.0 may not work as expected.`);
+                warnOnce(nextValue.version === "12.9.0", `Attempting to mix Motion versions ${nextValue.version} with 12.9.0 may not work as expected.`);
             }
         }
         else if (isMotionValue(prevValue)) {

package/dist/es/motion/lib/index.mjs

@@ -39,6 +39,7 @@ export { supportsPartialKeyframes } from '../../motion-dom/dist/es/animation/waa
 export { supportsBrowserAnimation } from '../../motion-dom/dist/es/animation/waapi/supports/waapi.mjs';
 export { acceleratedValues } from '../../motion-dom/dist/es/animation/waapi/utils/accelerated-values.mjs';
 export { generateLinearEasing } from '../../motion-dom/dist/es/animation/waapi/utils/linear.mjs';
+export { styleEffect } from '../../motion-dom/dist/es/effects/style-effect.mjs';
 export { createRenderBatcher } from '../../motion-dom/dist/es/frameloop/batcher.mjs';
 export { cancelMicrotask, microtask } from '../../motion-dom/dist/es/frameloop/microtask.mjs';
 export { time } from '../../motion-dom/dist/es/frameloop/sync-time.mjs';

package/dist/es/motion/lib/react.mjs

@@ -138,6 +138,7 @@ export { supportsPartialKeyframes } from '../../motion-dom/dist/es/animation/waa
 export { supportsBrowserAnimation } from '../../motion-dom/dist/es/animation/waapi/supports/waapi.mjs';
 export { acceleratedValues } from '../../motion-dom/dist/es/animation/waapi/utils/accelerated-values.mjs';
 export { generateLinearEasing } from '../../motion-dom/dist/es/animation/waapi/utils/linear.mjs';
+export { styleEffect } from '../../motion-dom/dist/es/effects/style-effect.mjs';
 export { createRenderBatcher } from '../../motion-dom/dist/es/frameloop/batcher.mjs';
 export { cancelMicrotask, microtask } from '../../motion-dom/dist/es/frameloop/microtask.mjs';
 export { time } from '../../motion-dom/dist/es/frameloop/sync-time.mjs';

package/dist/es/motion-dom/dist/es/animation/AsyncMotionValueAnimation.mjs

@@ -52,7 +52,7 @@ class AsyncMotionValueAnimation extends WithPromise {
     }
     onKeyframesResolved(keyframes, finalKeyframe, options, sync) {
         this.keyframeResolver = undefined;
-        const { name, type, velocity, delay, isHandoff, onUpdate, onComplete } = options;
+        const { name, type, velocity, delay, isHandoff, onUpdate } = options;
         this.resolvedAt = time.now();
         /**
          * If we can't animate this value with the resolved keyframes
@@ -102,12 +102,7 @@ class AsyncMotionValueAnimation extends WithPromise {
                 element: resolvedOptions.motionValue.owner.current,
             })
             : new JSAnimation(resolvedOptions);
-        animation.finished
-            .then(() => {
-            onComplete?.();
-            this.notifyFinished();
-        })
-            .catch(noop);
+        animation.finished.then(() => this.notifyFinished()).catch(noop);
         if (this.pendingTimeline) {
             this.stopTimeline = animation.attachTimeline(this.pendingTimeline);
             this.pendingTimeline = undefined;

package/dist/es/motion-dom/dist/es/animation/JSAnimation.mjs

@@ -302,7 +302,6 @@ class JSAnimation extends WithPromise {
         this.holdTime = null;
     }
     finish() {
-        this.notifyFinished();
         this.teardown();
         this.state = "finished";
         const { onComplete } = this.options;
@@ -315,6 +314,7 @@ class JSAnimation extends WithPromise {
         this.teardown();
     }
     teardown() {
+        this.notifyFinished();
         this.state = "idle";
         this.stopDriver();
         this.startTime = this.holdTime = null;

package/dist/es/motion-dom/dist/es/animation/NativeAnimation.mjs

@@ -18,7 +18,7 @@ class NativeAnimation extends WithPromise {
         this.isStopped = false;
         if (!options)
             return;
-        const { element, name, keyframes, pseudoElement, allowFlatten = false, finalKeyframe, } = options;
+        const { element, name, keyframes, pseudoElement, allowFlatten = false, finalKeyframe, onComplete, } = options;
         this.isPseudoElement = Boolean(pseudoElement);
         this.allowFlatten = allowFlatten;
         this.options = options;
@@ -44,8 +44,13 @@ class NativeAnimation extends WithPromise {
                 }
                 this.animation.cancel();
             }
+            onComplete?.();
             this.notifyFinished();
         };
+        /**
+         * TODO: In a breaking change, we should replace this with `.notifyCancel()`
+         */
+        this.animation.oncancel = () => this.notifyFinished();
     }
     play() {
         if (this.isStopped)

package/dist/es/motion-dom/dist/es/effects/style-effect.mjs

@@ -0,0 +1,36 @@
+import { resolveElements } from '../utils/resolve-elements.mjs';
+import { frame, cancelFrame } from '../frameloop/frame.mjs';
+
+function styleEffect(subject, values) {
+    const elements = resolveElements(subject);
+    const subscriptions = [];
+    for (let i = 0; i < elements.length; i++) {
+        const element = elements[i];
+        for (const key in values) {
+            const value = values[key];
+            /**
+             * TODO: Get specific setters for combined props (like x)
+             * or values with default types (like color)
+             *
+             * TODO: CSS variable support
+             */
+            const updateStyle = () => {
+                element.style[key] = value.get();
+            };
+            const scheduleUpdate = () => frame.render(updateStyle);
+            const cancel = value.on("change", scheduleUpdate);
+            scheduleUpdate();
+            subscriptions.push(() => {
+                cancel();
+                cancelFrame(updateStyle);
+            });
+        }
+    }
+    return () => {
+        for (const cancel of subscriptions) {
+            cancel();
+        }
+    };
+}
+
+export { styleEffect };

package/dist/es/motion-dom/dist/es/value/index.mjs

@@ -32,7 +32,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 = "12.8.0";
+        this.version = "12.9.0";
         /**
          * Tracks whether this value can output a velocity. Currently this is only true
          * if the value is numerical, but we might be able to widen the scope here and support
@@ -58,12 +58,12 @@ class MotionValue {
             this.prev = this.current;
             this.setCurrent(v);
             // Update update subscribers
-            if (this.current !== this.prev && this.events.change) {
-                this.events.change.notify(this.current);
+            if (this.current !== this.prev) {
+                this.events.change?.notify(this.current);
             }
             // Update render subscribers
-            if (render && this.events.renderRequest) {
-                this.events.renderRequest.notify(this.current);
+            if (render) {
+                this.events.renderRequest?.notify(this.current);
             }
         };
         this.hasAnimated = false;
@@ -176,8 +176,6 @@ class MotionValue {
      * @public
      */
     set(v, render = true) {
-        if (v === "none")
-            console.trace();
         if (!render || !this.passiveEffect) {
             this.updateAndNotify(v, render);
         }