framer-motion 12.23.2 → 12.23.5

package/dist/framer-motion.dev.js

@@ -2688,14 +2688,6 @@
             ((type === "spring" || isGenerator(type)) && velocity));
     }
 
-    /**
-     * Checks if an element is an HTML element in a way
-     * that works across iframes
-     */
-    function isHTMLElement(element) {
-        return isObject(element) && "offsetHeight" in element;
-    }
-
     /**
      * A list of values that can be hardware-accelerated.
      */
@@ -2710,7 +2702,14 @@
     const supportsWaapi = /*@__PURE__*/ memo(() => Object.hasOwnProperty.call(Element.prototype, "animate"));
     function supportsBrowserAnimation(options) {
         const { motionValue, name, repeatDelay, repeatType, damping, type } = options;
-        if (!isHTMLElement(motionValue?.owner?.current)) {
+        const subject = motionValue?.owner?.current;
+        /**
+         * We use this check instead of isHTMLElement() because we explicitly
+         * **don't** want elements in different timing contexts (i.e. popups)
+         * to be accelerated, as it's not possible to sync these animations
+         * properly with those driven from the main window frameloop.
+         */
+        if (!(subject instanceof HTMLElement)) {
             return false;
         }
         const { onUpdate, transformTemplate } = motionValue.owner.getProps();
@@ -3583,6 +3582,14 @@
         }, undefined, false);
     });
 
+    /**
+     * Checks if an element is an HTML element in a way
+     * that works across iframes
+     */
+    function isHTMLElement(element) {
+        return isObject(element) && "offsetHeight" in element;
+    }
+
     /**
      * Maximum time between the value of two frames, beyond which we
      * assume the velocity has since been 0.
@@ -12340,6 +12347,7 @@
             exports.invariant(Boolean(numSubjects), "No valid elements provided.", "no-valid-elements");
             for (let i = 0; i < numSubjects; i++) {
                 const thisSubject = subjects[i];
+                exports.invariant(thisSubject !== null, "You're trying to perform an animation on null. Ensure that selectors are correctly finding elements and refs are correctly hydrated.", "animate-null");
                 const createVisualElement = thisSubject instanceof Element
                     ? createDOMVisualElement
                     : createObjectVisualElement;
@@ -13022,24 +13030,23 @@
         React$1.useInsertionEffect(() => value.on(event, callback), [value, event, callback]);
     }
 
-    function refWarning(name, ref) {
-        exports.warning(Boolean(!ref || ref.current), `You have defined a ${name} options but the provided ref is not yet hydrated, probably because it's defined higher up the tree. Try calling useScroll() in the same component as the ref, or setting its \`layoutEffect: false\` option.`);
-    }
     const createScrollMotionValues = () => ({
         scrollX: motionValue(0),
         scrollY: motionValue(0),
         scrollXProgress: motionValue(0),
         scrollYProgress: motionValue(0),
     });
-    function useScroll({ container, target, layoutEffect = true, ...options } = {}) {
+    const isRefPending = (ref) => {
+        if (!ref)
+            return false;
+        return !ref.current;
+    };
+    function useScroll({ container, target, ...options } = {}) {
         const values = useConstant(createScrollMotionValues);
-        const useLifecycleEffect = layoutEffect
-            ? useIsomorphicLayoutEffect
-            : React$1.useEffect;
-        useLifecycleEffect(() => {
-            refWarning("target", target);
-            refWarning("container", container);
-            return scroll((_progress, { x, y, }) => {
+        const scrollAnimation = React$1.useRef(null);
+        const needsStart = React$1.useRef(false);
+        const start = React$1.useCallback(() => {
+            scrollAnimation.current = scroll((_progress, { x, y, }) => {
                 values.scrollX.set(x.current);
                 values.scrollXProgress.set(x.progress);
                 values.scrollY.set(y.current);
@@ -13049,7 +13056,30 @@
                 container: container?.current || undefined,
                 target: target?.current || undefined,
             });
+            return () => {
+                scrollAnimation.current?.();
+            };
         }, [container, target, JSON.stringify(options.offset)]);
+        useIsomorphicLayoutEffect(() => {
+            needsStart.current = false;
+            if (isRefPending(container) || isRefPending(target)) {
+                needsStart.current = true;
+                return;
+            }
+            else {
+                return start();
+            }
+        }, [start]);
+        React$1.useEffect(() => {
+            if (needsStart.current) {
+                exports.invariant(!isRefPending(container), "Container ref is defined but not hydrated", "use-scroll-ref");
+                exports.invariant(!isRefPending(target), "Target ref is defined but not hydrated", "use-scroll-ref");
+                return start();
+            }
+            else {
+                return;
+            }
+        }, [start]);
         return values;
     }