framer-motion 10.0.0 → 10.0.2

package/dist/cjs/index.js

@@ -37,9 +37,6 @@ const MotionConfigContext = React.createContext({
 });
 
 const MotionContext = React.createContext({});
-function useVisualElementContext() {
-    return React.useContext(MotionContext).visualElement;
-}
 
 /**
  * @public
@@ -53,7 +50,7 @@ const useIsomorphicLayoutEffect = isBrowser ? React.useLayoutEffect : React.useE
 const LazyContext = React.createContext({ strict: false });
 
 function useVisualElement(Component, visualState, props, createVisualElement) {
-    const parent = useVisualElementContext();
+    const { visualElement: parent } = React.useContext(MotionContext);
     const lazyContext = React.useContext(LazyContext);
     const presenceContext = React.useContext(PresenceContext);
     const reducedMotionConfig = React.useContext(MotionConfigContext).reducedMotion;
@@ -193,13 +190,13 @@ function variantLabelsAsDependency(prop) {
 const featureProps = {
     animation: [
         "animate",
-        "exit",
         "variants",
         "whileHover",
         "whileTap",
+        "exit",
+        "whileInView",
         "whileFocus",
         "whileDrag",
-        "whileInView",
     ],
     exit: ["exit"],
     drag: ["drag", "dragControls"],
@@ -1987,7 +1984,7 @@ class MotionValue {
          * This will be replaced by the build step with the latest version number.
          * When MotionValues are provided to motion components, warn if versions are mixed.
          */
-        this.version = "10.0.0";
+        this.version = "10.0.2";
         /**
          * Duration, in milliseconds, since last updating frame.
          *
@@ -3519,9 +3516,19 @@ function animateValue({ duration, driver = framesync, elapsed = 0, repeat: repea
          * animate() can't yet be sampled for time, instead it
          * consumes time. So to sample it we have to run a low
          * temporal-resolution version.
+         *
+         * isControlled should be set to true if sample is being run within
+         * a loop. This indicates that we're not arbitrarily sampling
+         * the animation but running it one step after another. Therefore
+         * we don't need to run a low-res version here. This is a stop-gap
+         * until a rewrite can sample for time.
          */
