framer-motion 7.6.18 → 7.7.0

package/dist/cjs/index.js

@@ -432,6 +432,7 @@ const lowercaseSVGElements = [
     "stop",
     "switch",
     "symbol",
+    "svg",
     "text",
     "tspan",
     "use",
@@ -933,8 +934,18 @@ function buildSVGPath(attrs, length, spacing = 1, offset = 0, useDashCase = true
  */
 function buildSVGAttrs(state, { attrX, attrY, originX, originY, pathLength, pathSpacing = 1, pathOffset = 0, 
 // This is object creation, which we try to avoid per-frame.
-...latest }, options, transformTemplate) {
+...latest }, options, isSVGTag, transformTemplate) {
     buildHTMLStyles(state, latest, options, transformTemplate);
+    /**
+     * For svg tags we just want to make sure viewBox is animatable and treat all the styles
+     * as normal HTML tags.
+     */
+    if (isSVGTag) {
+        if (state.style.viewBox) {
+            state.attrs.viewBox = state.style.viewBox;
+        }
+        return;
+    }
     state.attrs = state.style;
     state.style = {};
     const { attrs, style, dimensions } = state;
@@ -968,10 +979,12 @@ const createSvgRenderState = () => ({
     attrs: {},
 });
 
-function useSVGProps(props, visualState) {
+const isSVGTag = (tag) => typeof tag === "string" && tag.toLowerCase() === "svg";
+
+function useSVGProps(props, visualState, _isStatic, Component) {
     const visualProps = React.useMemo(() => {
         const state = createSvgRenderState();
-        buildSVGAttrs(state, visualState, { enableHardwareAcceleration: false }, props.transformTemplate);
+        buildSVGAttrs(state, visualState, { enableHardwareAcceleration: false }, isSVGTag(Component), props.transformTemplate);
         return {
             ...state.attrs,
             style: { ...state.style },
@@ -990,7 +1003,7 @@ function createUseRender(forwardMotionProps = false) {
         const useVisualProps = isSVGComponent(Component)
             ? useSVGProps
             : useHTMLProps;
-        const visualProps = useVisualProps(props, latestValues, isStatic);
+        const visualProps = useVisualProps(props, latestValues, isStatic, Component);
         const filteredProps = filterProps(props, typeof Component === "string", forwardMotionProps);
         const elementProps = {
             ...filteredProps,
@@ -1042,6 +1055,9 @@ const camelCaseAttributes = new Set([
     "viewBox",
     "gradientTransform",
     "pathLength",
+    "startOffset",
+    "textLength",
+    "lengthAdjust",
 ]);
 
 function renderSVG(element, renderState, _styleProp, projection) {
@@ -1214,7 +1230,7 @@ const svgMotionConfig = {
                     height: 0,
                 };
             }
-            buildSVGAttrs(renderState, latestValues, { enableHardwareAcceleration: false }, props.transformTemplate);
+            buildSVGAttrs(renderState, latestValues, { enableHardwareAcceleration: false }, isSVGTag(instance.tagName), props.transformTemplate);
             renderSVG(instance, renderState);
         },
     }),
@@ -2815,11 +2831,10 @@ function inertia({ from = 0, velocity = 0, min, max, power = 0.8, timeConstant =
 function isTransitionDefined({ when, delay: _delay, delayChildren, staggerChildren, staggerDirection, repeat, repeatType, repeatDelay, from, ...transition }) {
     return !!Object.keys(transition).length;
 }
-let legacyRepeatWarning = false;
 /**
  * Convert Framer Motion's Transition type into Popmotion-compatible options.
  */
-function convertTransitionToAnimationOptions({ ease, times, yoyo, flip, loop, ...transition }) {
+function convertTransitionToAnimationOptions({ ease, times, ...transition }) {
     const options = { ...transition };
     if (times)
         options["offset"] = times;
@@ -2843,23 +2858,6 @@ function convertTransitionToAnimationOptions({ ease, times, yoyo, flip, loop, ..
      */
     if (transition.type === "tween")
         options.type = "keyframes";
-    /**
-     * TODO: These options are officially removed from the API.
-     */
-    if (yoyo || loop || flip) {
-        heyListen.warning(!legacyRepeatWarning, "yoyo, loop and flip have been removed from the API. Replace with repeat and repeatType options.");
-        legacyRepeatWarning = true;
-        if (yoyo) {
-            options.repeatType = "reverse";
-        }
-        else if (loop) {
-            options.repeatType = "loop";
-        }
-        else if (flip) {
-            options.repeatType = "mirror";
-        }
-        options.repeat = loop || yoyo || flip || transition.repeat;
-    }
     /**
      * TODO: Popmotion 9 has the ability to automatically detect whether to use
      * a keyframes or spring animation, but does so by detecting velocity and other spring options.
@@ -3094,7 +3092,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 = "7.6.18";
+        this.version = "7.7.0";
         /**
          * Duration, in milliseconds, since last updating frame.
          *
@@ -5379,7 +5377,7 @@ function updateMotionValuesFromProps(element, next, prev) {
              * and warn against mismatches.
              */
             if (process.env.NODE_ENV === "development") {
-                warnOnce(nextValue.version === "7.6.18", `Attempting to mix Framer Motion versions ${nextValue.version} with 7.6.18 may not work as expected.`);
+                warnOnce(nextValue.version === "7.7.0", `Attempting to mix Framer Motion versions ${nextValue.version} with 7.7.0 may not work as expected.`);
             }
         }
         else if (isMotionValue(prevValue)) {
@@ -5946,6 +5944,10 @@ class HTMLVisualElement extends DOMVisualElement {
 }
 
 class SVGVisualElement extends DOMVisualElement {
+    constructor() {
+        super(...arguments);
+        this.isSVGTag = false;
+    }
     getBaseTargetFromProps(props, key) {
         return props[key];
     }
@@ -5964,11 +5966,15 @@ class SVGVisualElement extends DOMVisualElement {
         return scrapeMotionValuesFromProps(props);
     }
     build(renderState, latestValues, options, props) {
-        buildSVGAttrs(renderState, latestValues, options, props.transformTemplate);
+        buildSVGAttrs(renderState, latestValues, options, this.isSVGTag, props.transformTemplate);
     }
     renderInstance(instance, renderState, styleProp, projection) {
         renderSVG(instance, renderState, styleProp, projection);
     }
+    mount(instance) {
+        this.isSVGTag = isSVGTag(instance.tagName);
+        super.mount(instance);
+    }
 }
 
 const createDomVisualElement = (Component, options) => {

package/dist/es/animation/utils/transitions.mjs

@@ -18,11 +18,10 @@ import { animate } from '../legacy-popmotion/index.mjs';
 function isTransitionDefined({ when, delay: _delay, delayChildren, staggerChildren, staggerDirection, repeat, repeatType, repeatDelay, from, ...transition }) {
     return !!Object.keys(transition).length;
 }
-let legacyRepeatWarning = false;
 /**
  * Convert Framer Motion's Transition type into Popmotion-compatible options.
  */
-function convertTransitionToAnimationOptions({ ease, times, yoyo, flip, loop, ...transition }) {
+function convertTransitionToAnimationOptions({ ease, times, ...transition }) {
     const options = { ...transition };
     if (times)
         options["offset"] = times;
@@ -46,23 +45,6 @@ function convertTransitionToAnimationOptions({ ease, times, yoyo, flip, loop, ..
      */
     if (transition.type === "tween")
         options.type = "keyframes";
-    /**
-     * TODO: These options are officially removed from the API.
-     */
-    if (yoyo || loop || flip) {
-        warning(!legacyRepeatWarning, "yoyo, loop and flip have been removed from the API. Replace with repeat and repeatType options.");
-        legacyRepeatWarning = true;
-        if (yoyo) {
-            options.repeatType = "reverse";
-        }
-        else if (loop) {
-            options.repeatType = "loop";
-        }
-        else if (flip) {
-            options.repeatType = "mirror";
-        }
-        options.repeat = loop || yoyo || flip || transition.repeat;
-    }
     /**
      * TODO: Popmotion 9 has the ability to automatically detect whether to use
      * a keyframes or spring animation, but does so by detecting velocity and other spring options.

package/dist/es/render/dom/use-render.mjs

@@ -9,7 +9,7 @@ function createUseRender(forwardMotionProps = false) {
         const useVisualProps = isSVGComponent(Component)
             ? useSVGProps
             : useHTMLProps;
-        const visualProps = useVisualProps(props, latestValues, isStatic);
+        const visualProps = useVisualProps(props, latestValues, isStatic, Component);
         const filteredProps = filterProps(props, typeof Component === "string", forwardMotionProps);
         const elementProps = {
             ...filteredProps,

package/dist/es/render/svg/SVGVisualElement.mjs

@@ -7,8 +7,13 @@ import { transformProps } from '../html/utils/transform.mjs';
 import { renderSVG } from './utils/render.mjs';
 import { getDefaultValueType } from '../dom/value-types/defaults.mjs';
 import { createBox } from '../../projection/geometry/models.mjs';
+import { isSVGTag } from './utils/is-svg-tag.mjs';
 
 class SVGVisualElement extends DOMVisualElement {
+    constructor() {
+        super(...arguments);
+        this.isSVGTag = false;
+    }
     getBaseTargetFromProps(props, key) {
         return props[key];
     }
@@ -27,11 +32,15 @@ class SVGVisualElement extends DOMVisualElement {
         return scrapeMotionValuesFromProps(props);
     }
     build(renderState, latestValues, options, props) {
-        buildSVGAttrs(renderState, latestValues, options, props.transformTemplate);
+        buildSVGAttrs(renderState, latestValues, options, this.isSVGTag, props.transformTemplate);
     }
     renderInstance(instance, renderState, styleProp, projection) {
         renderSVG(instance, renderState, styleProp, projection);
     }
+    mount(instance) {
+        this.isSVGTag = isSVGTag(instance.tagName);
+        super.mount(instance);
+    }
 }
 
 export { SVGVisualElement };

package/dist/es/render/svg/config-motion.mjs

@@ -3,6 +3,7 @@ import { scrapeMotionValuesFromProps } from './utils/scrape-motion-values.mjs';
 import { makeUseVisualState } from '../../motion/utils/use-visual-state.mjs';
 import { createSvgRenderState } from './utils/create-render-state.mjs';
 import { buildSVGAttrs } from './utils/build-attrs.mjs';
+import { isSVGTag } from './utils/is-svg-tag.mjs';
 
 const svgMotionConfig = {
     useVisualState: makeUseVisualState({
@@ -25,7 +26,7 @@ const svgMotionConfig = {
                     height: 0,
                 };
             }
-            buildSVGAttrs(renderState, latestValues, { enableHardwareAcceleration: false }, props.transformTemplate);
+            buildSVGAttrs(renderState, latestValues, { enableHardwareAcceleration: false }, isSVGTag(instance.tagName), props.transformTemplate);
             renderSVG(instance, renderState);
         },
     }),

package/dist/es/render/svg/lowercase-elements.mjs

@@ -23,6 +23,7 @@ const lowercaseSVGElements = [
     "stop",
     "switch",
     "symbol",
+    "svg",
     "text",
     "tspan",
     "use",

package/dist/es/render/svg/use-props.mjs

@@ -2,11 +2,12 @@ import { useMemo } from 'react';
 import { copyRawValuesOnly } from '../html/use-props.mjs';
 import { buildSVGAttrs } from './utils/build-attrs.mjs';
 import { createSvgRenderState } from './utils/create-render-state.mjs';
+import { isSVGTag } from './utils/is-svg-tag.mjs';
 
-function useSVGProps(props, visualState) {
+function useSVGProps(props, visualState, _isStatic, Component) {
     const visualProps = useMemo(() => {
         const state = createSvgRenderState();
-        buildSVGAttrs(state, visualState, { enableHardwareAcceleration: false }, props.transformTemplate);
+        buildSVGAttrs(state, visualState, { enableHardwareAcceleration: false }, isSVGTag(Component), props.transformTemplate);
         return {
             ...state.attrs,
             style: { ...state.style },

package/dist/es/render/svg/utils/build-attrs.mjs

@@ -7,8 +7,18 @@ import { buildSVGPath } from './path.mjs';
  */
 function buildSVGAttrs(state, { attrX, attrY, originX, originY, pathLength, pathSpacing = 1, pathOffset = 0, 
 // This is object creation, which we try to avoid per-frame.
-...latest }, options, transformTemplate) {
+...latest }, options, isSVGTag, transformTemplate) {
     buildHTMLStyles(state, latest, options, transformTemplate);
+    /**
+     * For svg tags we just want to make sure viewBox is animatable and treat all the styles
+     * as normal HTML tags.
+     */
+    if (isSVGTag) {
+        if (state.style.viewBox) {
+            state.attrs.viewBox = state.style.viewBox;
+        }
+        return;
+    }
     state.attrs = state.style;
     state.style = {};
     const { attrs, style, dimensions } = state;

package/dist/es/render/svg/utils/camel-case-attrs.mjs

@@ -22,6 +22,9 @@ const camelCaseAttributes = new Set([
     "viewBox",
     "gradientTransform",
     "pathLength",
+    "startOffset",
+    "textLength",
+    "lengthAdjust",
 ]);
 
 export { camelCaseAttributes };

package/dist/es/render/svg/utils/is-svg-tag.mjs

@@ -0,0 +1,3 @@
+const isSVGTag = (tag) => typeof tag === "string" && tag.toLowerCase() === "svg";
+
+export { isSVGTag };

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

package/dist/es/value/index.mjs

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

package/dist/framer-motion.dev.js

@@ -427,6 +427,7 @@
         "stop",
         "switch",
         "symbol",
+        "svg",
         "text",
         "tspan",
         "use",
@@ -1129,8 +1130,18 @@
      */
     function buildSVGAttrs(state, { attrX, attrY, originX, originY, pathLength, pathSpacing = 1, pathOffset = 0, 
     // This is object creation, which we try to avoid per-frame.
-    ...latest }, options, transformTemplate) {
+    ...latest }, options, isSVGTag, transformTemplate) {
         buildHTMLStyles(state, latest, options, transformTemplate);
+        /**
+         * For svg tags we just want to make sure viewBox is animatable and treat all the styles
+         * as normal HTML tags.
+         */
+        if (isSVGTag) {
+            if (state.style.viewBox) {
+                state.attrs.viewBox = state.style.viewBox;
+            }
+            return;
+        }
         state.attrs = state.style;
         state.style = {};
         const { attrs, style, dimensions } = state;
@@ -1164,10 +1175,12 @@
         attrs: {},
     });
 
-    function useSVGProps(props, visualState) {
+    const isSVGTag = (tag) => typeof tag === "string" && tag.toLowerCase() === "svg";
+
+    function useSVGProps(props, visualState, _isStatic, Component) {
         const visualProps = React.useMemo(() => {
             const state = createSvgRenderState();
-            buildSVGAttrs(state, visualState, { enableHardwareAcceleration: false }, props.transformTemplate);
+            buildSVGAttrs(state, visualState, { enableHardwareAcceleration: false }, isSVGTag(Component), props.transformTemplate);
             return {
                 ...state.attrs,
                 style: { ...state.style },
@@ -1186,7 +1199,7 @@
             const useVisualProps = isSVGComponent(Component)
                 ? useSVGProps
                 : useHTMLProps;
-            const visualProps = useVisualProps(props, latestValues, isStatic);
+            const visualProps = useVisualProps(props, latestValues, isStatic, Component);
             const filteredProps = filterProps(props, typeof Component === "string", forwardMotionProps);
             const elementProps = {
                 ...filteredProps,
@@ -1238,6 +1251,9 @@
         "viewBox",
         "gradientTransform",
         "pathLength",
+        "startOffset",
+        "textLength",
+        "lengthAdjust",
     ]);
 
     function renderSVG(element, renderState, _styleProp, projection) {
@@ -1410,7 +1426,7 @@
                         height: 0,
                     };
                 }
-                buildSVGAttrs(renderState, latestValues, { enableHardwareAcceleration: false }, props.transformTemplate);
+                buildSVGAttrs(renderState, latestValues, { enableHardwareAcceleration: false }, isSVGTag(instance.tagName), props.transformTemplate);
                 renderSVG(instance, renderState);
             },
         }),
@@ -3148,11 +3164,10 @@
     function isTransitionDefined({ when, delay: _delay, delayChildren, staggerChildren, staggerDirection, repeat, repeatType, repeatDelay, from, ...transition }) {
         return !!Object.keys(transition).length;
     }
-    let legacyRepeatWarning = false;
     /**
      * Convert Framer Motion's Transition type into Popmotion-compatible options.
      */
-    function convertTransitionToAnimationOptions({ ease, times, yoyo, flip, loop, ...transition }) {
+    function convertTransitionToAnimationOptions({ ease, times, ...transition }) {
         const options = { ...transition };
         if (times)
             options["offset"] = times;
@@ -3176,23 +3191,6 @@
          */
         if (transition.type === "tween")
             options.type = "keyframes";
-        /**
-         * TODO: These options are officially removed from the API.
-         */
-        if (yoyo || loop || flip) {
-            warning(!legacyRepeatWarning, "yoyo, loop and flip have been removed from the API. Replace with repeat and repeatType options.");
-            legacyRepeatWarning = true;
-            if (yoyo) {
-                options.repeatType = "reverse";
-            }
-            else if (loop) {
-                options.repeatType = "loop";
-            }
-            else if (flip) {
-                options.repeatType = "mirror";
-            }
-            options.repeat = loop || yoyo || flip || transition.repeat;
-        }
         /**
          * TODO: Popmotion 9 has the ability to automatically detect whether to use
          * a keyframes or spring animation, but does so by detecting velocity and other spring options.
@@ -3427,7 +3425,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 = "7.6.18";
+            this.version = "7.7.0";
             /**
              * Duration, in milliseconds, since last updating frame.
              *
@@ -5712,7 +5710,7 @@
                  * and warn against mismatches.
                  */
                 {
-                    warnOnce(nextValue.version === "7.6.18", `Attempting to mix Framer Motion versions ${nextValue.version} with 7.6.18 may not work as expected.`);
+                    warnOnce(nextValue.version === "7.7.0", `Attempting to mix Framer Motion versions ${nextValue.version} with 7.7.0 may not work as expected.`);
                 }
             }
             else if (isMotionValue(prevValue)) {
@@ -6279,6 +6277,10 @@
     }
 
     class SVGVisualElement extends DOMVisualElement {
+        constructor() {
+            super(...arguments);
+            this.isSVGTag = false;
+        }
         getBaseTargetFromProps(props, key) {
             return props[key];
         }
@@ -6297,11 +6299,15 @@
             return scrapeMotionValuesFromProps(props);
         }
         build(renderState, latestValues, options, props) {
-            buildSVGAttrs(renderState, latestValues, options, props.transformTemplate);
+            buildSVGAttrs(renderState, latestValues, options, this.isSVGTag, props.transformTemplate);
         }
         renderInstance(instance, renderState, styleProp, projection) {
             renderSVG(instance, renderState, styleProp, projection);
         }
+        mount(instance) {
+            this.isSVGTag = isSVGTag(instance.tagName);
+            super.mount(instance);
+        }
     }
 
     const createDomVisualElement = (Component, options) => {