motion-v 0.11.0-beta.6 → 0.11.1

package/dist/cjs/index.js

@@ -3,7 +3,7 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 const vue = require("vue");
 const core = require("@vueuse/core");
 const heyListen = require("hey-listen");
-const noop = (any) => any;
+const noop = /* @__NO_SIDE_EFFECTS__ */ (any) => any;
 let warning = noop;
 exports.invariant = noop;
 if (process.env.NODE_ENV !== "production") {
@@ -18,6 +18,7 @@ if (process.env.NODE_ENV !== "production") {
     }
   };
 }
+// @__NO_SIDE_EFFECTS__
 function memo(callback) {
   let result;
   return () => {
@@ -26,13 +27,13 @@ function memo(callback) {
     return result;
   };
 }
-const progress$1 = (from, to, value) => {
+const progress$1 = /* @__NO_SIDE_EFFECTS__ */ (from, to, value) => {
   const toFromDifference = to - from;
   return toFromDifference === 0 ? 1 : (value - from) / toFromDifference;
 };
-const secondsToMilliseconds$1 = (seconds) => seconds * 1e3;
-const millisecondsToSeconds$1 = (milliseconds) => milliseconds / 1e3;
-const supportsScrollTimeline = memo(() => window.ScrollTimeline !== void 0);
+const secondsToMilliseconds$1 = /* @__NO_SIDE_EFFECTS__ */ (seconds) => seconds * 1e3;
+const millisecondsToSeconds$1 = /* @__NO_SIDE_EFFECTS__ */ (milliseconds) => milliseconds / 1e3;
+const supportsScrollTimeline = /* @__PURE__ */ memo(() => window.ScrollTimeline !== void 0);
 class BaseGroupPlaybackControls {
   constructor(animations) {
     this.stop = () => this.runAll("stop");
@@ -135,7 +136,7 @@ function createGeneratorEasing(options, scale2 = 100, createGenerator) {
     ease: (progress2) => {
       return generator.next(duration * progress2).value / scale2;
     },
-    duration: millisecondsToSeconds$1(duration)
+    duration: /* @__PURE__ */ millisecondsToSeconds$1(duration)
   };
 }
 function isGenerator(type) {
@@ -152,18 +153,18 @@ class NativeAnimationControls {
   get duration() {
     var _a, _b, _c;
     const durationInMs = ((_b = (_a = this.animation) === null || _a === void 0 ? void 0 : _a.effect) === null || _b === void 0 ? void 0 : _b.getComputedTiming().duration) || ((_c = this.options) === null || _c === void 0 ? void 0 : _c.duration) || 300;
-    return millisecondsToSeconds$1(Number(durationInMs));
+    return /* @__PURE__ */ millisecondsToSeconds$1(Number(durationInMs));
   }
   get time() {
     var _a;
     if (this.animation) {
-      return millisecondsToSeconds$1(((_a = this.animation) === null || _a === void 0 ? void 0 : _a.currentTime) || 0);
+      return /* @__PURE__ */ millisecondsToSeconds$1(((_a = this.animation) === null || _a === void 0 ? void 0 : _a.currentTime) || 0);
     }
     return 0;
   }
   set time(newTime) {
     if (this.animation) {
-      this.animation.currentTime = secondsToMilliseconds$1(newTime);
+      this.animation.currentTime = /* @__PURE__ */ secondsToMilliseconds$1(newTime);
     }
   }
   get speed() {
@@ -224,7 +225,7 @@ const supportsFlags = {
   linearEasing: void 0
 };
 function memoSupports(callback, supportsFlag) {
-  const memoized = memo(callback);
+  const memoized = /* @__PURE__ */ memo(callback);
   return () => {
     var _a;
     return (_a = supportsFlags[supportsFlag]) !== null && _a !== void 0 ? _a : memoized();
@@ -242,7 +243,7 @@ const generateLinearEasing = (easing, duration, resolution = 10) => {
   let points = "";
   const numPoints = Math.max(Math.round(duration / resolution), 2);
   for (let i = 0; i < numPoints; i++) {
-    points += easing(progress$1(0, numPoints - 1, i)) + ", ";
+    points += easing(/* @__PURE__ */ progress$1(0, numPoints - 1, i)) + ", ";
   }
   return `linear(${points.substring(0, points.length - 2)})`;
 };
@@ -283,7 +284,7 @@ function isDragActive() {
 }
 function resolveElements(elementOrSelector, scope, selectorCache) {
   var _a;
-  if (elementOrSelector instanceof Element) {
+  if (elementOrSelector instanceof EventTarget) {
     return [elementOrSelector];
   } else if (typeof elementOrSelector === "string") {
     let root = document;
@@ -306,31 +307,40 @@ function setupGesture(elementOrSelector, options) {
   const cancel = () => gestureAbortController.abort();
   return [elements, eventOptions, cancel];
 }
-function filterEvents$1(callback) {
-  return (event) => {
-    if (event.pointerType === "touch" || isDragActive())
-      return;
-    callback(event);
-  };
+function isValidHover(event) {
+  return !(event.pointerType === "touch" || isDragActive());
 }
 function hover(elementOrSelector, onHoverStart, options = {}) {
   const [elements, eventOptions, cancel] = setupGesture(elementOrSelector, options);
-  const onPointerEnter = filterEvents$1((enterEvent) => {
+  const onPointerEnter = (enterEvent) => {
+    if (!isValidHover(enterEvent))
+      return;
     const { target } = enterEvent;
-    const onHoverEnd = onHoverStart(enterEvent);
+    const onHoverEnd = onHoverStart(target, enterEvent);
     if (typeof onHoverEnd !== "function" || !target)
       return;
-    const onPointerLeave = filterEvents$1((leaveEvent) => {
+    const onPointerLeave = (leaveEvent) => {
+      if (!isValidHover(leaveEvent))
+        return;
       onHoverEnd(leaveEvent);
       target.removeEventListener("pointerleave", onPointerLeave);
-    });
+    };
     target.addEventListener("pointerleave", onPointerLeave, eventOptions);
-  });
+  };
   elements.forEach((element) => {
     element.addEventListener("pointerenter", onPointerEnter, eventOptions);
   });
   return cancel;
 }
+function capturePointer(event, action) {
+  const actionName = `${action}PointerCapture`;
+  if (event.target instanceof Element && actionName in event.target && event.pointerId !== void 0) {
+    try {
+      event.target[actionName](event.pointerId);
+    } catch (e) {
+    }
+  }
+}
 const isNodeOrChild = (parent, child) => {
   if (!child) {
     return false;
@@ -389,44 +399,66 @@ const enableKeyboardPress = (focusEvent, eventOptions) => {
 function isValidPressEvent(event) {
   return isPrimaryPointer$1(event) && !isDragActive();
 }
-function press(elementOrSelector, onPressStart, options = {}) {
-  const [elements, eventOptions, cancelEvents] = setupGesture(elementOrSelector, options);
+function press(targetOrSelector, onPressStart, options = {}) {
+  const [targets, eventOptions, cancelEvents] = setupGesture(targetOrSelector, options);
   const startPress = (startEvent) => {
-    const element = startEvent.currentTarget;
-    if (!isValidPressEvent(startEvent) || isPressing.has(element))
+    const target = startEvent.currentTarget;
+    if (!target || !isValidPressEvent(startEvent) || isPressing.has(target))
       return;
-    isPressing.add(element);
-    const onPressEnd = onPressStart(startEvent);
+    isPressing.add(target);
+    capturePointer(startEvent, "set");
+    const onPressEnd = onPressStart(target, startEvent);
     const onPointerEnd = (endEvent, success) => {
-      window.removeEventListener("pointerup", onPointerUp);
-      window.removeEventListener("pointercancel", onPointerCancel);
-      if (!isValidPressEvent(endEvent) || !isPressing.has(element)) {
+      target.removeEventListener("pointerup", onPointerUp);
+      target.removeEventListener("pointercancel", onPointerCancel);
+      capturePointer(endEvent, "release");
+      if (!isValidPressEvent(endEvent) || !isPressing.has(target)) {
         return;
       }
-      isPressing.delete(element);
+      isPressing.delete(target);
       if (typeof onPressEnd === "function") {
         onPressEnd(endEvent, { success });
       }
     };
     const onPointerUp = (upEvent) => {
-      onPointerEnd(upEvent, options.useGlobalTarget || isNodeOrChild(element, upEvent.target));
+      const isOutside = !upEvent.isTrusted ? false : checkOutside(upEvent, target instanceof Element ? target.getBoundingClientRect() : {
+        left: 0,
+        top: 0,
+        right: window.innerWidth,
+        bottom: window.innerHeight
+      });
+      if (isOutside) {
+        onPointerEnd(upEvent, false);
+      } else {
+        onPointerEnd(upEvent, !(target instanceof Element) || isNodeOrChild(target, upEvent.target));
+      }
     };
     const onPointerCancel = (cancelEvent) => {
       onPointerEnd(cancelEvent, false);
     };
-    window.addEventListener("pointerup", onPointerUp, eventOptions);
-    window.addEventListener("pointercancel", onPointerCancel, eventOptions);
+    target.addEventListener("pointerup", onPointerUp, eventOptions);
+    target.addEventListener("pointercancel", onPointerCancel, eventOptions);
+    target.addEventListener("lostpointercapture", onPointerCancel, eventOptions);
   };
-  elements.forEach((element) => {
-    if (!isElementKeyboardAccessible(element) && element.getAttribute("tabindex") === null) {
-      element.tabIndex = 0;
+  targets.forEach((target) => {
+    target = options.useGlobalTarget ? window : target;
+    let canAddKeyboardAccessibility = false;
+    if (target instanceof HTMLElement) {
+      canAddKeyboardAccessibility = true;
+      if (!isElementKeyboardAccessible(target) && target.getAttribute("tabindex") === null) {
+        target.tabIndex = 0;
+      }
     }
-    const target = options.useGlobalTarget ? window : element;
     target.addEventListener("pointerdown", startPress, eventOptions);
-    element.addEventListener("focus", (event) => enableKeyboardPress(event, eventOptions), eventOptions);
+    if (canAddKeyboardAccessibility) {
+      target.addEventListener("focus", (event) => enableKeyboardPress(event, eventOptions), eventOptions);
+    }
   });
   return cancelEvents;
 }
+function checkOutside(event, rect) {
+  return event.clientX < rect.left || event.clientX > rect.right || event.clientY < rect.top || event.clientY > rect.bottom;
+}
 const clamp$1 = (min, max, v) => {
   if (v > max)
     return max;
@@ -475,10 +507,10 @@ const safeMin = 1e-3;
 function findSpring({ duration = springDefaults.duration, bounce = springDefaults.bounce, velocity = springDefaults.velocity, mass = springDefaults.mass }) {
   let envelope;
   let derivative;
-  warning(duration <= secondsToMilliseconds$1(springDefaults.maxDuration), "Spring duration must be 10 seconds or less");
+  warning(duration <= /* @__PURE__ */ secondsToMilliseconds$1(springDefaults.maxDuration), "Spring duration must be 10 seconds or less");
   let dampingRatio = 1 - bounce;
   dampingRatio = clamp$1(springDefaults.minDamping, springDefaults.maxDamping, dampingRatio);
-  duration = clamp$1(springDefaults.minDuration, springDefaults.maxDuration, millisecondsToSeconds$1(duration));
+  duration = clamp$1(springDefaults.minDuration, springDefaults.maxDuration, /* @__PURE__ */ millisecondsToSeconds$1(duration));
   if (dampingRatio < 1) {
     envelope = (undampedFreq2) => {
       const exponentialDecay = undampedFreq2 * dampingRatio;
@@ -512,7 +544,7 @@ function findSpring({ duration = springDefaults.duration, bounce = springDefault
   }
   const initialGuess = 5 / duration;
   const undampedFreq = approximateRoot(envelope, derivative, initialGuess);
-  duration = secondsToMilliseconds$1(duration);
+  duration = /* @__PURE__ */ secondsToMilliseconds$1(duration);
   if (isNaN(undampedFreq)) {
     return {
       stiffness: springDefaults.stiffness,
@@ -589,12 +621,12 @@ function spring(optionsOrVisualDuration = springDefaults.visualDuration, bounce
   const state2 = { done: false, value: origin };
   const { stiffness, damping, mass, duration, velocity, isResolvedFromDuration } = getSpringOptions({
     ...options,
-    velocity: -millisecondsToSeconds$1(options.velocity || 0)
+    velocity: -/* @__PURE__ */ millisecondsToSeconds$1(options.velocity || 0)
   });
   const initialVelocity = velocity || 0;
   const dampingRatio = damping / (2 * Math.sqrt(stiffness * mass));
   const initialDelta = target - origin;
-  const undampedAngularFreq = millisecondsToSeconds$1(Math.sqrt(stiffness / mass));
+  const undampedAngularFreq = /* @__PURE__ */ millisecondsToSeconds$1(Math.sqrt(stiffness / mass));
   const isGranularScale = Math.abs(initialDelta) < 5;
   restSpeed || (restSpeed = isGranularScale ? springDefaults.restSpeed.granular : springDefaults.restSpeed.default);
   restDelta || (restDelta = isGranularScale ? springDefaults.restDelta.granular : springDefaults.restDelta.default);
@@ -622,7 +654,7 @@ function spring(optionsOrVisualDuration = springDefaults.visualDuration, bounce
       if (!isResolvedFromDuration) {
         let currentVelocity = 0;
         if (dampingRatio < 1) {
-          currentVelocity = t === 0 ? secondsToMilliseconds$1(initialVelocity) : calcGeneratorVelocity(resolveSpring, t, current);
+          currentVelocity = t === 0 ? /* @__PURE__ */ secondsToMilliseconds$1(initialVelocity) : calcGeneratorVelocity(resolveSpring, t, current);
         }
         const isBelowVelocityThreshold = Math.abs(currentVelocity) <= restSpeed;
         const isBelowDisplacementThreshold = Math.abs(target - current) <= restDelta;
@@ -657,7 +689,7 @@ const mixNumber$2 = (from, to, progress2) => {
 function fillOffset(offset, remaining) {
   const min = offset[offset.length - 1];
   for (let i = 1; i <= remaining; i++) {
-    const offsetProgress = progress$1(0, remaining, i);
+    const offsetProgress = /* @__PURE__ */ progress$1(0, remaining, i);
     offset.push(mixNumber$2(min, 1, offsetProgress));
   }
 }
@@ -780,7 +812,7 @@ function createAnimationsFromSequence(sequence, { defaultTransition = {}, ...seq
         }
         const springTransition = { ...remainingTransition };
         if (duration !== void 0) {
-          springTransition.duration = secondsToMilliseconds$1(duration);
+          springTransition.duration = /* @__PURE__ */ secondsToMilliseconds$1(duration);
         }
         const springEasing = createGeneratorEasing(springTransition, absoluteDelta, createGenerator);
         ease2 = springEasing.ease;
@@ -844,7 +876,7 @@ function createAnimationsFromSequence(sequence, { defaultTransition = {}, ...seq
       for (let i = 0; i < valueSequence.length; i++) {
         const { at, value, easing } = valueSequence[i];
         keyframes2.push(value);
-        valueOffset.push(progress$1(0, totalDuration, at));
+        valueOffset.push(/* @__PURE__ */ progress$1(0, totalDuration, at));
         valueEasing.push(easing || "easeOut");
       }
       if (valueOffset[0] !== 0) {
@@ -938,7 +970,25 @@ const MotionGlobalConfig = {
   skipAnimations: false,
   useManualTiming: false
 };
-function createRenderStep(runNextFrame) {
+const stepsOrder = [
+  "read",
+  // Read
+  "resolveKeyframes",
+  // Write/Read/Write/Read
+  "update",
+  // Compute
+  "preRender",
+  // Compute
+  "render",
+  // Write
+  "postRender"
+  // Compute
+];
+const statsBuffer = {
+  value: null,
+  addProjectionMetrics: null
+};
+function createRenderStep(runNextFrame, stepName) {
   let thisFrame = /* @__PURE__ */ new Set();
   let nextFrame = /* @__PURE__ */ new Set();
   let isProcessing = false;
@@ -949,11 +999,13 @@ function createRenderStep(runNextFrame) {
     timestamp: 0,
     isProcessing: false
   };
+  let numCalls = 0;
   function triggerCallback(callback) {
     if (toKeepAlive.has(callback)) {
       step.schedule(callback);
       runNextFrame();
     }
+    numCalls++;
     callback(latestFrameData);
   }
   const step = {
@@ -988,6 +1040,10 @@ function createRenderStep(runNextFrame) {
       isProcessing = true;
       [thisFrame, nextFrame] = [nextFrame, thisFrame];
       thisFrame.forEach(triggerCallback);
+      if (stepName && statsBuffer.value) {
+        statsBuffer.value.frameloop[stepName].push(numCalls);
+      }
+      numCalls = 0;
       thisFrame.clear();
       isProcessing = false;
       if (flushNextFrame) {
@@ -998,20 +1054,6 @@ function createRenderStep(runNextFrame) {
   };
   return step;
 }
-const stepsOrder = [
-  "read",
-  // Read
-  "resolveKeyframes",
-  // Write/Read/Write/Read
-  "update",
-  // Compute
-  "preRender",
-  // Compute
-  "render",
-  // Write
-  "postRender"
-  // Compute
-];
 const maxElapsed$1 = 40;
 function createRenderBatcher(scheduleNextBatch, allowKeepAlive) {
   let runNextFrame = false;
@@ -1023,14 +1065,16 @@ function createRenderBatcher(scheduleNextBatch, allowKeepAlive) {
   };
   const flagRunNextFrame = () => runNextFrame = true;
   const steps2 = stepsOrder.reduce((acc, key) => {
-    acc[key] = createRenderStep(flagRunNextFrame);
+    acc[key] = createRenderStep(flagRunNextFrame, allowKeepAlive ? key : void 0);
     return acc;
   }, {});
   const { read, resolveKeyframes, update, preRender, render, postRender } = steps2;
   const processBatch = () => {
     const timestamp = performance.now();
     runNextFrame = false;
-    state2.delta = useDefaultElapsed ? 1e3 / 60 : Math.max(Math.min(timestamp - state2.timestamp, maxElapsed$1), 1);
+    {
+      state2.delta = useDefaultElapsed ? 1e3 / 60 : Math.max(Math.min(timestamp - state2.timestamp, maxElapsed$1), 1);
+    }
     state2.timestamp = timestamp;
     state2.isProcessing = true;
     read.process(state2);
@@ -1137,7 +1181,7 @@ class MotionValue {
    * @internal
    */
   constructor(init, options = {}) {
-    this.version = "11.16.6";
+    this.version = "12.4.10";
     this.canTrackVelocity = null;
     this.events = {};
     this.updateAndNotify = (v, render = true) => {
@@ -2222,8 +2266,8 @@ class BaseAnimation {
     const { name, type, velocity, delay: delay2, onComplete, onUpdate, isGenerator: isGenerator2 } = this.options;
     if (!isGenerator2 && !canAnimate(keyframes2, name, type, velocity)) {
       if (!delay2) {
-        onUpdate === null || onUpdate === void 0 ? void 0 : onUpdate(getFinalKeyframe(keyframes2, this.options, finalKeyframe));
-        onComplete === null || onComplete === void 0 ? void 0 : onComplete();
+        onUpdate && onUpdate(getFinalKeyframe(keyframes2, this.options, finalKeyframe));
+        onComplete && onComplete();
         this.resolveFinishedPromise();
         return;
       } else {
@@ -2545,7 +2589,7 @@ function interpolate(input, output, { clamp: isClamp = true, ease: ease2, mixer
           break;
       }
     }
-    const progressInRange = progress$1(input[i], input[i + 1], v);
+    const progressInRange = /* @__PURE__ */ progress$1(input[i], input[i + 1], v);
     return mixers[i](progressInRange);
   };
   return isClamp ? (v) => interpolator(clamp$1(input[0], input[inputLength - 1], v)) : interpolator;
@@ -2636,10 +2680,10 @@ class MainThreadAnimation extends BaseAnimation {
     const generatorFactory = isGenerator(type) ? type : generators[type] || keyframes;
     let mapPercentToKeyframes;
     let mirroredGenerator;
+    if (process.env.NODE_ENV !== "production" && generatorFactory !== keyframes) {
+      exports.invariant(keyframes$1.length <= 2, `Only two keyframes currently supported with spring and inertia animations. Trying to animate ${keyframes$1}`);
+    }
     if (generatorFactory !== keyframes && typeof keyframes$1[0] !== "number") {
-      if (process.env.NODE_ENV !== "production") {
-        exports.invariant(keyframes$1.length === 2, `Only two keyframes currently supported with spring and inertia animations. Trying to animate ${keyframes$1}`);
-      }
       mapPercentToKeyframes = pipe(percentToProgress, mix(keyframes$1[0], keyframes$1[1]));
       keyframes$1 = [0, 100];
     }
@@ -2749,13 +2793,13 @@ class MainThreadAnimation extends BaseAnimation {
   }
   get duration() {
     const { resolved } = this;
-    return resolved ? millisecondsToSeconds$1(resolved.calculatedDuration) : 0;
+    return resolved ? /* @__PURE__ */ millisecondsToSeconds$1(resolved.calculatedDuration) : 0;
   }
   get time() {
-    return millisecondsToSeconds$1(this.currentTime);
+    return /* @__PURE__ */ millisecondsToSeconds$1(this.currentTime);
   }
   set time(newTime) {
-    newTime = secondsToMilliseconds$1(newTime);
+    newTime = /* @__PURE__ */ secondsToMilliseconds$1(newTime);
     this.currentTime = newTime;
     if (this.holdTime !== null || this.speed === 0) {
       this.holdTime = newTime;
@@ -2770,7 +2814,7 @@ class MainThreadAnimation extends BaseAnimation {
     const hasChanged2 = this.playbackSpeed !== newSpeed;
     this.playbackSpeed = newSpeed;
     if (hasChanged2) {
-      this.time = millisecondsToSeconds$1(this.currentTime);
+      this.time = /* @__PURE__ */ millisecondsToSeconds$1(this.currentTime);
     }
   }
   play() {
@@ -2871,7 +2915,7 @@ function startWaapiAnimation(element, valueName, keyframes2, { delay: delay2 = 0
   const easing = mapEasingToNativeEasing(ease2, duration);
   if (Array.isArray(easing))
     keyframeOptions.easing = easing;
-  return element.animate(keyframeOptions, {
+  const animation = element.animate(keyframeOptions, {
     delay: delay2,
     duration,
     easing: !Array.isArray(easing) ? easing : "linear",
@@ -2879,6 +2923,7 @@ function startWaapiAnimation(element, valueName, keyframes2, { delay: delay2 = 0
     iterations: repeat + 1,
     direction: repeatType === "reverse" ? "alternate" : "normal"
   });
+  return animation;
 }
 const supportsWaapi = /* @__PURE__ */ memo(() => Object.hasOwnProperty.call(Element.prototype, "animate"));
 const sampleDelta = 10;
@@ -2925,9 +2970,8 @@ class AcceleratedAnimation extends BaseAnimation {
     this.resolver.scheduleResolve();
   }
   initPlayback(keyframes2, finalKeyframe) {
-    var _a;
     let { duration = 300, times, ease: ease2, type, motionValue: motionValue2, name, startTime } = this.options;
-    if (!((_a = motionValue2.owner) === null || _a === void 0 ? void 0 : _a.current)) {
+    if (!motionValue2.owner || !motionValue2.owner.current) {
       return false;
     }
     if (typeof ease2 === "string" && supportsLinearEasing() && isUnsupportedEase(ease2)) {
@@ -2973,21 +3017,21 @@ class AcceleratedAnimation extends BaseAnimation {
     if (!resolved)
       return 0;
     const { duration } = resolved;
-    return millisecondsToSeconds$1(duration);
+    return /* @__PURE__ */ millisecondsToSeconds$1(duration);
   }
   get time() {
     const { resolved } = this;
     if (!resolved)
       return 0;
     const { animation } = resolved;
-    return millisecondsToSeconds$1(animation.currentTime || 0);
+    return /* @__PURE__ */ millisecondsToSeconds$1(animation.currentTime || 0);
   }
   set time(newTime) {
     const { resolved } = this;
     if (!resolved)
       return;
     const { animation } = resolved;
-    animation.currentTime = secondsToMilliseconds$1(newTime);
+    animation.currentTime = /* @__PURE__ */ secondsToMilliseconds$1(newTime);
   }
   get speed() {
     const { resolved } = this;
@@ -3077,7 +3121,7 @@ class AcceleratedAnimation extends BaseAnimation {
         times,
         isGenerator: true
       });
-      const sampleTime = secondsToMilliseconds$1(this.time);
+      const sampleTime = /* @__PURE__ */ secondsToMilliseconds$1(this.time);
       motionValue2.setWithVelocity(sampleAnimation.sample(sampleTime - sampleDelta).value, sampleAnimation.sample(sampleTime).value, sampleDelta);
     }
     const { onStop } = this.options;
@@ -3098,11 +3142,15 @@ class AcceleratedAnimation extends BaseAnimation {
   }
   static supports(options) {
     const { motionValue: motionValue2, name, repeatDelay, repeatType, damping, type } = options;
-    return supportsWaapi() && name && acceleratedValues.has(name) && motionValue2 && motionValue2.owner && motionValue2.owner.current instanceof HTMLElement && /**
+    if (!motionValue2 || !motionValue2.owner || !(motionValue2.owner.current instanceof HTMLElement)) {
+      return false;
+    }
+    const { onUpdate, transformTemplate } = motionValue2.owner.getProps();
+    return supportsWaapi() && name && acceleratedValues.has(name) && /**
      * If we're outputting values to onUpdate then we can't use WAAPI as there's
      * no way to read the value from WAAPI every frame.
      */
-    !motionValue2.owner.getProps().onUpdate && !repeatDelay && repeatType !== "mirror" && damping !== 0 && type !== "inertia";
+    !onUpdate && !transformTemplate && !repeatDelay && repeatType !== "mirror" && damping !== 0 && type !== "inertia";
   }
 }
 const underDampedSpring = {
@@ -3141,7 +3189,7 @@ const animateMotionValue = (name, value, target, transition = {}, element, isHan
   const valueTransition = getValueTransition$1(transition, name) || {};
   const delay2 = valueTransition.delay || transition.delay || 0;
   let { elapsed = 0 } = transition;
-  elapsed = elapsed - secondsToMilliseconds$1(delay2);
+  elapsed = elapsed - /* @__PURE__ */ secondsToMilliseconds$1(delay2);
   let options = {
     keyframes: Array.isArray(target) ? target : [null, target],
     ease: "easeOut",
@@ -3167,10 +3215,10 @@ const animateMotionValue = (name, value, target, transition = {}, element, isHan
     };
   }
   if (options.duration) {
-    options.duration = secondsToMilliseconds$1(options.duration);
+    options.duration = /* @__PURE__ */ secondsToMilliseconds$1(options.duration);
   }
   if (options.repeatDelay) {
-    options.repeatDelay = secondsToMilliseconds$1(options.repeatDelay);
+    options.repeatDelay = /* @__PURE__ */ secondsToMilliseconds$1(options.repeatDelay);
   }
   if (options.from !== void 0) {
     options.keyframes[0] = options.from;
@@ -3338,7 +3386,7 @@ function updateMotionValuesFromProps(element, next, prev) {
     if (isMotionValue$1(nextValue)) {
       element.addValue(key, nextValue);
       if (process.env.NODE_ENV === "development") {
-        warnOnce(nextValue.version === "11.16.6", `Attempting to mix Motion versions ${nextValue.version} with 11.16.6 may not work as expected.`);
+        warnOnce(nextValue.version === "12.4.10", `Attempting to mix Motion versions ${nextValue.version} with 12.4.10 may not work as expected.`);
       }
     } else if (isMotionValue$1(prevValue)) {
       element.addValue(key, motionValue(nextValue, { owner: element }));
@@ -3410,7 +3458,8 @@ class VisualElement {
         frame.render(this.render, false, true);
       }
     };
-    const { latestValues, renderState } = visualState;
+    const { latestValues, renderState, onUpdate } = visualState;
+    this.onUpdate = onUpdate;
     this.latestValues = latestValues;
     this.baseTarget = { ...latestValues };
     this.initialValues = props.initial ? { ...latestValues } : {};
@@ -3458,7 +3507,6 @@ class VisualElement {
     this.update(this.props, this.presenceContext);
   }
   unmount() {
-    visualElementStore.delete(this.current);
     this.projection && this.projection.unmount();
     cancelFrame(this.notifyUpdate);
     cancelFrame(this.render);
@@ -3483,6 +3531,9 @@ class VisualElement {
       this.valueSubscriptions.get(key)();
     }
     const valueIsTransform = transformProps.has(key);
+    if (valueIsTransform && this.onBindTransform) {
+      this.onBindTransform();
+    }
     const removeOnChange = value.on("change", (latestValue) => {
       this.latestValues[key] = latestValue;
       this.props.onUpdate && frame.preRender(this.notifyUpdate);
@@ -3576,6 +3627,7 @@ class VisualElement {
     if (this.handleChildMotionValue) {
       this.handleChildMotionValue();
     }
+    this.onUpdate && this.onUpdate(this);
   }
   getProps() {
     return this.props;
@@ -3818,14 +3870,6 @@ function buildHTMLStyles(state2, latestValues, transformTemplate) {
     style2.transformOrigin = `${originX} ${originY} ${originZ}`;
   }
 }
-function calcOrigin$1(origin, offset, size) {
-  return typeof origin === "string" ? origin : px.transform(offset + size * origin);
-}
-function calcSVGTransformOrigin(dimensions, originX, originY) {
-  const pxOriginX = calcOrigin$1(originX, dimensions.x, dimensions.width);
-  const pxOriginY = calcOrigin$1(originY, dimensions.y, dimensions.height);
-  return `${pxOriginX} ${pxOriginY}`;
-}
 const dashKeys = {
   offset: "stroke-dashoffset",
   array: "stroke-dasharray"
@@ -3842,6 +3886,14 @@ function buildSVGPath(attrs, length, spacing = 1, offset = 0, useDashCase = true
   const pathSpacing = px.transform(spacing);
   attrs[keys2.array] = `${pathLength} ${pathSpacing}`;
 }
+function calcOrigin$1(origin, offset, size) {
+  return typeof origin === "string" ? origin : px.transform(offset + size * origin);
+}
+function calcSVGTransformOrigin(dimensions, originX, originY) {
+  const pxOriginX = calcOrigin$1(originX, dimensions.x, dimensions.width);
+  const pxOriginY = calcOrigin$1(originY, dimensions.y, dimensions.height);
+  return `${pxOriginX} ${pxOriginY}`;
+}
 function buildSVGAttrs(state2, {
   attrX,
   attrY,
@@ -3908,6 +3960,18 @@ const camelCaseAttributes = /* @__PURE__ */ new Set([
   "lengthAdjust"
 ]);
 const isSVGTag = (tag) => typeof tag === "string" && tag.toLowerCase() === "svg";
+function updateSVGDimensions(instance, renderState) {
+  try {
+    renderState.dimensions = typeof instance.getBBox === "function" ? instance.getBBox() : instance.getBoundingClientRect();
+  } catch (e) {
+    renderState.dimensions = {
+      x: 0,
+      y: 0,
+      width: 0,
+      height: 0
+    };
+  }
+}
 function renderHTML(element, { style: style2, vars }, styleProp, projection) {
   Object.assign(element.style, style2, projection && projection.getProjectionStyles(styleProp));
   for (const key in vars) {
@@ -3922,7 +3986,12 @@ function renderSVG(element, renderState, _styleProp, projection) {
 }
 const scaleCorrectors = {};
 function addScaleCorrector(correctors) {
-  Object.assign(scaleCorrectors, correctors);
+  for (const key in correctors) {
+    scaleCorrectors[key] = correctors[key];
+    if (isCSSVariableName(key)) {
+      scaleCorrectors[key].isCSSVariable = true;
+    }
+  }
 }
 function isForcedMotionValue(key, { layout, layoutId }) {
   return transformProps.has(key) || key.startsWith("origin") || (layout || layoutId !== void 0) && (!!scaleCorrectors[key] || key === "opacity");
@@ -3954,6 +4023,11 @@ class SVGVisualElement extends DOMVisualElement {
     this.type = "svg";
     this.isSVGTag = false;
     this.measureInstanceViewportBox = createBox$1;
+    this.updateDimensions = () => {
+      if (this.current && !this.renderState.dimensions) {
+        updateSVGDimensions(this.current, this.renderState);
+      }
+    };
   }
   getBaseTargetFromProps(props, key) {
     return props[key];
@@ -3969,6 +4043,11 @@ 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);
   }
@@ -4225,7 +4304,7 @@ function animateSequence(sequence, options, scope) {
   return animations;
 }
 function isSequence(value) {
-  return Array.isArray(value) && Array.isArray(value[0]);
+  return Array.isArray(value) && value.some(Array.isArray);
 }
 function createScopedAnimate(scope) {
   function scopedAnimate(subjectOrSequence, optionsOrKeyframes, options) {
@@ -4245,7 +4324,7 @@ function createScopedAnimate(scope) {
 }
 const animate = createScopedAnimate();
 function setCSSVar(element, name, value) {
-  element.style.setProperty(`--${name}`, value);
+  element.style.setProperty(name, value);
 }
 function setStyle(element, name, value) {
   element.style[name] = value;
@@ -4294,7 +4373,7 @@ class NativeAnimation extends NativeAnimationControls {
     if (isGenerator(options.type)) {
       const generatorOptions = createGeneratorEasing(options, 100, options.type);
       options.ease = supportsLinearEasing() ? generatorOptions.ease : defaultEasing;
-      options.duration = secondsToMilliseconds$1(generatorOptions.duration);
+      options.duration = /* @__PURE__ */ secondsToMilliseconds$1(generatorOptions.duration);
       options.type = "keyframes";
     } else {
       options.ease = options.ease || defaultEasing;
@@ -4309,8 +4388,8 @@ class NativeAnimation extends NativeAnimationControls {
       this.options = options;
       this.updateFinishedPromise();
       this.removeAnimation = () => {
-        var _a;
-        return (_a = state.get(element)) === null || _a === void 0 ? void 0 : _a.delete(valueName);
+        const elementState = state.get(element);
+        elementState && elementState.delete(valueName);
       };
     };
     if (!supportsWaapi()) {
@@ -4367,8 +4446,8 @@ function animateElements(elementOrSelector, keyframes2, options, scope) {
       const valueOptions = {
         ...getValueTransition$1(elementTransition, valueName)
       };
-      valueOptions.duration = valueOptions.duration ? secondsToMilliseconds$1(valueOptions.duration) : valueOptions.duration;
-      valueOptions.delay = secondsToMilliseconds$1(valueOptions.delay || 0);
+      valueOptions.duration = valueOptions.duration ? /* @__PURE__ */ secondsToMilliseconds$1(valueOptions.duration) : valueOptions.duration;
+      valueOptions.delay = /* @__PURE__ */ secondsToMilliseconds$1(valueOptions.delay || 0);
       animations.push(new NativeAnimation(element, valueName, valueKeyframes, valueOptions));
     }
   }
@@ -4520,7 +4599,7 @@ function updateAxisInfo(element, axisName, info, time2) {
   axis.offset.length = 0;
   axis.offset[0] = 0;
   axis.offset[1] = axis.scrollLength;
-  axis.progress = progress$1(0, axis.scrollLength, axis.current);
+  axis.progress = /* @__PURE__ */ progress$1(0, axis.scrollLength, axis.current);
   const elapsed = time2 - prevTime;
   axis.velocity = elapsed > maxElapsed ? 0 : velocityPerSecond(axis.current - prev, elapsed);
 }
@@ -4826,7 +4905,7 @@ function inView(elementOrSelector, onStart, { root, margin: rootMargin, amount =
       if (entry.isIntersecting === Boolean(onEnd))
         return;
       if (entry.isIntersecting) {
-        const newOnEnd = onStart(entry);
+        const newOnEnd = onStart(entry.target, entry);
         if (typeof newOnEnd === "function") {
           activeIntersections.set(entry.target, newOnEnd);
         } else {
@@ -4888,7 +4967,7 @@ function delay$1(callback, timeout) {
   return () => cancelFrame(checkElapsed);
 }
 function delayInSeconds(callback, timeout) {
-  return delay$1(callback, secondsToMilliseconds$1(timeout));
+  return delay$1(callback, /* @__PURE__ */ secondsToMilliseconds$1(timeout));
 }
 const distance = (a, b) => Math.abs(a - b);
 function distance2D(a, b) {
@@ -5386,8 +5465,8 @@ class Feature {
 }
 function handleHoverEvent$1(state2, event, lifecycle) {
   const props = state2.options;
-  if (props.hover) {
-    state2.setActive("hover", lifecycle === "Start");
+  if (props.whileHover) {
+    state2.setActive("whileHover", lifecycle === "Start");
   }
   const eventName = `onHover${lifecycle}`;
   const callback = props[eventName];
@@ -5397,7 +5476,7 @@ function handleHoverEvent$1(state2, event, lifecycle) {
 }
 class HoverGesture extends Feature {
   isActive() {
-    return Boolean(this.state.getOptions().hover);
+    return Boolean(this.state.getOptions().whileHover);
   }
   constructor(state2) {
     super(state2);
@@ -5408,7 +5487,7 @@ class HoverGesture extends Feature {
       return;
     this.unmount = hover(
       element,
-      (startEvent) => {
+      (el, startEvent) => {
         handleHoverEvent$1(this.state, startEvent, "Start");
         return (endEvent) => {
           handleHoverEvent$1(this.state, endEvent, "End");
@@ -5427,8 +5506,8 @@ function extractEventInfo$1(event) {
 }
 function handlePressEvent(state2, event, lifecycle) {
   const props = state2.options;
-  if (props.press) {
-    state2.setActive("press", lifecycle === "Start");
+  if (props.whilePress) {
+    state2.setActive("whilePress", lifecycle === "Start");
   }
   const eventName = `onPress${lifecycle === "End" ? "" : lifecycle}`;
   const callback = props[eventName];
@@ -5449,7 +5528,7 @@ class PressGesture extends Feature {
       return;
     this.unmount = press(
       element,
-      (startEvent) => {
+      (el, startEvent) => {
         handlePressEvent(this.state, startEvent, "Start");
         return (endEvent, { success }) => handlePressEvent(
           this.state,
@@ -5463,8 +5542,8 @@ class PressGesture extends Feature {
 }
 function handleHoverEvent(state2, entry, lifecycle) {
   const props = state2.options;
-  if (props.inView) {
-    state2.setActive("inView", lifecycle === "Enter");
+  if (props.whileInView) {
+    state2.setActive("whileInView", lifecycle === "Enter");
   }
   const eventName = `onViewport${lifecycle}`;
   const callback = props[eventName];
@@ -5474,7 +5553,7 @@ function handleHoverEvent(state2, entry, lifecycle) {
 }
 class InViewGesture extends Feature {
   isActive() {
-    return Boolean(this.state.getOptions().inView);
+    return Boolean(this.state.getOptions().whileInView);
   }
   constructor(state2) {
     super(state2);
@@ -5487,7 +5566,7 @@ class InViewGesture extends Feature {
     const { once, ...viewOptions } = this.state.getOptions().inViewOptions || {};
     this.unmount = inView(
       element,
-      (entry) => {
+      (_, entry) => {
         handleHoverEvent(this.state, entry, "Enter");
         if (!once) {
           return (endEvent) => {
@@ -6626,7 +6705,7 @@ function compress(min, max, easing) {
       return 0;
     if (p > max)
       return 1;
-    return easing(progress$1(min, max, p));
+    return easing(/* @__PURE__ */ progress$1(min, max, p));
   };
 }
 function copyAxisInto(axis, originAxis) {
@@ -6868,13 +6947,6 @@ function buildProjectionTransform(delta, treeScale, latestTransform) {
 function eachAxis(callback) {
   return [callback("x"), callback("y")];
 }
-const metrics = {
-  type: "projectionFrame",
-  totalNodes: 0,
-  resolvedTargetDeltas: 0,
-  recalculatedProjection: 0
-};
-const isDebug = typeof window !== "undefined" && window.MotionDebug !== void 0;
 const transformAxes = ["", "X", "Y", "Z"];
 const hiddenVisibility = { visibility: "hidden" };
 const animationTarget = 1e3;
@@ -6940,16 +7012,10 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
       };
       this.updateProjection = () => {
         this.projectionUpdateScheduled = false;
-        if (isDebug) {
-          metrics.totalNodes = metrics.resolvedTargetDeltas = metrics.recalculatedProjection = 0;
-        }
         this.nodes.forEach(propagateDirtyNodes);
         this.nodes.forEach(resolveTargetDelta);
         this.nodes.forEach(calcProjection);
         this.nodes.forEach(cleanDirtyNodes);
-        if (isDebug) {
-          window.MotionDebug.record(metrics);
-        }
       };
       this.resolvedRelativeTargetAt = 0;
       this.hasProjected = false;
@@ -7014,7 +7080,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
         this.root.registerSharedNode(layoutId, this);
       }
       if (this.options.animate !== false && visualElement && (layoutId || layout)) {
-        this.addEventListener("didUpdate", ({ delta, hasLayoutChanged, hasRelativeTargetChanged, layout: newLayout }) => {
+        this.addEventListener("didUpdate", ({ delta, hasLayoutChanged, hasRelativeLayoutChanged, layout: newLayout }) => {
           if (this.isTreeAnimationBlocked()) {
             this.target = void 0;
             this.relativeTarget = void 0;
@@ -7022,9 +7088,9 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
           }
           const layoutTransition = this.options.transition || visualElement.getDefaultTransition() || defaultLayoutTransition;
           const { onLayoutAnimationStart, onLayoutAnimationComplete } = visualElement.getProps();
-          const targetChanged = !this.targetLayout || !boxEqualsRounded(this.targetLayout, newLayout) || hasRelativeTargetChanged;
-          const hasOnlyRelativeTargetChanged = !hasLayoutChanged && hasRelativeTargetChanged;
-          if (this.options.layoutRoot || this.resumeFrom && this.resumeFrom.instance || hasOnlyRelativeTargetChanged || hasLayoutChanged && (targetChanged || !this.currentAnimation)) {
+          const hasTargetChanged = !this.targetLayout || !boxEqualsRounded(this.targetLayout, newLayout);
+          const hasOnlyRelativeTargetChanged = !hasLayoutChanged && hasRelativeLayoutChanged;
+          if (this.options.layoutRoot || this.resumeFrom || hasOnlyRelativeTargetChanged || hasLayoutChanged && (hasTargetChanged || !this.currentAnimation)) {
             if (this.resumeFrom) {
               this.resumingFrom = this.resumeFrom;
               this.resumingFrom.resumingFrom = void 0;
@@ -7173,6 +7239,9 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
       if (this.snapshot || !this.instance)
         return;
       this.snapshot = this.measure();
+      if (this.snapshot && !calcLength(this.snapshot.measuredBox.x) && !calcLength(this.snapshot.measuredBox.y)) {
+        this.snapshot = void 0;
+      }
     }
     updateLayout() {
       if (!this.instance)
@@ -7405,9 +7474,6 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
           this.relativeParent = this.relativeTarget = void 0;
         }
       }
-      if (isDebug) {
-        metrics.resolvedTargetDeltas++;
-      }
     }
     getClosestProjectingParent() {
       if (!this.parent || hasScale(this.parent.latestValues) || has2DTranslate(this.parent.latestValues)) {
@@ -7473,9 +7539,6 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
         this.scheduleRender();
         this.notifyListeners("projectionUpdate", target);
       }
-      if (isDebug) {
-        metrics.recalculatedProjection++;
-      }
     }
     hide() {
       this.isVisible = false;
@@ -7560,6 +7623,8 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
             this.mixTargetDelta(latest);
             options.onUpdate && options.onUpdate(latest);
           },
+          onStop: () => {
+          },
           onComplete: () => {
             options.onComplete && options.onComplete();
             this.completeAnimation();
@@ -7731,7 +7796,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
       for (const key in scaleCorrectors) {
         if (valuesToRender[key] === void 0)
           continue;
-        const { correct, applyTo } = scaleCorrectors[key];
+        const { correct, applyTo, isCSSVariable } = scaleCorrectors[key];
         const corrected = styles.transform === "none" ? valuesToRender[key] : correct(valuesToRender[key], lead);
         if (applyTo) {
           const num = applyTo.length;
@@ -7739,7 +7804,11 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
             styles[applyTo[i]] = corrected;
           }
         } else {
-          styles[key] = corrected;
+          if (isCSSVariable) {
+            this.options.visualElement.renderState.vars[key] = corrected;
+          } else {
+            styles[key] = corrected;
+          }
         }
       }
       if (this.options.layoutId) {
@@ -7798,7 +7867,7 @@ function notifyLayoutUpdate(node) {
       calcBoxDelta(visualDelta, layout, snapshot.layoutBox);
     }
     const hasLayoutChanged = !isDeltaZero(layoutDelta);
-    let hasRelativeTargetChanged = false;
+    let hasRelativeLayoutChanged = false;
     if (!node.resumeFrom) {
       const relativeParent = node.getClosestProjectingParent();
       if (relativeParent && !relativeParent.resumeFrom) {
@@ -7809,7 +7878,7 @@ function notifyLayoutUpdate(node) {
           const relativeLayout = createBox$1();
           calcRelativePosition(relativeLayout, layout, parentLayout.layoutBox);
           if (!boxEqualsRounded(relativeSnapshot, relativeLayout)) {
-            hasRelativeTargetChanged = true;
+            hasRelativeLayoutChanged = true;
           }
           if (relativeParent.options.layoutRoot) {
             node.relativeTarget = relativeLayout;
@@ -7825,7 +7894,7 @@ function notifyLayoutUpdate(node) {
       delta: visualDelta,
       layoutDelta,
       hasLayoutChanged,
-      hasRelativeTargetChanged
+      hasRelativeLayoutChanged
     });
   } else if (node.isLead()) {
     const { onExitComplete } = node.options;
@@ -7834,9 +7903,6 @@ function notifyLayoutUpdate(node) {
   node.options.transition = void 0;
 }
 function propagateDirtyNodes(node) {
-  if (isDebug) {
-    metrics.totalNodes++;
-  }
   if (!node.parent)
     return;
   if (!node.isProjecting()) {
@@ -8025,13 +8091,13 @@ class FocusGesture extends Feature {
     }
     if (!isFocusVisible)
       return;
-    this.state.setActive("focus", true);
+    this.state.setActive("whileFocus", true);
     this.isActive = true;
   }
   onBlur() {
     if (!this.isActive)
       return;
-    this.state.setActive("focus", false);
+    this.state.setActive("whileFocus", false);
     this.isActive = false;
   }
   mount() {
@@ -8119,7 +8185,7 @@ function createVisualElement(Component, options) {
 function motionEvent(name, target, isExit) {
   return new CustomEvent(name, { detail: { target, isExit } });
 }
-const STATE_TYPES = ["initial", "animate", "inView", "hover", "press", "whileDrag", "focus", "exit"];
+const STATE_TYPES = ["initial", "animate", "whileInView", "whileHover", "whilePress", "whileDrag", "whileFocus", "exit"];
 function animateUpdates({
   controlActiveState = void 0,
   controlDelay = 0,
@@ -8129,46 +8195,54 @@ function animateUpdates({
 } = {}) {
   const prevTarget = this.target;
   this.target = { ...this.baseTarget };
-  const animationOptions = {};
+  let animationOptions = {};
   const transition = { ...this.options.transition };
   if (directAnimate)
-    resolveDirectAnimation.call(this, directAnimate, directTransition, animationOptions);
+    animationOptions = resolveDirectAnimation.call(this, directAnimate, directTransition, animationOptions);
   else
-    resolveStateAnimation.call(this, controlActiveState, animationOptions);
+    animationOptions = resolveStateAnimation.call(this, controlActiveState, transition);
   const factories = createAnimationFactories.call(this, prevTarget, animationOptions, controlDelay);
-  const { getChildAnimations, childAnimations } = setupChildAnimations.call(this, transition, controlActiveState, isFallback);
+  const { getChildAnimations, childAnimations } = setupChildAnimations.call(this, transition, this.activeStates, isFallback);
   return executeAnimations.call(this, factories, getChildAnimations, childAnimations, transition, controlActiveState);
 }
-function resolveDirectAnimation(directAnimate, directTransition, animationOptions) {
+function resolveDirectAnimation(directAnimate, directTransition) {
   const variant = resolveVariant(directAnimate, this.options.variants, this.options.custom);
   if (!variant)
-    return;
+    return {};
   const transition = { ...this.options.transition, ...directTransition || variant.transition };
+  const animationOptions = {};
   Object.entries(variant).forEach(([key, value]) => {
     if (key === "transition")
       return;
     this.target[key] = value;
     animationOptions[key] = getOptions(transition, key);
   });
+  return animationOptions;
 }
-function resolveStateAnimation(controlActiveState, animationOptions) {
+function resolveStateAnimation(controlActiveState, transition) {
   if (controlActiveState)
     this.activeStates = { ...this.activeStates, ...controlActiveState };
+  const transitionOptions = {};
   STATE_TYPES.forEach((name) => {
     if (!this.activeStates[name] || isAnimationControls(this.options[name]))
       return;
-    const definition = core.isDef(this.options[name]) ? this.options[name] : this.context[name];
-    const variant = resolveVariant(definition, this.options.variants, this.options.custom);
+    const definition = this.options[name];
+    let variant = core.isDef(definition) ? resolveVariant(definition, this.options.variants, this.options.custom) : void 0;
+    if (this.visualElement.isVariantNode) {
+      const controlVariant = resolveVariant(this.context[name], this.options.variants, this.options.custom);
+      variant = controlVariant ? Object.assign(controlVariant || {}, variant) : variant;
+    }
     if (!variant)
       return;
-    const transition = { ...this.options.transition, ...variant.transition };
+    Object.assign(transition, variant.transition);
     Object.entries(variant).forEach(([key, value]) => {
       if (key === "transition")
         return;
       this.target[key] = value;
-      animationOptions[key] = getOptions(transition, key);
+      transitionOptions[key] = getOptions(transition, key);
     });
   });
+  return transitionOptions;
 }
 function createAnimationFactories(prevTarget, animationOptions, controlDelay) {
   const factories = [];
@@ -8192,7 +8266,7 @@ function createAnimationFactories(prevTarget, animationOptions, controlDelay) {
 }
 function setupChildAnimations(transition, controlActiveState, isFallback) {
   var _a;
-  if (!((_a = this.visualElement.variantChildren) == null ? void 0 : _a.size) || controlActiveState)
+  if (!((_a = this.visualElement.variantChildren) == null ? void 0 : _a.size) || !controlActiveState)
     return { getChildAnimations: () => Promise.resolve(), childAnimations: [] };
   const { staggerChildren = 0, staggerDirection = 1, delayChildren = 0 } = transition || {};
   const maxStaggerDuration = (this.visualElement.variantChildren.size - 1) * staggerChildren;
@@ -8239,7 +8313,7 @@ function executeAnimations(factories, getChildAnimations, childAnimations, trans
   return controlActiveState ? getAnimationPromise : getAnimationPromise();
 }
 function isVariantLabels(value) {
-  return typeof value === "string" || Array.isArray(value);
+  return typeof value === "string" || value === false || Array.isArray(value);
 }
 const mountedStates = /* @__PURE__ */ new WeakMap();
 let id = 0;
@@ -8255,6 +8329,7 @@ class MotionState {
       initial: true,
       animate: true
     };
+    this.currentProcess = null;
     this._context = null;
     this.animateUpdates = animateUpdates;
     this.id = `motion-state-${id++}`;
@@ -8262,16 +8337,16 @@ class MotionState {
     this.parent = parent;
     (_a = parent == null ? void 0 : parent.children) == null ? void 0 : _a.add(this);
     this.depth = (parent == null ? void 0 : parent.depth) + 1 || 0;
-    const initialVariantSource = options.initial === false ? "animate" : "initial";
+    const initialVariantSource = this.context.initial === false ? "animate" : "initial";
     this.initTarget(initialVariantSource);
     this.visualElement = createVisualElement(this.options.as, {
       presenceContext: null,
       parent: parent == null ? void 0 : parent.visualElement,
       props: {
         ...this.options,
-        whileHover: this.options.hover,
-        whileTap: this.options.press,
-        whileInView: this.options.inView
+        whileHover: this.options.whileHover,
+        whileTap: this.options.whilePress,
+        whileInView: this.options.whileInView
       },
       visualState: {
         renderState: {
@@ -8340,7 +8415,7 @@ class MotionState {
     this.updateOptions();
     this.featureManager.mount();
     if (!notAnimate && this.options.animate) {
-      this.animateUpdates();
+      this.startAnimation();
     }
     if (this.options.layoutId) {
       mountedLayoutIds.add(this.options.layoutId);
@@ -8349,6 +8424,22 @@ class MotionState {
       });
     }
   }
+  clearAnimation() {
+    var _a;
+    this.currentProcess && cancelFrame(this.currentProcess);
+    this.currentProcess = null;
+    (_a = this.visualElement.variantChildren) == null ? void 0 : _a.forEach((child) => {
+      child.state.clearAnimation();
+    });
+  }
+  // update trigger animation
+  startAnimation() {
+    this.clearAnimation();
+    this.currentProcess = frame.render(() => {
+      this.currentProcess = null;
+      this.animateUpdates();
+    });
+  }
   // Called before unmounting, executes in child-to-parent order
   beforeUnmount() {
     this.featureManager.beforeUnmount();
@@ -8390,7 +8481,7 @@ class MotionState {
     this.updateOptions();
     this.featureManager.update();
     if (hasAnimateChange) {
-      this.animateUpdates();
+      this.startAnimation();
     }
   }
   // Set animation state active status and propagate to children
@@ -8446,7 +8537,15 @@ const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({
   props: /* @__PURE__ */ vue.mergeDefaults({
     as: {},
     asChild: { type: Boolean },
+    hover: {},
+    press: {},
+    inView: {},
+    focus: {},
     whileDrag: {},
+    whileHover: {},
+    whilePress: {},
+    whileInView: {},
+    whileFocus: {},
     custom: {},
     initial: { type: [String, Array, Object, Boolean] },
     animate: {},
@@ -8470,15 +8569,12 @@ const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({
     onLayoutAnimationStart: { type: Function },
     onLayoutAnimationComplete: { type: Function },
     globalPressTarget: { type: Boolean },
-    press: {},
     onPressStart: { type: Function },
     onPress: { type: Function },
     onPressCancel: { type: Function },
-    hover: {},
     onHoverStart: { type: Function },
     onHoverEnd: { type: Function },
     inViewOptions: {},
-    inView: {},
     onViewportEnter: { type: Function },
     onViewportLeave: { type: Function },
     drag: { type: [Boolean, String] },
@@ -8501,7 +8597,6 @@ const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({
     onPanStart: { type: Function },
     onPan: { type: Function },
     onPanEnd: { type: Function },
-    focus: {},
     onFocus: { type: Function },
     onBlur: { type: Function }
   }, {
@@ -8519,7 +8614,31 @@ const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({
     dragElastic: 0.5,
     dragMomentum: true,
     whileDrag: void 0,
-    crossfade: true
+    crossfade: true,
+    whileHover: ({ hover: hover2 }) => {
+      if (process.env.NODE_ENV === "development" && hover2) {
+        vue.warn("hover is deprecated. Use whileHover instead.");
+      }
+      return hover2;
+    },
+    whilePress: ({ press: press2 }) => {
+      if (process.env.NODE_ENV === "development" && press2) {
+        vue.warn("press is deprecated. Use whilePress instead.");
+      }
+      return press2;
+    },
+    whileInView: ({ inView: inView2 }) => {
+      if (process.env.NODE_ENV === "development" && inView2) {
+        vue.warn("inView is deprecated. Use whileInView instead.");
+      }
+      return inView2;
+    },
+    whileFocus: ({ focus }) => {
+      if (process.env.NODE_ENV === "development" && focus) {
+        vue.warn("focus is deprecated. Use whileFocus instead.");
+      }
+      return focus;
+    }
   }),
   setup(__props) {
     const props = __props;
@@ -8541,6 +8660,7 @@ const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({
         transition: props.transition ?? config.value.transition,
         layoutGroup,
         motionConfig: config.value,
+        inViewOptions: props.inViewOptions ?? config.value.inViewOptions,
         initial: animatePresenceContext.initial === false ? animatePresenceContext.initial : props.initial === true ? void 0 : props.initial
       };
     }
@@ -8581,7 +8701,7 @@ const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({
         ...isSVG ? {} : state2.visualElement.latestValues
       };
       if (isSVG) {
-        const { attributes, style: style2 } = convertSvgStyleToAttributes(state2.target);
+        const { attributes, style: style2 } = convertSvgStyleToAttributes(state2.isMounted() ? state2.target : state2.baseTarget);
         Object.assign(attrsProps, attributes);
         Object.assign(styleProps, style2);
       }
@@ -8839,7 +8959,8 @@ const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
   props: {
     transition: {},
     reduceMotion: { default: defaultConfig.reduceMotion },
-    nonce: {}
+    nonce: {},
+    inViewOptions: {}
   },
   setup(__props) {
     const props = __props;
@@ -8847,7 +8968,8 @@ const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
     const config = vue.computed(() => ({
       transition: props.transition ?? parentConfig.value.transition,
       reduceMotion: props.reduceMotion ?? parentConfig.value.reduceMotion,
-      nonce: props.nonce ?? parentConfig.value.nonce
+      nonce: props.nonce ?? parentConfig.value.nonce,
+      inViewOptions: props.inViewOptions ?? parentConfig.value.inViewOptions
     }));
     provideMotionConfig(config);
     return (_ctx, _cache) => {
@@ -8904,7 +9026,15 @@ const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
     values: {},
     as: { default: "ul" },
     asChild: { type: Boolean },
+    hover: {},
+    press: {},
+    inView: {},
+    focus: {},
     whileDrag: {},
+    whileHover: {},
+    whilePress: {},
+    whileInView: {},
+    whileFocus: {},
     custom: {},
     initial: { type: [String, Array, Object, Boolean] },
     animate: {},
@@ -8928,15 +9058,12 @@ const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
     onLayoutAnimationStart: {},
     onLayoutAnimationComplete: {},
     globalPressTarget: { type: Boolean },
-    press: {},
     onPressStart: {},
     onPress: {},
     onPressCancel: {},
-    hover: {},
     onHoverStart: {},
     onHoverEnd: {},
     inViewOptions: {},
-    inView: {},
     onViewportEnter: {},
     onViewportLeave: {},
     drag: { type: [Boolean, String] },
@@ -8959,7 +9086,6 @@ const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
     onPanStart: {},
     onPan: {},
     onPanEnd: {},
-    focus: {},
     onFocus: {},
     onBlur: {}
   },
@@ -9056,11 +9182,18 @@ function useTransform(input, inputRangeOrTransformer, outputRange, options) {
   if (typeof input === "function") {
     return useComputed(input);
   }
-  const transformer = typeof inputRangeOrTransformer === "function" ? inputRangeOrTransformer : transform(inputRangeOrTransformer, outputRange, options);
+  const transformer = vue.computed(() => {
+    return typeof inputRangeOrTransformer === "function" ? inputRangeOrTransformer : transform(vue.isRef(inputRangeOrTransformer) ? inputRangeOrTransformer.value : inputRangeOrTransformer, outputRange, options);
+  });
   return Array.isArray(input) ? useListTransform(
     input,
     transformer
-  ) : useListTransform([input], ([latest]) => transformer(latest));
+  ) : useListTransform([input], ([latest]) => {
+    if (vue.isRef(transformer)) {
+      return transformer.value(latest);
+    }
+    return transformer(latest);
+  });
 }
 function useListTransform(values, transformer) {
   const latest = [];
@@ -9070,7 +9203,7 @@ function useListTransform(values, transformer) {
     for (let i = 0; i < numValues; i++) {
       latest[i] = values[i].get();
     }
-    return transformer(latest);
+    return vue.isRef(transformer) ? transformer.value(latest) : transformer(latest);
   });
   subscribe(values);
   return value;
@@ -9129,17 +9262,23 @@ function useSpring(source, config = {}) {
       animation.sample(frameData.delta);
     }
     stopAnimation2();
+    const springConfig = vue.isRef(config) ? config.value : config;
     activeSpringAnimation = animateValue({
       keyframes: [value.get(), latestValue],
       velocity: value.getVelocity(),
       type: "spring",
       restDelta: 1e-3,
       restSpeed: 0.01,
-      ...config,
+      ...springConfig,
       onUpdate: latestSetter
     });
   };
-  vue.watch(() => JSON.stringify(config), () => {
+  vue.watch(() => {
+    if (vue.isRef(config)) {
+      return config.value;
+    }
+    return config;
+  }, () => {
     value.attach((v, set) => {
       latestValue = v;
       latestSetter = set;
@@ -9228,7 +9367,15 @@ const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
     layout: { type: [Boolean, String], default: true },
     as: { default: "li" },
     asChild: { type: Boolean },
+    hover: { default: void 0 },
+    press: {},
+    inView: { default: void 0 },
+    focus: {},
     whileDrag: { default: void 0 },
+    whileHover: {},
+    whilePress: {},
+    whileInView: {},
+    whileFocus: {},
     custom: {},
     initial: { type: [String, Array, Object, Boolean], default: void 0 },
     animate: { default: void 0 },
@@ -9251,15 +9398,12 @@ const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
     onLayoutAnimationStart: {},
     onLayoutAnimationComplete: {},
     globalPressTarget: { type: Boolean },
-    press: {},
     onPressStart: {},
     onPress: {},
     onPressCancel: {},
-    hover: { default: void 0 },
     onHoverStart: {},
     onHoverEnd: {},
     inViewOptions: {},
-    inView: { default: void 0 },
     onViewportEnter: {},
     onViewportLeave: {},
     drag: { type: [Boolean, String] },
@@ -9282,7 +9426,6 @@ const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
     onPanStart: {},
     onPan: {},
     onPanEnd: {},
-    focus: {},
     onFocus: {},
     onBlur: {}
   },
@@ -9668,6 +9811,7 @@ exports.frame = frame;
 exports.frameData = frameData;
 exports.frameSteps = frameSteps;
 exports.getContextWindow = getContextWindow;
+exports.hover = hover;
 exports.inView = inView;
 exports.inertia = inertia;
 exports.injectLayoutGroup = injectLayoutGroup;
@@ -9684,6 +9828,7 @@ exports.motionValue = motionValue;
 exports.mountedStates = mountedStates;
 exports.noop = noop;
 exports.pipe = pipe;
+exports.press = press;
 exports.progress = progress$1;
 exports.provideLayoutGroup = provideLayoutGroup;
 exports.provideMotion = provideMotion;