framer-motion 8.4.4 → 8.4.6

package/dist/framer-motion.dev.js

@@ -79,11 +79,19 @@
             visualElement && visualElement.render();
         });
         /**
-         * If we have optimised appear animations to handoff from, trigger animateChanges
-         * from a synchronous useLayoutEffect to ensure there's no flash of incorrectly
-         * styled component in the event of a hydration error.
+         * Ideally this function would always run in a useEffect.
+         *
+         * However, if we have optimised appear animations to handoff from,
+         * it needs to happen synchronously to ensure there's no flash of
+         * incorrect styles in the event of a hydration error.
+         *
+         * So if we detect a situtation where optimised appear animations
+         * are running, we use useLayoutEffect to trigger animations.
          */
-        useIsomorphicLayoutEffect(() => {
+        const useAnimateChangesEffect = window.MotionAppearAnimations
+            ? useIsomorphicLayoutEffect
+            : React.useEffect;
+        useAnimateChangesEffect(() => {
             if (visualElement && visualElement.animationState) {
                 visualElement.animationState.animateChanges();
             }
@@ -1463,14 +1471,14 @@
         return false;
     }
 
-    function createHoverEvent(visualElement, isActive, callback) {
+    function createHoverEvent(visualElement, isActive, applyVariants, callback) {
         return (event, info) => {
             if (event.type === "touch" || isDragActive())
                 return;
             /**
              * Ensure we trigger animations before firing event callback
              */
-            if (visualElement.animationState) {
+            if (applyVariants && visualElement.animationState) {
                 visualElement.animationState.setActive(exports.AnimationType.Hover, isActive);
             }
             callback && callback(event, info);
@@ -1479,12 +1487,12 @@
     function useHoverGesture({ onHoverStart, onHoverEnd, whileHover, visualElement, }) {
         usePointerEvent(visualElement, "pointerenter", React.useMemo(() => {
             return onHoverStart || whileHover
-                ? createHoverEvent(visualElement, true, onHoverStart)
+                ? createHoverEvent(visualElement, true, Boolean(whileHover), onHoverStart)
                 : undefined;
         }, [onHoverStart, Boolean(whileHover), visualElement]), { passive: !onHoverStart });
         usePointerEvent(visualElement, "pointerleave", React.useMemo(() => {
             return onHoverEnd || whileHover
-                ? createHoverEvent(visualElement, false, onHoverEnd)
+                ? createHoverEvent(visualElement, false, Boolean(whileHover), onHoverEnd)
                 : undefined;
         }, [onHoverStart, Boolean(whileHover), visualElement]), { passive: !onHoverEnd });
     }
@@ -1546,8 +1554,10 @@
         function checkPointerEnd() {
             removePointerEndListener();
             isPressing.current = false;
-            visualElement.animationState &&
+            const latestProps = visualElement.getProps();
+            if (latestProps.whileTap && visualElement.animationState) {
                 visualElement.animationState.setActive(exports.AnimationType.Tap, false);
+            }
             return !isDragActive();
         }
         function onPointerUp(event, info) {
@@ -1569,18 +1579,20 @@
             (_b = (_a = visualElement.getProps()).onTapCancel) === null || _b === void 0 ? void 0 : _b.call(_a, event, info);
         }
         const startPress = React.useCallback((event, info) => {
-            var _a, _b;
+            var _a;
             removePointerEndListener();
             if (isPressing.current)
                 return;
             isPressing.current = true;
             cancelPointerEndListeners.current = pipe(addPointerEvent(window, "pointerup", onPointerUp, eventOptions), addPointerEvent(window, "pointercancel", onPointerCancel, eventOptions));
+            const latestProps = visualElement.getProps();
             /**
              * Ensure we trigger animations before firing event callback
              */
-            visualElement.animationState &&
+            if (latestProps.whileTap && visualElement.animationState) {
                 visualElement.animationState.setActive(exports.AnimationType.Tap, true);
-            (_b = (_a = visualElement.getProps()).onTapStart) === null || _b === void 0 ? void 0 : _b.call(_a, event, info);
+            }
+            (_a = latestProps.onTapStart) === null || _a === void 0 ? void 0 : _a.call(latestProps, event, info);
         }, [Boolean(onTapStart), visualElement]);
         usePointerEvent(visualElement, "pointerdown", hasPressListeners ? startPress : undefined, eventOptions);
         useUnmountEffect(removePointerEndListener);
@@ -2079,7 +2091,7 @@
              * This will be replaced by the build step with the latest version number.
              * When MotionValues are provided to motion components, warn if versions are mixed.
              */
-            this.version = "8.4.4";
+            this.version = "8.4.6";
             /**
              * Duration, in milliseconds, since last updating frame.
              *
@@ -2318,11 +2330,11 @@
          *
          * @internal
          */
-        start(animation) {
+        start(startAnimation) {
             this.stop();
             return new Promise((resolve) => {
                 this.hasAnimated = true;
-                this.stopAnimation = animation(resolve);
+                this.animation = startAnimation(resolve) || null;
                 if (this.events.animationStart) {
                     this.events.animationStart.notify();
                 }
@@ -2339,8 +2351,8 @@
          * @public
          */
         stop() {
-            if (this.stopAnimation) {
-                this.stopAnimation();
+            if (this.animation) {
+                this.animation.stop();
                 if (this.events.animationCancel) {
                     this.events.animationCancel.notify();
                 }
@@ -2353,10 +2365,10 @@
          * @public
          */
         isAnimating() {
-            return !!this.stopAnimation;
+            return !!this.animation;
         }
         clearAnimation() {
-            this.stopAnimation = null;
+            this.animation = null;
         }
         /**
          * Destroy and clean up subscribers to this `MotionValue`.
@@ -2775,11 +2787,28 @@
 
     const appearStoreId = (id, value) => `${id}: ${value}`;
 
-    function handoffOptimizedAppearAnimation(id, name) {
+    function handoffOptimizedAppearAnimation(id, name, value) {
         const { MotionAppearAnimations } = window;
         const animationId = appearStoreId(id, transformProps.has(name) ? "transform" : name);
         const animation = MotionAppearAnimations && MotionAppearAnimations.get(animationId);
         if (animation) {
+            const sampledTime = performance.now();
+            /**
+             * Resync handoff animation with optimised animation.
+             *
+             * This step would be unnecessary if we triggered animateChanges() in useEffect,
+             * but due to potential hydration errors we currently fire them in useLayoutEffect.
+             *
+             * By the time we're safely ready to cancel the optimised WAAPI animation,
+             * the main thread might have been blocked and desynced the two animations.
+             *
+             * Here, we resync the two animations before the optimised WAAPI animation is cancelled.
+             */
+            sync.update(() => {
+                if (value.animation) {
+                    value.animation.currentTime = performance.now() - sampledTime;
+                }
+            });
             /**
              * We allow the animation to persist until the next frame:
              *   1. So it continues to play until Framer Motion is ready to render
@@ -2788,12 +2817,12 @@
              *      it synchronously would prevent subsequent transforms from handing off.
              */
             sync.render(() => {
+                MotionAppearAnimations.delete(animationId);
                 /**
                  * Animation.cancel() throws so it needs to be wrapped in a try/catch
                  */
                 try {
                     animation.cancel();
-                    MotionAppearAnimations.delete(animationId);
                 }
                 catch (e) { }
             });
@@ -3594,6 +3623,25 @@
                 onStop && onStop();
                 driverControls && driverControls.stop();
             },
+            /**
+             * Set the current time of the animation. This is purposefully
+             * mirroring the WAAPI animation API to make them interchanagable.
+             * Going forward this file should be ported more towards
+             * https://github.com/motiondivision/motionone/blob/main/packages/animation/src/Animation.ts
+             * Which behaviourally adheres to WAAPI as far as possible.
+             *
+             * WARNING: This is not safe to use for most animations. We currently
+             * only use it for handoff from WAAPI within Framer.
+             *
+             * This animation function consumes time every frame rather than being sampled for time.
+             * So the sample() method performs some headless frames to ensure
+             * repeats are handled correctly. Ideally in the future we will replace
+             * that method with this, once repeat calculations are pure.
+             */
+            set currentTime(t) {
+                elapsed = initialElapsed;
+                update(t);
+            },
             /**
              * animate() can't yet be sampled for time, instead it
              * consumes time. So to sample it we have to run a low
@@ -3750,21 +3798,29 @@
         /**
          * Animation interrupt callback.
          */
-        return () => {
-            /**
-             * WAAPI doesn't natively have any interruption capabilities.
-             *
-             * Rather than read commited styles back out of the DOM, we can
-             * create a renderless JS animation and sample it twice to calculate
-             * its current value, "previous" value, and therefore allow
-             * Motion to calculate velocity for any subsequent animation.
-             */
-            const { currentTime } = animation;
-            if (currentTime) {
-                const sampleAnimation = animate$1({ ...options, autoplay: false });
-                value.setWithVelocity(sampleAnimation.sample(currentTime - sampleDelta).value, sampleAnimation.sample(currentTime).value, sampleDelta);
-            }
-            sync.update(() => animation.cancel());
+        return {
+            get currentTime() {
+                return animation.currentTime || 0;
+            },
+            set currentTime(t) {
+                animation.currentTime = t;
+            },
+            stop: () => {
+                /**
+                 * WAAPI doesn't natively have any interruption capabilities.
+                 *
+                 * Rather than read commited styles back out of the DOM, we can
+                 * create a renderless JS animation and sample it twice to calculate
+                 * its current value, "previous" value, and therefore allow
+                 * Motion to calculate velocity for any subsequent animation.
+                 */
+                const { currentTime } = animation;
+                if (currentTime) {
+                    const sampleAnimation = animate$1({ ...options, autoplay: false });
+                    value.setWithVelocity(sampleAnimation.sample(currentTime - sampleDelta).value, sampleAnimation.sample(currentTime).value, sampleDelta);
+                }
+                sync.update(() => animation.cancel());
+            },
         };
     }
 
@@ -3788,9 +3844,8 @@
         const setValue = () => {
             onUpdate && onUpdate(keyframes[keyframes.length - 1]);
             onComplete && onComplete();
-            return () => { };
         };
-        return elapsed ? delay(setValue, -elapsed) : setValue();
+        return elapsed ? { stop: delay(setValue, -elapsed) } : setValue();
     }
 
     function inertia({ keyframes, velocity = 0, min, max, power = 0.8, timeConstant = 750, bounceStiffness = 500, bounceDamping = 10, restDelta = 1, modifyTarget, driver, onUpdate, onComplete, onStop, }) {
@@ -4067,8 +4122,7 @@
                  * If this is an inertia animation, we currently don't support pre-generating
                  * keyframes for this as such it must always run on the main thread.
                  */
-                const animation = inertia(options);
-                return () => animation.stop();
+                return inertia(options);
             }
             /**
              * If there's no transition defined for this value, we can generate
@@ -4106,8 +4160,7 @@
             /**
              * If we didn't create an accelerated animation, create a JS animation
              */
-            const animation = animate$1(options);
-            return () => animation.stop();
+            return animate$1(options);
         };
     };
 
@@ -4196,7 +4249,7 @@
             if (!value.hasAnimated) {
                 const appearId = visualElement.getProps()[optimizedAppearDataAttribute];
                 if (appearId) {
-                    valueTransition.elapsed = handoffOptimizedAppearAnimation(appearId, key);
+                    valueTransition.elapsed = handoffOptimizedAppearAnimation(appearId, key, value);
                 }
             }
             let animation = value.start(createMotionValueAnimation(key, value, valueTarget, visualElement.shouldReduceMotion && transformProps.has(key)
@@ -5946,7 +5999,7 @@
                  * and warn against mismatches.
                  */
                 {
-                    warnOnce(nextValue.version === "8.4.4", `Attempting to mix Framer Motion versions ${nextValue.version} with 8.4.4 may not work as expected.`);
+                    warnOnce(nextValue.version === "8.4.6", `Attempting to mix Framer Motion versions ${nextValue.version} with 8.4.6 may not work as expected.`);
                 }
             }
             else if (isMotionValue(prevValue)) {
@@ -5972,7 +6025,7 @@
                 }
                 else {
                     const latestValue = element.getStaticValue(key);
-                    element.addValue(key, motionValue(latestValue !== undefined ? latestValue : nextValue));
+                    element.addValue(key, motionValue(latestValue !== undefined ? latestValue : nextValue, { owner: element }));
                 }
             }
         }