framer-motion 12.17.1 → 12.17.3

package/dist/es/animation/hooks/use-animation.mjs

@@ -1,12 +1,12 @@
-import { animationControls } from './animation-controls.mjs';
 import { useConstant } from '../../utils/use-constant.mjs';
 import { useIsomorphicLayoutEffect } from '../../utils/use-isomorphic-effect.mjs';
+import { animationControls } from './animation-controls.mjs';
 
 /**
- * Creates `AnimationControls`, which can be used to manually start, stop
+ * Creates `LegacyAnimationControls`, which can be used to manually start, stop
  * and sequence animations on one or more components.
  *
- * The returned `AnimationControls` should be passed to the `animate` property
+ * The returned `LegacyAnimationControls` should be passed to the `animate` property
  * of the components you want to animate.
  *
  * These components can then be animated with the `start` method.

package/dist/es/animation/sequence/create.mjs

@@ -65,7 +65,7 @@ function createAnimationsFromSequence(sequence, { defaultTransition = {}, ...seq
             const numKeyframes = valueKeyframesAsList.length;
             const createGenerator = isGenerator(type)
                 ? type
-                : generators?.[type];
+                : generators?.[type || "keyframes"];
             if (numKeyframes <= 2 && createGenerator) {
                 /**
                  * As we're creating an easing function from a spring,

package/dist/framer-motion.dev.js

@@ -760,6 +760,11 @@
                     ? rgba.transform(v)
                     : hsla.transform(v);
         },
+        getAnimatableNone: (v) => {
+            const parsed = color.parse(v);
+            parsed.alpha = 0;
+            return color.transform(parsed);
+        },
     };
 
     const colorRegex = /(?:#[\da-f]{3,8}|(?:rgb|hsl)a?\((?:-?[\d.]+%?[,\s]+){2}-?[\d.]+%?\s*(?:[,/]\s*)?(?:\b\d+(?:\.\d+)?|\.\d+)?%?\))/giu;
@@ -836,7 +841,7 @@
             return output;
         };
     }
-    const convertNumbersToZero = (v) => typeof v === "number" ? 0 : v;
+    const convertNumbersToZero = (v) => typeof v === "number" ? 0 : color.test(v) ? color.getAnimatableNone(v) : v;
     function getAnimatableNone$1(v) {
         const parsed = parseComplexValue(v);
         const transformer = createTransformer(v);
@@ -11962,7 +11967,7 @@
                 const numKeyframes = valueKeyframesAsList.length;
                 const createGenerator = isGenerator(type)
                     ? type
-                    : generators?.[type];
+                    : generators?.[type || "keyframes"];
                 if (numKeyframes <= 2 && createGenerator) {
                     /**
                      * As we're creating an easing function from a spring,
@@ -13273,10 +13278,10 @@
     }
 
     /**
-     * Creates `AnimationControls`, which can be used to manually start, stop
+     * Creates `LegacyAnimationControls`, which can be used to manually start, stop
      * and sequence animations on one or more components.
      *
-     * The returned `AnimationControls` should be passed to the `animate` property
+     * The returned `LegacyAnimationControls` should be passed to the `animate` property
      * of the components you want to animate.
      *
      * These components can then be animated with the `start` method.