-        sample: (t) => {
+        sample: (t, isControlled = false) => {
             elapsed = initialElapsed;
+            if (isControlled) {
+                update(t);
+                return state;
+            }
             const sampleResolution = duration && typeof duration === "number"
                 ? Math.max(duration * 0.5, 50)
                 : 50;
@@ -3563,7 +3570,10 @@ function mapEasingToNativeEasing(easing) {
 }
 
 function animateStyle(element, valueName, keyframes, { delay = 0, duration, repeat = 0, repeatType = "loop", ease, times, } = {}) {
-    return element.animate({ [valueName]: keyframes, offset: times }, {
+    const keyframeOptions = { [valueName]: keyframes };
+    if (times)
+        keyframeOptions.offset = times;
+    return element.animate(keyframeOptions, {
         delay,
         duration,
         easing: mapEasingToNativeEasing(ease),
@@ -3641,7 +3651,7 @@ function createAcceleratedAnimation(value, valueName, { onUpdate, onComplete, ..
          */
         let t = 0;
         while (!state.done && t < 20000) {
-            state = sampleAnimation.sample(t);
+            state = sampleAnimation.sample(t, true);
             pregeneratedKeyframes.push(state.value);
             t += sampleDelta;
         }
@@ -7830,7 +7840,7 @@ function updateMotionValuesFromProps(element, next, prev) {
              * and warn against mismatches.
              */
             if (process.env.NODE_ENV === "development") {
-                warnOnce(nextValue.version === "10.0.0", `Attempting to mix Framer Motion versions ${nextValue.version} with 10.0.0 may not work as expected.`);
+                warnOnce(nextValue.version === "10.0.2", `Attempting to mix Framer Motion versions ${nextValue.version} with 10.0.2 may not work as expected.`);
             }
         }
         else if (isMotionValue(prevValue)) {
@@ -10639,7 +10649,7 @@ let hasWarned = false;
 function useInvertedScale(scale) {
     let parentScaleX = useMotionValue(1);
     let parentScaleY = useMotionValue(1);
-    const visualElement = useVisualElementContext();
+    const { visualElement } = React.useContext(MotionContext);
     exports.invariant(!!(scale || visualElement), "If no scale values are provided, useInvertedScale must be used within a child of another motion component.");
     exports.warning(hasWarned, "useInvertedScale is deprecated and will be removed in 3.0. Use the layout prop instead.");
     hasWarned = true;
@@ -10766,6 +10776,5 @@ exports.useTransform = useTransform;
 exports.useUnmountEffect = useUnmountEffect;
 exports.useVelocity = useVelocity;
 exports.useViewportScroll = useViewportScroll;
-exports.useVisualElementContext = useVisualElementContext;
 exports.useWillChange = useWillChange;
 exports.wrap = wrap;

package/dist/es/animation/legacy-popmotion/index.mjs

@@ -132,9 +132,19 @@ function animateValue({ duration, driver = framesync, elapsed = 0, repeat: repea
          * animate() can't yet be sampled for time, instead it
          * consumes time. So to sample it we have to run a low
          * temporal-resolution version.
+         *
+         * isControlled should be set to true if sample is being run within
+         * a loop. This indicates that we're not arbitrarily sampling
+         * the animation but running it one step after another. Therefore
+         * we don't need to run a low-res version here. This is a stop-gap
+         * until a rewrite can sample for time.
          */
-        sample: (t) => {
+        sample: (t, isControlled = false) => {
             elapsed = initialElapsed;
+            if (isControlled) {
+                update(t);
+                return state;
+            }
             const sampleResolution = duration && typeof duration === "number"
                 ? Math.max(duration * 0.5, 50)
                 : 50;

package/dist/es/animation/waapi/create-accelerated-animation.mjs

@@ -50,7 +50,7 @@ function createAcceleratedAnimation(value, valueName, { onUpdate, onComplete, ..
          */
         let t = 0;
         while (!state.done && t < 20000) {
-            state = sampleAnimation.sample(t);
+            state = sampleAnimation.sample(t, true);
             pregeneratedKeyframes.push(state.value);
             t += sampleDelta;
         }

package/dist/es/animation/waapi/index.mjs

@@ -1,7 +1,10 @@
 import { mapEasingToNativeEasing } from './easing.mjs';
 
 function animateStyle(element, valueName, keyframes, { delay = 0, duration, repeat = 0, repeatType = "loop", ease, times, } = {}) {
-    return element.animate({ [valueName]: keyframes, offset: times }, {
+    const keyframeOptions = { [valueName]: keyframes };
+    if (times)
+        keyframeOptions.offset = times;
+    return element.animate(keyframeOptions, {
         delay,
         duration,
         easing: mapEasingToNativeEasing(ease),

package/dist/es/context/MotionContext/index.mjs

@@ -1,8 +1,5 @@
-import { createContext, useContext } from 'react';
+import { createContext } from 'react';
 
 const MotionContext = createContext({});
-function useVisualElementContext() {
-    return useContext(MotionContext).visualElement;
-}
 
-export { MotionContext, useVisualElementContext };
+export { MotionContext };

package/dist/es/index.mjs

@@ -63,7 +63,7 @@ export { px } from './value/types/numbers/units.mjs';
 export { startOptimizedAppearAnimation } from './animation/optimized-appear/start.mjs';
 export { optimizedAppearDataAttribute } from './animation/optimized-appear/data-id.mjs';
 export { spring } from './animation/legacy-popmotion/spring.mjs';
-export { MotionContext, useVisualElementContext } from './context/MotionContext/index.mjs';
+export { MotionContext } from './context/MotionContext/index.mjs';
 export { MotionConfigContext } from './context/MotionConfigContext.mjs';
 export { PresenceContext } from './context/PresenceContext.mjs';
 export { LayoutGroupContext } from './context/LayoutGroupContext.mjs';

package/dist/es/motion/features/definitions.mjs

@@ -1,13 +1,13 @@
 const featureProps = {
     animation: [
         "animate",
-        "exit",
         "variants",
         "whileHover",
         "whileTap",
+        "exit",
+        "whileInView",
         "whileFocus",
         "whileDrag",
-        "whileInView",
     ],
     exit: ["exit"],
     drag: ["drag", "dragControls"],

package/dist/es/motion/utils/use-visual-element.mjs

@@ -1,12 +1,12 @@
 import { useContext, useRef, useInsertionEffect, useEffect } from 'react';
 import { PresenceContext } from '../../context/PresenceContext.mjs';
-import { useVisualElementContext } from '../../context/MotionContext/index.mjs';
+import { MotionContext } from '../../context/MotionContext/index.mjs';
 import { useIsomorphicLayoutEffect } from '../../utils/use-isomorphic-effect.mjs';
 import { LazyContext } from '../../context/LazyContext.mjs';
 import { MotionConfigContext } from '../../context/MotionConfigContext.mjs';
 
 function useVisualElement(Component, visualState, props, createVisualElement) {
-    const parent = useVisualElementContext();
+    const { visualElement: parent } = useContext(MotionContext);
     const lazyContext = useContext(LazyContext);
     const presenceContext = useContext(PresenceContext);
     const reducedMotionConfig = useContext(MotionConfigContext).reducedMotion;

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

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

package/dist/es/value/index.mjs

@@ -26,7 +26,7 @@ class MotionValue {
          * This will be replaced by the build step with the latest version number.
          * When MotionValues are provided to motion components, warn if versions are mixed.
          */
-        this.version = "10.0.0";
+        this.version = "10.0.2";
         /**
          * Duration, in milliseconds, since last updating frame.
          *

package/dist/es/value/use-inverted-scale.mjs

@@ -1,7 +1,8 @@
 import { useTransform } from './use-transform.mjs';
 import { invariant, warning } from '../utils/errors.mjs';
 import { useMotionValue } from './use-motion-value.mjs';
-import { useVisualElementContext } from '../context/MotionContext/index.mjs';
+import { MotionContext } from '../context/MotionContext/index.mjs';
+import { useContext } from 'react';
 
 // Keep things reasonable and avoid scale: Infinity. In practise we might need
 // to add another value, opacity, that could interpolate scaleX/Y [0,0.01] => [0,1]
@@ -31,7 +32,7 @@ let hasWarned = false;
 function useInvertedScale(scale) {
     let parentScaleX = useMotionValue(1);
     let parentScaleY = useMotionValue(1);
-    const visualElement = useVisualElementContext();
+    const { visualElement } = useContext(MotionContext);
     invariant(!!(scale || visualElement), "If no scale values are provided, useInvertedScale must be used within a child of another motion component.");
     warning(hasWarned, "useInvertedScale is deprecated and will be removed in 3.0. Use the layout prop instead.");
     hasWarned = true;

package/dist/framer-motion.dev.js

@@ -37,9 +37,6 @@
     });
 
     const MotionContext = React.createContext({});
-    function useVisualElementContext() {
-        return React.useContext(MotionContext).visualElement;
-    }
 
     /**
      * @public
@@ -53,7 +50,7 @@
     const LazyContext = React.createContext({ strict: false });
 
     function useVisualElement(Component, visualState, props, createVisualElement) {
-        const parent = useVisualElementContext();
+        const { visualElement: parent } = React.useContext(MotionContext);
         const lazyContext = React.useContext(LazyContext);
         const presenceContext = React.useContext(PresenceContext);
         const reducedMotionConfig = React.useContext(MotionConfigContext).reducedMotion;
@@ -193,13 +190,13 @@
     const featureProps = {
         animation: [
             "animate",
-            "exit",
             "variants",
             "whileHover",
             "whileTap",
+            "exit",
+            "whileInView",
             "whileFocus",
             "whileDrag",
-            "whileInView",
         ],
         exit: ["exit"],
         drag: ["drag", "dragControls"],
@@ -1987,7 +1984,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 = "10.0.0";
+            this.version = "10.0.2";
             /**
              * Duration, in milliseconds, since last updating frame.
              *
@@ -3519,9 +3516,19 @@
              * animate() can't yet be sampled for time, instead it
              * consumes time. So to sample it we have to run a low
              * temporal-resolution version.
+             *
+             * isControlled should be set to true if sample is being run within
+             * a loop. This indicates that we're not arbitrarily sampling
+             * the animation but running it one step after another. Therefore
+             * we don't need to run a low-res version here. This is a stop-gap
+             * until a rewrite can sample for time.
              */
-            sample: (t) => {
+            sample: (t, isControlled = false) => {
                 elapsed = initialElapsed;
+                if (isControlled) {
+                    update(t);
+                    return state;
+                }
                 const sampleResolution = duration && typeof duration === "number"
                     ? Math.max(duration * 0.5, 50)
                     : 50;
@@ -3563,7 +3570,10 @@
     }
 
     function animateStyle(element, valueName, keyframes, { delay = 0, duration, repeat = 0, repeatType = "loop", ease, times, } = {}) {
-        return element.animate({ [valueName]: keyframes, offset: times }, {
+        const keyframeOptions = { [valueName]: keyframes };
+        if (times)
+            keyframeOptions.offset = times;
+        return element.animate(keyframeOptions, {
             delay,
             duration,
             easing: mapEasingToNativeEasing(ease),
@@ -3641,7 +3651,7 @@
              */
             let t = 0;
             while (!state.done && t < 20000) {
-                state = sampleAnimation.sample(t);
+                state = sampleAnimation.sample(t, true);
                 pregeneratedKeyframes.push(state.value);
                 t += sampleDelta;
             }
@@ -7830,7 +7840,7 @@
                  * and warn against mismatches.
                  */
                 {
-                    warnOnce(nextValue.version === "10.0.0", `Attempting to mix Framer Motion versions ${nextValue.version} with 10.0.0 may not work as expected.`);
+                    warnOnce(nextValue.version === "10.0.2", `Attempting to mix Framer Motion versions ${nextValue.version} with 10.0.2 may not work as expected.`);
                 }
             }
             else if (isMotionValue(prevValue)) {
@@ -10637,7 +10647,7 @@
     function useInvertedScale(scale) {
         let parentScaleX = useMotionValue(1);
         let parentScaleY = useMotionValue(1);
-        const visualElement = useVisualElementContext();
+        const { visualElement } = React.useContext(MotionContext);
         exports.invariant(!!(scale || visualElement), "If no scale values are provided, useInvertedScale must be used within a child of another motion component.");
         exports.warning(hasWarned, "useInvertedScale is deprecated and will be removed in 3.0. Use the layout prop instead.");
         hasWarned = true;
@@ -10764,7 +10774,6 @@
     exports.useUnmountEffect = useUnmountEffect;
     exports.useVelocity = useVelocity;
     exports.useViewportScroll = useViewportScroll;
-    exports.useVisualElementContext = useVisualElementContext;
     exports.useWillChange = useWillChange;
     exports.wrap = wrap;