motion 13.1.1-alpha.0 → 13.2.0

package/dist/motion.dev.js

@@ -1039,15 +1039,16 @@
      * to prevent infinite loops
      */
     const maxGeneratorDuration = 20000;
-    function calcGeneratorDuration(generator) {
+    function calcGeneratorDuration(generator, timeStep = 50, maxDuration = maxGeneratorDuration, keyframes) {
         let duration = 0;
-        const timeStep = 50;
         let state = generator.next(duration);
-        while (!state.done && duration < maxGeneratorDuration) {
+        keyframes?.push(state.value);
+        while (!state.done && duration < maxDuration) {
             duration += timeStep;
             state = generator.next(duration);
+            keyframes?.push(state.value);
         }
-        return duration >= maxGeneratorDuration ? Infinity : duration;
+        return duration >= maxDuration ? Infinity : duration;
     }
 
     /**
@@ -1131,9 +1132,13 @@
                 const exponentialDecay = undampedFreq * dampingRatio;
                 const delta = exponentialDecay * duration;
                 const d = delta * velocity + velocity;
-                const e = Math.pow(dampingRatio, 2) * Math.pow(undampedFreq, 2) * duration;
+                const e = dampingRatio *
+                    dampingRatio *
+                    undampedFreq *
+                    undampedFreq *
+                    duration;
                 const f = Math.exp(-delta);
-                const g = calcAngularFreq(Math.pow(undampedFreq, 2), dampingRatio);
+                const g = calcAngularFreq(undampedFreq * undampedFreq, dampingRatio);
                 const factor = -envelope(undampedFreq) + safeMin > 0 ? -1 : 1;
                 return (factor * ((d - e) * f)) / g;
             };
@@ -1164,7 +1169,7 @@
             };
         }
         else {
-            const stiffness = Math.pow(undampedFreq, 2) * mass;
+            const stiffness = undampedFreq * undampedFreq * mass;
             return {
                 stiffness,
                 damping: dampingRatio * 2 * Math.sqrt(mass * stiffness),
@@ -1244,6 +1249,7 @@
         const dampingRatio = damping / (2 * Math.sqrt(stiffness * mass));
         const initialDelta = target - origin;
         const undampedAngularFreq = millisecondsToSeconds(Math.sqrt(stiffness / mass));
+        const decay = dampingRatio * undampedAngularFreq;
         /**
          * If we're working on a granular scale, use smaller defaults for determining
          * when the spring is finished.
@@ -1260,35 +1266,38 @@
             : springDefaults.restDelta.default);
         let resolveSpring;
         let resolveVelocity;
-        // Underdamped coefficients, hoisted for use in the inlined next() hot path
-        let angularFreq;
-        let A;
-        let sinCoeff;
-        let cosCoeff;
         if (dampingRatio < 1) {
-            angularFreq = calcAngularFreq(undampedAngularFreq, dampingRatio);
-            A =
-                (initialVelocity +
-                    dampingRatio * undampedAngularFreq * initialDelta) /
-                    angularFreq;
+            const angularFreq = calcAngularFreq(undampedAngularFreq, dampingRatio);
+            const A = (initialVelocity + decay * initialDelta) / angularFreq;
+            // Coefficients for the analytical derivative (px/ms)
+            const sinCoeff = decay * A + initialDelta * angularFreq;
+            const cosCoeff = decay * initialDelta - A * angularFreq;
+            /**
+             * The underdamped hot path needs both position and velocity every
+             * frame and they share the same exp/sin/cos terms, so sample both
+             * at once, memoized by t, to only calculate them once per frame.
+             */
+            let sampledT = -1;
+            let position = 0;
+            let velocityAtT = 0;
+            const sample = (t) => {
+                if (t !== sampledT) {
+                    sampledT = t;
+                    const envelope = Math.exp(-decay * t);
+                    const sin = Math.sin(angularFreq * t);
+                    const cos = Math.cos(angularFreq * t);
+                    position = target - envelope * (A * sin + initialDelta * cos);
+                    velocityAtT = envelope * (sinCoeff * sin + cosCoeff * cos);
+                }
+            };
             // Underdamped spring
             resolveSpring = (t) => {
-                const envelope = Math.exp(-dampingRatio * undampedAngularFreq * t);
-                return (target -
-                    envelope *
-                        (A * Math.sin(angularFreq * t) +
-                            initialDelta * Math.cos(angularFreq * t)));
+                sample(t);
+                return position;
             };
-            // Analytical derivative of underdamped spring (px/ms)
-            sinCoeff =
-                dampingRatio * undampedAngularFreq * A + initialDelta * angularFreq;
-            cosCoeff =
-                dampingRatio * undampedAngularFreq * initialDelta - A * angularFreq;
             resolveVelocity = (t) => {
-                const envelope = Math.exp(-dampingRatio * undampedAngularFreq * t);
-                return envelope *
-                    (sinCoeff * Math.sin(angularFreq * t) +
-                        cosCoeff * Math.cos(angularFreq * t));
+                sample(t);
+                return velocityAtT;
             };
         }
         else if (dampingRatio === 1) {
@@ -1306,13 +1315,12 @@
             // Overdamped spring
             const dampedAngularFreq = undampedAngularFreq * Math.sqrt(dampingRatio * dampingRatio - 1);
             resolveSpring = (t) => {
-                const envelope = Math.exp(-dampingRatio * undampedAngularFreq * t);
+                const envelope = Math.exp(-decay * t);
                 // When performing sinh or cosh values can hit Infinity so we cap them here
                 const freqForT = Math.min(dampedAngularFreq * t, 300);
                 return (target -
                     (envelope *
-                        ((initialVelocity +
-                            dampingRatio * undampedAngularFreq * initialDelta) *
+                        ((initialVelocity + decay * initialDelta) *
                             Math.sinh(freqForT) +
                             dampedAngularFreq *
                                 initialDelta *
@@ -1320,43 +1328,21 @@
                         dampedAngularFreq);
             };
             // Analytical derivative of overdamped spring (px/ms)
-            const P = (initialVelocity +
-                dampingRatio * undampedAngularFreq * initialDelta) /
-                dampedAngularFreq;
-            const sinhCoeff = dampingRatio * undampedAngularFreq * P - initialDelta * dampedAngularFreq;
-            const coshCoeff = dampingRatio * undampedAngularFreq * initialDelta - P * dampedAngularFreq;
+            const P = (initialVelocity + decay * initialDelta) / dampedAngularFreq;
+            const sinhCoeff = decay * P - initialDelta * dampedAngularFreq;
+            const coshCoeff = decay * initialDelta - P * dampedAngularFreq;
             resolveVelocity = (t) => {
-                const envelope = Math.exp(-dampingRatio * undampedAngularFreq * t);
+                const envelope = Math.exp(-decay * t);
                 const freqForT = Math.min(dampedAngularFreq * t, 300);
-                return envelope *
+                return (envelope *
                     (sinhCoeff * Math.sinh(freqForT) +
-                        coshCoeff * Math.cosh(freqForT));
+                        coshCoeff * Math.cosh(freqForT)));
             };
         }
         const generator = {
             calculatedDuration: isResolvedFromDuration ? duration || null : null,
             velocity: (t) => secondsToMilliseconds(resolveVelocity(t)),
             next: (t) => {
-                /**
-                 * For underdamped physics springs we need both position and
-                 * velocity each tick. Compute shared trig values once to avoid
-                 * duplicate Math.exp/sin/cos calls on the hot path.
-                 */
-                if (!isResolvedFromDuration && dampingRatio < 1) {
-                    const envelope = Math.exp(-dampingRatio * undampedAngularFreq * t);
-                    const sin = Math.sin(angularFreq * t);
-                    const cos = Math.cos(angularFreq * t);
-                    const current = target -
-                        envelope *
-                            (A * sin + initialDelta * cos);
-                    const currentVelocity = secondsToMilliseconds(envelope *
-                        (sinCoeff * sin + cosCoeff * cos));
-                    state.done =
-                        Math.abs(currentVelocity) <= restSpeed &&
-                            Math.abs(target - current) <= restDelta;
-                    state.value = state.done ? target : current;
-                    return state;
-                }
                 const current = resolveSpring(t);
                 if (!isResolvedFromDuration) {
                     const currentVelocity = secondsToMilliseconds(resolveVelocity(t));
@@ -1387,19 +1373,13 @@
         return options;
     };
 
-    const velocitySampleDuration = 5; // ms
-    function getGeneratorVelocity(resolveValue, t, current) {
-        const prevT = Math.max(t - velocitySampleDuration, 0);
-        return velocityPerSecond(current - resolveValue(prevT), t - prevT);
-    }
-
     function inertia({ keyframes, velocity = 0.0, power = 0.8, timeConstant = 325, bounceDamping = 10, bounceStiffness = 500, modifyTarget, min, max, restDelta = 0.5, restSpeed, }) {
         const origin = keyframes[0];
         const state = {
             done: false,
             value: origin,
         };
-        const isOutOfBounds = (v) => (min !== undefined && v < min) || (max !== undefined && v > max);
+        const isOutOfBounds = (v) => v < min || v > max;
         const nearestBoundary = (v) => {
             if (min === undefined)
                 return max;
@@ -1417,12 +1397,10 @@
         if (target !== ideal)
             amplitude = target - origin;
         const calcDelta = (t) => -amplitude * Math.exp(-t / timeConstant);
-        const calcLatest = (t) => target + calcDelta(t);
         const applyFriction = (t) => {
             const delta = calcDelta(t);
-            const latest = calcLatest(t);
             state.done = Math.abs(delta) <= restDelta;
-            state.value = state.done ? target : latest;
+            state.value = state.done ? target : target + delta;
         };
         /**
          * Ideally this would resolve for t in a stateless way, we could
@@ -1438,7 +1416,12 @@
             timeReachedBoundary = t;
             spring$1 = spring({
                 keyframes: [state.value, nearestBoundary(state.value)],
-                velocity: getGeneratorVelocity(calcLatest, t, state.value), // TODO: This should be passing * 1000
+                /**
+                 * The friction curve is target + calcDelta(t), so its exact
+                 * derivative is -calcDelta(t) / timeConstant in units/ms,
+                 * converted here to the units/second expected by spring.
+                 */
+                velocity: (-calcDelta(t) / timeConstant) * 1000,
                 damping: bounceDamping,
                 stiffness: bounceStiffness,
                 restDelta,
@@ -1607,6 +1590,12 @@
         };
     }
 
+    const velocitySampleDuration = 5; // ms
+    function getGeneratorVelocity(resolveValue, t, current) {
+        const prevT = Math.max(t - velocitySampleDuration, 0);
+        return velocityPerSecond(current - resolveValue(prevT), t - prevT);
+    }
+
     const isNotNull = (value) => value !== null;
     function getFinalKeyframe(keyframes, { repeat, repeatType = "loop" }, finalKeyframe, speed = 1) {
         const resolvedKeyframes = keyframes.filter(isNotNull);
@@ -2782,15 +2771,6 @@
         "transform",
         "backgroundColor",
     ]);
-    function hasIndependentTransform(values) {
-        if (!values)
-            return false;
-        for (const key in values) {
-            if (transformProps.has(key))
-                return true;
-        }
-        return false;
-    }
 
     const browserColorFunctions = /^(?:oklch|oklab|lab|lch|color|color-mix|light-dark)\(/;
     function hasBrowserOnlyColors(keyframes) {
@@ -2830,8 +2810,7 @@
             !(subject instanceof SVGElement)) {
             return false;
         }
-        const owner = motionValue.owner;
-        const { onUpdate, transformTemplate } = owner.getProps();
+        const { onUpdate, transformTemplate } = motionValue.owner.getProps();
         return (supportsWaapi() &&
             name &&
             /**
@@ -2841,9 +2820,7 @@
             (acceleratedValues.has(name) ||
                 (colorProperties.has(name) &&
                     hasBrowserOnlyColors(keyframes))) &&
-            (name !== "transform" ||
-                (!transformTemplate &&
-                    !hasIndependentTransform(owner.latestValues))) &&
+            (name !== "transform" || !transformTemplate) &&
             /**
              * 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.
@@ -3990,6 +3967,7 @@
         return visualElement.props[optimizedAppearDataAttribute];
     }
 
+    const isBrowser$1 = typeof window !== "undefined";
     /**
      * Decide whether we should block this animation. Previously, we achieved this
      * just by checking whether the key was listed in protectedKeys, but this
@@ -4053,7 +4031,7 @@
              * to see if we're handling off from an existing animation.
              */
             let isHandoff = false;
-            if (window.MotionHandoffAnimation) {
+            if (isBrowser$1 && window.MotionHandoffAnimation) {
                 const appearId = getOptimisedAppearId(visualElement);
                 if (appearId) {
                     const startTime = window.MotionHandoffAnimation(appearId, key, frame);
@@ -4623,6 +4601,47 @@
         return true;
     });
 
+    /**
+     * Effects registered via `animate.addEffect()`, most recent first.
+     */
+    const effects = [];
+    function addEffect(effect) {
+        exports.invariant(typeof effect.test === "function" && typeof effect.read === "function", "Effects passed to animate.addEffect() need test() and read().", "effect-missing-test");
+        removeEffect(effect);
+        effects.unshift(effect);
+    }
+    function removeEffect(effect) {
+        removeItem(effects, effect);
+    }
+    function findEffect(subject) {
+        return effects.find((effect) => effect.test(subject));
+    }
+    /**
+     * Animate the keys of `subject` via `effect`. Motion values are created on
+     * first animation, seeded from `effect.read()` or the first keyframe, and
+     * then bound to the subject via the effect for the rest of its life.
+     */
+    function animateEffectSubject(effect, subject, keyframes, transition = {}) {
+        const animations = [];
+        for (const key in keyframes) {
+            const target = keyframes[key];
+            let value = effect.get(subject, key);
+            if (!value) {
+                const initial = effect.read(subject, key, target) ?? firstKeyframe(target);
+                exports.invariant(initial !== undefined, `"${key}" can't be read from the animated subject. Provide [from, to] keyframes.`, "effect-unreadable-value");
+                value = motionValue(initial);
+                effect(subject, { [key]: value });
+            }
+            value.start(animateMotionValue(key, value, target, getValueTransition$1(transition, key)));
+            value.animation && animations.push(value.animation);
+        }
+        return animations;
+    }
+    function firstKeyframe(target) {
+        const first = Array.isArray(target) ? target[0] : undefined;
+        return first === null ? undefined : first;
+    }
+
     function resolveElements(elementOrSelector, scope, selectorCache) {
         if (elementOrSelector == null) {
             return [];
@@ -4667,7 +4686,13 @@
     };
 
     class MotionValueState {
-        constructor() {
+        /**
+         * @param step - The frameloop step renders are scheduled in. Defaults
+         * to `frame.render`. Effects that feed a render loop running in
+         * `frame.render` (GPU scenes) should write in `frame.preRender`.
+         */
+        constructor(step = frame.render) {
+            this.step = step;
             this.latest = {};
             this.values = new Map();
         }
@@ -4684,7 +4709,7 @@
                 else {
                     this.latest[name] = v;
                 }
-                render && frame.render(render);
+                render && this.step(render);
             };
             onChange();
             const cancelOnChange = value.on("change", onChange);
@@ -4703,10 +4728,10 @@
         }
     }
 
-    function createEffect(addValue) {
+    function createEffect(addValue, { step, ...options } = {}) {
         const stateCache = new WeakMap();
-        return (subject, values) => {
-            const state = stateCache.get(subject) ?? new MotionValueState();
+        const effect = (subject, values) => {
+            const state = stateCache.get(subject) ?? new MotionValueState(step);
             stateCache.set(subject, state);
             const subscriptions = [];
             for (const key in values) {
@@ -4719,6 +4744,9 @@
                     cancel();
             };
         };
+        return Object.assign(effect, options, {
+            get: (subject, key) => stateCache.get(subject)?.get(key),
+        });
     }
 
     function canSetAsProperty(element, name) {
@@ -4814,37 +4842,25 @@
             ? `${pathRotation}deg`
             : pathRotation}) `;
         }
-        const userTransform = state.latest.transform;
-        if (userTransform && userTransform !== "none") {
-            transformIsDefault = false;
-            transform += userTransform;
-        }
         return transformIsDefault ? "none" : transform.trim();
     }
 
     const originProps = new Set(["originX", "originY", "originZ"]);
-    /**
-     * Internal key for the computed transform channel. The user "transform"
-     * value now composes into this channel, so it can't share the "transform"
-     * key. Prefixed with $ so it can never collide with a real style key
-     * (like "transformStyle", which is the transform-style CSS property).
-     */
-    const computedTransform = "$transform";
     const addStyleValue = (element, state, key, value) => {
         let render = undefined;
         let computed = undefined;
-        if (transformProps.has(key) || key === "transform") {
-            if (!state.get(computedTransform)) {
+        if (transformProps.has(key)) {
+            if (!state.get("transform")) {
                 // If this is an HTML element, we need to set the transform-box to fill-box
                 // to normalise the transform relative to the element's bounding box
                 if (!isHTMLElement(element) && !state.get("transformBox")) {
                     addStyleValue(element, state, "transformBox", new MotionValue("fill-box"));
                 }
-                state.set(computedTransform, new MotionValue("none"), () => {
+                state.set("transform", new MotionValue("none"), () => {
                     element.style.transform = buildTransform$1(state);
                 });
             }
-            computed = state.get(computedTransform);
+            computed = state.get("transform");
         }
         else if (originProps.has(key)) {
             if (!state.get("transformOrigin")) {
@@ -7119,10 +7135,7 @@
             }
             if (value.accelerate &&
                 acceleratedValues.has(key) &&
-                this.current instanceof HTMLElement &&
-                (key !== "transform" ||
-                    (!this.props.transformTemplate &&
-                        !hasIndependentTransform(this.latestValues)))) {
+                this.current instanceof HTMLElement) {
                 const { factory, keyframes, times, ease, duration } = value.accelerate;
                 const animation = new NativeAnimation({
                     element: this.current,
@@ -7517,12 +7530,6 @@
             values.skewX ||
             values.skewY);
     }
-    function hasVisualTransform(values) {
-        return (hasTransform(values) ||
-            (values.transform &&
-                values.transform !== "none" &&
-                values.transform !== ""));
-    }
     function has2DTranslate(values) {
         return is2DTranslate(values.x) || is2DTranslate(values.y);
     }
@@ -7717,11 +7724,6 @@
             transformIsDefault = false;
             transformString += `rotate(${getValueAsType(pathRotation, numberValueTypes.pathRotation)}) `;
         }
-        const userTransform = latestValues.transform;
-        if (userTransform && userTransform !== "none") {
-            transformIsDefault = false;
-            transformString += userTransform;
-        }
         transformString = transformString.trim();
         // If we have a custom `transform` template, pass our transform values and
         // generated transformString to that before returning
@@ -7747,7 +7749,7 @@
          */
         for (const key in latestValues) {
             const value = latestValues[key];
-            if (transformProps.has(key) || key === "transform") {
+            if (transformProps.has(key)) {
                 // If this is a transform, flag to enable further transform processing
                 hasTransform = true;
                 continue;
@@ -7770,15 +7772,17 @@
                 }
             }
         }
-        if (hasTransform || transformTemplate) {
-            style.transform = buildTransform(latestValues, state.transform, transformTemplate);
-        }
-        else if (style.transform) {
-            /**
-             * If we have previously created a transform but currently don't have any,
-             * reset transform style to none.
-             */
-            style.transform = "none";
+        if (!latestValues.transform) {
+            if (hasTransform || transformTemplate) {
+                style.transform = buildTransform(latestValues, state.transform, transformTemplate);
+            }
+            else if (style.transform) {
+                /**
+                 * If we have previously created a transform but currently don't have any,
+                 * reset transform style to none.
+                 */
+                style.transform = "none";
+            }
         }
         /**
          * Build a transformOrigin style. Uses the same defaults as the browser for
@@ -8783,7 +8787,7 @@
             transform += `scale(${1 / treeScale.x}, ${1 / treeScale.y}) `;
         }
         if (latestTransform) {
-            const { transformPerspective, rotate, pathRotation, rotateX, rotateY, skewX, skewY, transform: userTransform, } = latestTransform;
+            const { transformPerspective, rotate, pathRotation, rotateX, rotateY, skewX, skewY, } = latestTransform;
             if (transformPerspective)
                 transform = `perspective(${transformPerspective}px) ${transform}`;
             if (rotate)
@@ -8799,8 +8803,6 @@
                 transform += `skewX(${skewX}deg) `;
             if (skewY)
                 transform += `skewY(${skewY}deg) `;
-            if (userTransform && userTransform !== "none")
-                transform += `${userTransform} `;
         }
         /**
          * Apply scale to match the size of the element to the size we want it.
@@ -9044,14 +9046,14 @@
      */
     const animationTarget = 1000;
     let id = 0;
-    function resetDistortingTransform(key, visualElement, values, sharedAnimationValues, resetValue = 0) {
+    function resetDistortingTransform(key, visualElement, values, sharedAnimationValues) {
         const { latestValues } = visualElement;
-        // Record the distorting transform and then temporarily reset it
+        // Record the distorting transform and then temporarily set it to 0
         if (latestValues[key]) {
             values[key] = latestValues[key];
-            visualElement.setStaticValue(key, resetValue);
+            visualElement.setStaticValue(key, 0);
             if (sharedAnimationValues) {
-                sharedAnimationValues[key] = resetValue;
+                sharedAnimationValues[key] = 0;
             }
         }
     }
@@ -9630,7 +9632,7 @@
                 if (isResetRequested &&
                     this.instance &&
                     (hasProjection ||
-                        hasVisualTransform(this.latestValues) ||
+                        hasTransform(this.latestValues) ||
                         transformTemplateHasChanged)) {
                     resetTransform(this.instance, transformTemplateValue);
                     this.shouldResetTransform = false;
@@ -10298,8 +10300,7 @@
                     latestValues.rotateY ||
                     latestValues.rotateZ ||
                     latestValues.skewX ||
-                    latestValues.skewY ||
-                    (latestValues.transform && latestValues.transform !== "none")) {
+                    latestValues.skewY) {
                     hasDistortingTransform = true;
                 }
                 // If there's no distorting values, we don't need to do any more.
@@ -10309,9 +10310,6 @@
                 if (latestValues.z) {
                     resetDistortingTransform("z", visualElement, resetValues, this.animationValues);
                 }
-                if (latestValues.transform && latestValues.transform !== "none") {
-                    resetDistortingTransform("transform", visualElement, resetValues, this.animationValues, "none");
-                }
                 // Check the skew and rotate value of all axes and reset to 0
                 for (let i = 0; i < transformAxes.length; i++) {
                     resetDistortingTransform(`rotate${transformAxes[i]}`, visualElement, resetValues, this.animationValues);
@@ -10361,8 +10359,7 @@
                         targetStyle.pointerEvents =
                             resolveMotionValue(styleProp?.pointerEvents) || "";
                     }
-                    if (this.hasProjected &&
-                        !hasVisualTransform(this.latestValues)) {
+                    if (this.hasProjected && !hasTransform(this.latestValues)) {
                         targetStyle.transform = transformTemplate
                             ? transformTemplate({}, "")
                             : "none";
@@ -11575,13 +11572,6 @@
             exports.invariant(Boolean(numSubjects), "No valid elements provided.", "no-valid-elements");
             for (let i = 0; i < numSubjects; i++) {
                 const thisSubject = subjects[i];
-                const createVisualElement = thisSubject instanceof Element
-                    ? createDOMVisualElement
-                    : createObjectVisualElement;
-                if (!visualElementStore.has(thisSubject)) {
-                    createVisualElement(thisSubject);
-                }
-                const visualElement = visualElementStore.get(thisSubject);
                 const transition = { ...options };
                 /**
                  * Resolve stagger function if provided.
@@ -11590,6 +11580,23 @@
                     typeof transition.delay === "function") {
                     transition.delay = transition.delay(i, numSubjects);
                 }
+                const isElement = thisSubject instanceof Element;
+                /**
+                 * Registered effects (animate.addEffect) claim non-DOM subjects
+                 * before we fall back to treating them as plain objects.
+                 */
+                const effect = isElement ? undefined : findEffect(thisSubject);
+                if (effect) {
+                    animations.push(...animateEffectSubject(effect, thisSubject, keyframes, transition));
+                    continue;
+                }
+                const createVisualElement = isElement
+                    ? createDOMVisualElement
+                    : createObjectVisualElement;
+                if (!visualElementStore.has(thisSubject)) {
+                    createVisualElement(thisSubject);
+                }
+                const visualElement = visualElementStore.get(thisSubject);
                 animations.push(...animateTarget(visualElement, { ...keyframes, transition }, {}));
             }
         }
@@ -11675,7 +11682,16 @@
         }
         return scopedAnimate;
     }
-    const animate = createScopedAnimate();
+    const animate = Object.assign(createScopedAnimate(), {
+        /**
+         * Register an effect so `animate()` can animate the subjects it
+         * claims, for instance `animate.addEffect(threeEffect)`. The most
+         * recently added effect is tested first. DOM elements are always
+         * animated directly.
+         */
+        addEffect,
+        removeEffect,
+    });
 
     function animateElements(elementOrSelector, keyframes, options, scope) {
         // Gracefully handle null/undefined elements (e.g., from querySelector returning null)
@@ -12450,6 +12466,7 @@
     exports.LayoutAnimationBuilder = LayoutAnimationBuilder;
     exports.MotionGlobalConfig = MotionGlobalConfig;
     exports.MotionValue = MotionValue;
+    exports.MotionValueState = MotionValueState;
     exports.NativeAnimation = NativeAnimation;
     exports.NativeAnimationExtended = NativeAnimationExtended;
     exports.NativeAnimationWrapper = NativeAnimationWrapper;
@@ -12462,6 +12479,7 @@
     exports.acceleratedValues = acceleratedValues;
     exports.addAttrValue = addAttrValue;
     exports.addDomEvent = addDomEvent;
+    exports.addEffect = addEffect;
     exports.addScaleCorrector = addScaleCorrector;
     exports.addStyleValue = addStyleValue;
     exports.addUniqueItem = addUniqueItem;
@@ -12469,6 +12487,7 @@
     exports.alpha = alpha;
     exports.analyseComplexValue = analyseComplexValue;
     exports.animate = animate;
+    exports.animateEffectSubject = animateEffectSubject;
     exports.animateMini = animateMini;
     exports.animateMotionValue = animateMotionValue;
     exports.animateSingleValue = animateSingleValue;
@@ -12541,6 +12560,7 @@
     exports.createAxisDelta = createAxisDelta;
     exports.createBox = createBox;
     exports.createDelta = createDelta;
+    exports.createEffect = createEffect;
     exports.createGeneratorEasing = createGeneratorEasing;
     exports.createProjectionNode = createProjectionNode;
     exports.createRenderBatcher = createRenderBatcher;
@@ -12565,6 +12585,7 @@
     exports.fillOffset = fillOffset;
     exports.fillWildcards = fillWildcards;
     exports.findDimensionValueType = findDimensionValueType;
+    exports.findEffect = findEffect;
     exports.findValueType = findValueType;
     exports.flushKeyframeResolvers = flushKeyframeResolvers;
     exports.followValue = followValue;
@@ -12591,7 +12612,6 @@
     exports.getViewAnimations = getViewAnimations;
     exports.globalProjectionState = globalProjectionState;
     exports.has2DTranslate = has2DTranslate;
-    exports.hasIndependentTransform = hasIndependentTransform;
     exports.hasReducedMotionListener = hasReducedMotionListener;
     exports.hasScale = hasScale;
     exports.hasTransform = hasTransform;
@@ -12684,6 +12704,7 @@
     exports.removeAxisDelta = removeAxisDelta;
     exports.removeAxisTransforms = removeAxisTransforms;
     exports.removeBoxTransforms = removeBoxTransforms;
+    exports.removeEffect = removeEffect;
     exports.removeItem = removeItem;
     exports.removePointDelta = removePointDelta;
     exports.renderHTML = renderHTML;