framer-motion 8.1.8 → 8.2.0

package/dist/cjs/index.js

@@ -2055,7 +2055,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 = "8.1.8";
+        this.version = "8.2.0";
         /**
          * Duration, in milliseconds, since last updating frame.
          *
@@ -3613,6 +3613,22 @@ function animateStyle(element, valueName, keyframes, { delay = 0, duration, repe
     });
 }
 
+const featureTests = {
+    waapi: () => Object.hasOwnProperty.call(Element.prototype, "animate"),
+};
+const results = {};
+const supports = {};
+/**
+ * Generate features tests that cache their results.
+ */
+for (const key in featureTests) {
+    supports[key] = () => {
+        if (results[key] === undefined)
+            results[key] = featureTests[key]();
+        return results[key];
+    };
+}
+
 function getFinalKeyframe(keyframes, { repeat, repeatType = "loop" }) {
     const index = repeat && repeatType !== "loop" && repeat % 2 === 1
         ? 0
@@ -3620,6 +3636,10 @@ function getFinalKeyframe(keyframes, { repeat, repeatType = "loop" }) {
     return keyframes[index];
 }
 
+/**
+ * A list of values that can be hardware-accelerated.
+ */
+const acceleratedValues = new Set(["opacity"]);
 /**
  * 10ms is chosen here as it strikes a balance between smooth
  * results (more than one keyframe per frame at 60fps) and
@@ -3627,16 +3647,33 @@ function getFinalKeyframe(keyframes, { repeat, repeatType = "loop" }) {
  */
 const sampleDelta = 10; //ms
 function createAcceleratedAnimation(value, valueName, { onUpdate, onComplete, ...options }) {
+    const canAccelerateAnimation = supports.waapi() &&
+        acceleratedValues.has(valueName) &&
+        !options.repeatDelay &&
+        options.repeatType !== "mirror" &&
+        options.damping !== 0;
+    if (!canAccelerateAnimation)
+        return false;
     let { keyframes, duration = 300, elapsed = 0, ease } = options;
     /**
      * If this animation needs pre-generated keyframes then generate.
      */
     if (options.type === "spring" || !isWaapiSupportedEasing(options.ease)) {
+        /**
+         * If we need to pre-generate keyframes and repeat is infinite then
+         * early return as this will lock the thread.
+         */
+        if (options.repeat === Infinity)
+            return;
         const sampleAnimation = animate$1(options);
         let state = { done: false, value: keyframes[0] };
         const pregeneratedKeyframes = [];
+        /**
+         * Bail after 20 seconds of pre-generated keyframes as it's likely
+         * we're heading for an infinite loop.
+         */
         let t = 0;
-        while (!state.done) {
+        while (!state.done && t < 20000) {
             state = sampleAnimation.sample(t);
             pregeneratedKeyframes.push(state.value);
             t += sampleDelta;
@@ -3936,26 +3973,6 @@ function getKeyframes(value, valueName, target, transition) {
     }
 }
 
-const featureTests = {
-    waapi: () => Object.hasOwnProperty.call(Element.prototype, "animate"),
-};
-const results = {};
-const supports = {};
-/**
- * Generate features tests that cache their results.
- */
-for (const key in featureTests) {
-    supports[key] = () => {
-        if (results[key] === undefined)
-            results[key] = featureTests[key]();
-        return results[key];
-    };
-}
-
-/**
- * A list of values that can be hardware-accelerated.
- */
-const acceleratedValues = new Set(["opacity"]);
 const createMotionValueAnimation = (valueName, value, target, transition = {}) => {
     return (onComplete) => {
         const valueTransition = getValueTransition(transition, valueName) || {};
@@ -4037,27 +4054,21 @@ const createMotionValueAnimation = (valueName, value, target, transition = {}) =
         }
         const visualElement = value.owner;
         const element = visualElement && visualElement.current;
-        const canAccelerateAnimation = supports.waapi() &&
-            acceleratedValues.has(valueName) &&
-            !options.repeatDelay &&
-            options.repeatType !== "mirror" &&
-            options.damping !== 0 &&
-            visualElement &&
+        /**
+         * Animate via WAAPI if possible.
+         */
+        if (visualElement &&
             element instanceof HTMLElement &&
-            !visualElement.getProps().onUpdate;
-        if (canAccelerateAnimation) {
-            /**
-             * If this animation is capable of being run via WAAPI, then do so.
-             */
-            return createAcceleratedAnimation(value, valueName, options);
-        }
-        else {
-            /**
-             * Otherwise, fall back to the main thread.
-             */
-            const animation = animate$1(options);
-            return () => animation.stop();
+            !(visualElement === null || visualElement === void 0 ? void 0 : visualElement.getProps().onUpdate)) {
+            const acceleratedAnimation = createAcceleratedAnimation(value, valueName, options);
+            if (acceleratedAnimation)
+                return acceleratedAnimation;
         }
+        /**
+         * If we didn't create an accelerated animation, create a JS animation
+         */
+        const animation = animate$1(options);
+        return () => animation.stop();
     };
 };
 
@@ -5900,7 +5911,7 @@ function updateMotionValuesFromProps(element, next, prev) {
              * and warn against mismatches.
              */
             if (process.env.NODE_ENV === "development") {
-                warnOnce(nextValue.version === "8.1.8", `Attempting to mix Framer Motion versions ${nextValue.version} with 8.1.8 may not work as expected.`);
+                warnOnce(nextValue.version === "8.2.0", `Attempting to mix Framer Motion versions ${nextValue.version} with 8.2.0 may not work as expected.`);
             }
         }
         else if (isMotionValue(prevValue)) {
@@ -9878,18 +9889,29 @@ exports.animate = animate;
 exports.animateVisualElement = animateVisualElement;
 exports.animationControls = animationControls;
 exports.animations = animations;
+exports.anticipate = anticipate;
+exports.backIn = backIn;
+exports.backInOut = backInOut;
+exports.backOut = backOut;
 exports.buildTransform = buildTransform;
 exports.calcLength = calcLength;
 exports.checkTargetForNewValues = checkTargetForNewValues;
+exports.circIn = circIn;
+exports.circInOut = circInOut;
+exports.circOut = circOut;
 exports.clamp = clamp;
 exports.createBox = createBox;
 exports.createDomMotionComponent = createDomMotionComponent;
 exports.createMotionComponent = createMotionComponent;
+exports.cubicBezier = cubicBezier;
 exports.delay = delay;
 exports.distance = distance;
 exports.distance2D = distance2D;
 exports.domAnimation = domAnimation;
 exports.domMax = domMax;
+exports.easeIn = easeIn;
+exports.easeInOut = easeInOut;
+exports.easeOut = easeOut;
 exports.filterProps = filterProps;
 exports.isBrowser = isBrowser;
 exports.isDragActive = isDragActive;

package/dist/es/animation/index.mjs

@@ -9,12 +9,7 @@ import { getDefaultTransition } from './utils/default-transitions.mjs';
 import { isAnimatable } from './utils/is-animatable.mjs';
 import { getKeyframes } from './utils/keyframes.mjs';
 import { getValueTransition, isTransitionDefined } from './utils/transitions.mjs';
-import { supports } from './waapi/supports.mjs';
 
-/**
- * A list of values that can be hardware-accelerated.
- */
-const acceleratedValues = new Set(["opacity"]);
 const createMotionValueAnimation = (valueName, value, target, transition = {}) => {
     return (onComplete) => {
         const valueTransition = getValueTransition(transition, valueName) || {};
@@ -96,27 +91,21 @@ const createMotionValueAnimation = (valueName, value, target, transition = {}) =
         }
         const visualElement = value.owner;
         const element = visualElement && visualElement.current;
-        const canAccelerateAnimation = supports.waapi() &&
-            acceleratedValues.has(valueName) &&
-            !options.repeatDelay &&
-            options.repeatType !== "mirror" &&
-            options.damping !== 0 &&
-            visualElement &&
+        /**
+         * Animate via WAAPI if possible.
+         */
+        if (visualElement &&
             element instanceof HTMLElement &&
-            !visualElement.getProps().onUpdate;
-        if (canAccelerateAnimation) {
-            /**
-             * If this animation is capable of being run via WAAPI, then do so.
-             */
-            return createAcceleratedAnimation(value, valueName, options);
-        }
-        else {
-            /**
-             * Otherwise, fall back to the main thread.
-             */
-            const animation = animate(options);
-            return () => animation.stop();
+            !(visualElement === null || visualElement === void 0 ? void 0 : visualElement.getProps().onUpdate)) {
+            const acceleratedAnimation = createAcceleratedAnimation(value, valueName, options);
+            if (acceleratedAnimation)
+                return acceleratedAnimation;
         }
+        /**
+         * If we didn't create an accelerated animation, create a JS animation
+         */
+        const animation = animate(options);
+        return () => animation.stop();
     };
 };
 

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

@@ -2,8 +2,13 @@ import { sync } from '../../frameloop/index.mjs';
 import { animate } from '../legacy-popmotion/index.mjs';
 import { animateStyle } from './index.mjs';
 import { isWaapiSupportedEasing } from './easing.mjs';
+import { supports } from './supports.mjs';
 import { getFinalKeyframe } from './utils/get-final-keyframe.mjs';
 
+/**
+ * A list of values that can be hardware-accelerated.
+ */
+const acceleratedValues = new Set(["opacity"]);
 /**
  * 10ms is chosen here as it strikes a balance between smooth
  * results (more than one keyframe per frame at 60fps) and
@@ -11,16 +16,33 @@ import { getFinalKeyframe } from './utils/get-final-keyframe.mjs';
  */
 const sampleDelta = 10; //ms
 function createAcceleratedAnimation(value, valueName, { onUpdate, onComplete, ...options }) {
+    const canAccelerateAnimation = supports.waapi() &&
+        acceleratedValues.has(valueName) &&
+        !options.repeatDelay &&
+        options.repeatType !== "mirror" &&
+        options.damping !== 0;
+    if (!canAccelerateAnimation)
+        return false;
     let { keyframes, duration = 300, elapsed = 0, ease } = options;
     /**
      * If this animation needs pre-generated keyframes then generate.
      */
     if (options.type === "spring" || !isWaapiSupportedEasing(options.ease)) {
+        /**
+         * If we need to pre-generate keyframes and repeat is infinite then
+         * early return as this will lock the thread.
+         */
+        if (options.repeat === Infinity)
+            return;
         const sampleAnimation = animate(options);
         let state = { done: false, value: keyframes[0] };
         const pregeneratedKeyframes = [];
+        /**
+         * Bail after 20 seconds of pre-generated keyframes as it's likely
+         * we're heading for an infinite loop.
+         */
         let t = 0;
-        while (!state.done) {
+        while (!state.done && t < 20000) {
             state = sampleAnimation.sample(t);
             pregeneratedKeyframes.push(state.value);
             t += sampleDelta;

package/dist/es/index.mjs

@@ -59,6 +59,11 @@ export { PresenceContext } from './context/PresenceContext.mjs';
 export { LayoutGroupContext } from './context/LayoutGroupContext.mjs';
 export { DeprecatedLayoutGroupContext } from './context/DeprecatedLayoutGroupContext.mjs';
 export { SwitchLayoutGroupContext } from './context/SwitchLayoutGroupContext.mjs';
+export { anticipate } from './easing/anticipate.mjs';
+export { backIn, backInOut, backOut } from './easing/back.mjs';
+export { circIn, circInOut, circOut } from './easing/circ.mjs';
+export { easeIn, easeInOut, easeOut } from './easing/ease.mjs';
+export { cubicBezier } from './easing/cubic-bezier.mjs';
 export { FlatTree } from './render/utils/flat-tree.mjs';
 export { useAnimatedState as useDeprecatedAnimatedState } from './animation/hooks/use-animated-state.mjs';
 export { useInvertedScale as useDeprecatedInvertedScale } from './value/use-inverted-scale.mjs';

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 === "8.1.8", `Attempting to mix Framer Motion versions ${nextValue.version} with 8.1.8 may not work as expected.`);
+                warnOnce(nextValue.version === "8.2.0", `Attempting to mix Framer Motion versions ${nextValue.version} with 8.2.0 may not work as expected.`);
             }
         }
         else if (isMotionValue(prevValue)) {

package/dist/es/value/index.mjs

@@ -25,7 +25,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 = "8.1.8";
+        this.version = "8.2.0";
         /**
          * Duration, in milliseconds, since last updating frame.
          *

package/dist/framer-motion.dev.js

@@ -2053,7 +2053,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.1.8";
+            this.version = "8.2.0";
             /**
              * Duration, in milliseconds, since last updating frame.
              *
@@ -3626,6 +3626,22 @@
         });
     }
 
+    const featureTests = {
+        waapi: () => Object.hasOwnProperty.call(Element.prototype, "animate"),
+    };
+    const results = {};
+    const supports = {};
+    /**
+     * Generate features tests that cache their results.
+     */
+    for (const key in featureTests) {
+        supports[key] = () => {
+            if (results[key] === undefined)
+                results[key] = featureTests[key]();
+            return results[key];
+        };
+    }
+
     function getFinalKeyframe(keyframes, { repeat, repeatType = "loop" }) {
         const index = repeat && repeatType !== "loop" && repeat % 2 === 1
             ? 0
@@ -3633,6 +3649,10 @@
         return keyframes[index];
     }
 
+    /**
+     * A list of values that can be hardware-accelerated.
+     */
+    const acceleratedValues = new Set(["opacity"]);
     /**
      * 10ms is chosen here as it strikes a balance between smooth
      * results (more than one keyframe per frame at 60fps) and
@@ -3640,16 +3660,33 @@
      */
     const sampleDelta = 10; //ms
     function createAcceleratedAnimation(value, valueName, { onUpdate, onComplete, ...options }) {
+        const canAccelerateAnimation = supports.waapi() &&
+            acceleratedValues.has(valueName) &&
+            !options.repeatDelay &&
+            options.repeatType !== "mirror" &&
+            options.damping !== 0;
+        if (!canAccelerateAnimation)
+            return false;
         let { keyframes, duration = 300, elapsed = 0, ease } = options;
         /**
          * If this animation needs pre-generated keyframes then generate.
          */
         if (options.type === "spring" || !isWaapiSupportedEasing(options.ease)) {
+            /**
+             * If we need to pre-generate keyframes and repeat is infinite then
+             * early return as this will lock the thread.
+             */
+            if (options.repeat === Infinity)
+                return;
             const sampleAnimation = animate$1(options);
             let state = { done: false, value: keyframes[0] };
             const pregeneratedKeyframes = [];
+            /**
+             * Bail after 20 seconds of pre-generated keyframes as it's likely
+             * we're heading for an infinite loop.
+             */
             let t = 0;
-            while (!state.done) {
+            while (!state.done && t < 20000) {
                 state = sampleAnimation.sample(t);
                 pregeneratedKeyframes.push(state.value);
                 t += sampleDelta;
@@ -3949,26 +3986,6 @@
         }
     }
 
-    const featureTests = {
-        waapi: () => Object.hasOwnProperty.call(Element.prototype, "animate"),
-    };
-    const results = {};
-    const supports = {};
-    /**
-     * Generate features tests that cache their results.
-     */
-    for (const key in featureTests) {
-        supports[key] = () => {
-            if (results[key] === undefined)
-                results[key] = featureTests[key]();
-            return results[key];
-        };
-    }
-
-    /**
-     * A list of values that can be hardware-accelerated.
-     */
-    const acceleratedValues = new Set(["opacity"]);
     const createMotionValueAnimation = (valueName, value, target, transition = {}) => {
         return (onComplete) => {
             const valueTransition = getValueTransition(transition, valueName) || {};
@@ -4050,27 +4067,21 @@
             }
             const visualElement = value.owner;
             const element = visualElement && visualElement.current;
-            const canAccelerateAnimation = supports.waapi() &&
-                acceleratedValues.has(valueName) &&
-                !options.repeatDelay &&
-                options.repeatType !== "mirror" &&
-                options.damping !== 0 &&
-                visualElement &&
+            /**
+             * Animate via WAAPI if possible.
+             */
+            if (visualElement &&
                 element instanceof HTMLElement &&
-                !visualElement.getProps().onUpdate;
-            if (canAccelerateAnimation) {
-                /**
-                 * If this animation is capable of being run via WAAPI, then do so.
-                 */
-                return createAcceleratedAnimation(value, valueName, options);
-            }
-            else {
-                /**
-                 * Otherwise, fall back to the main thread.
-                 */
-                const animation = animate$1(options);
-                return () => animation.stop();
+                !(visualElement === null || visualElement === void 0 ? void 0 : visualElement.getProps().onUpdate)) {
+                const acceleratedAnimation = createAcceleratedAnimation(value, valueName, options);
+                if (acceleratedAnimation)
+                    return acceleratedAnimation;
             }
+            /**
+             * If we didn't create an accelerated animation, create a JS animation
+             */
+            const animation = animate$1(options);
+            return () => animation.stop();
         };
     };
 
@@ -5913,7 +5924,7 @@
                  * and warn against mismatches.
                  */
                 {
-                    warnOnce(nextValue.version === "8.1.8", `Attempting to mix Framer Motion versions ${nextValue.version} with 8.1.8 may not work as expected.`);
+                    warnOnce(nextValue.version === "8.2.0", `Attempting to mix Framer Motion versions ${nextValue.version} with 8.2.0 may not work as expected.`);
                 }
             }
             else if (isMotionValue(prevValue)) {
@@ -10497,18 +10508,29 @@
     exports.animateVisualElement = animateVisualElement;
     exports.animationControls = animationControls;
     exports.animations = animations;
+    exports.anticipate = anticipate;
+    exports.backIn = backIn;
+    exports.backInOut = backInOut;
+    exports.backOut = backOut;
     exports.buildTransform = buildTransform;
     exports.calcLength = calcLength;
     exports.checkTargetForNewValues = checkTargetForNewValues;
+    exports.circIn = circIn;
+    exports.circInOut = circInOut;
+    exports.circOut = circOut;
     exports.clamp = clamp$1;
     exports.createBox = createBox;
     exports.createDomMotionComponent = createDomMotionComponent;
     exports.createMotionComponent = createMotionComponent;
+    exports.cubicBezier = cubicBezier;
     exports.delay = delay;
     exports.distance = distance;
     exports.distance2D = distance2D;
     exports.domAnimation = domAnimation;
     exports.domMax = domMax;
+    exports.easeIn = easeIn;
+    exports.easeInOut = easeInOut;
+    exports.easeOut = easeOut;
     exports.filterProps = filterProps;
     exports.isBrowser = isBrowser;
     exports.isDragActive = isDragActive;