@tamagui/animations-motion 1.129.5 → 1.129.6

package/dist/cjs/createAnimations.cjs

@@ -69,36 +69,43 @@ function createAnimations(animationsProp) {
         disableAnimation = componentState.unmounted === !0 || !animationKey,
         presenceContext = import_react2.default.useContext(import_use_presence.PresenceContext),
         [scope, animate] = (0, import_react.useAnimate)(),
-        firstRenderStyle = (0, import_react2.useRef)(null);
-      props.style && (0, import_core.styleToCSS)(props.style);
-      const {
-        dontAnimate,
-        doAnimate,
-        animationOptions
-      } = (0, import_react2.useMemo)(() => getMotionAnimatedProps(props, style, disableAnimation), [presenceContext, animationKey, JSON.stringify(style)]);
-      function runAnimation(animationStyle, options) {
-        if (stateRef.current.host instanceof HTMLElement) {
-          if (!firstRenderStyle.current) {
-            firstRenderStyle.current = animationStyle, animate(stateRef.current.host, animationStyle, {
+        lastAnimationStyle = (0, import_react2.useRef)(null),
+        controls = (0, import_react2.useRef)(null),
+        styleKey = JSON.stringify(style),
+        {
+          dontAnimate,
+          doAnimate,
+          animationOptions
+        } = (0, import_react2.useMemo)(() => getMotionAnimatedProps(props, style, disableAnimation), [presenceContext, animationKey, styleKey]),
+        runAnimation = (animationStyle, animationOptions2) => {
+          if (!animationStyle || !(stateRef.current.host instanceof HTMLElement)) return;
+          if ((0, import_core.fixStyles)(animationStyle), (0, import_core.styleToCSS)(animationStyle), !lastAnimationStyle.current) {
+            lastAnimationStyle.current = animationStyle, controls.current = animate(scope.current, animationStyle, {
               duration: 0,
               type: "tween"
-            });
+            }), controls.current.complete();
             return;
           }
-          animate(stateRef.current.host, animationStyle, animationOptions);
-        }
-      }
+          const diff = {};
+          for (const key in animationStyle) animationStyle[key] !== lastAnimationStyle.current[key] && (diff[key] = animationStyle[key]);
+          controls.current = animate(scope.current, diff, animationOptions2), lastAnimationStyle.current = animationStyle;
+        };
       return useStyleEmitter?.(nextStyle => {
         const {
           doAnimate: doAnimate2,
           animationOptions: animationOptions2
         } = getMotionAnimatedProps(props, nextStyle, disableAnimation);
-        doAnimate2 && runAnimation(doAnimate2, animationOptions2);
+        runAnimation(doAnimate2, animationOptions2);
       }), (0, import_react2.useEffect)(() => () => {
-        firstRenderStyle.current = null;
+        lastAnimationStyle.current = null;
       }, []), (0, import_react2.useLayoutEffect)(() => {
         doAnimate && runAnimation(doAnimate, animationOptions);
-      }, [doAnimate, firstRenderStyle]), {
+      }, [JSON.stringify(doAnimate), lastAnimationStyle]), process.env.NODE_ENV === "development" && props.debug && props.debug !== "profile" && console.info("[animations-motion](", JSON.stringify(doAnimate, null, 2) + ")", {
+        doAnimate,
+        dontAnimate,
+        animationOptions,
+        props
+      }), {
         style: dontAnimate,
         ref: scope,
         tag: "div"
@@ -153,12 +160,12 @@ function createAnimations(animationsProp) {
       doAnimate: null
     };
     const animationOptions = animationPropToAnimationConfig(props.animation);
-    let dontAnimate = {};
-    const doAnimate = {},
-      animateOnly = props.animateOnly;
+    let dontAnimate = {},
+      doAnimate = null;
+    const animateOnly = props.animateOnly;
     for (const key in style) {
       const value = style[key];
-      animateOnly && !animateOnly.includes(key) ? dontAnimate[key] = value : doAnimate[key] = value;
+      disableAnimationProps.has(key) || animateOnly && !animateOnly.includes(key) ? dontAnimate[key] = value : (doAnimate ||= {}, doAnimate[key] = value);
     }
     return {
       dontAnimate,
@@ -175,7 +182,8 @@ function createAnimations(animationsProp) {
     } : {};
   }
 }
-const MotionView = createMotionView("div"),
+const disableAnimationProps = /* @__PURE__ */new Set(["alignContent", "alignItems", "backdropFilter", "boxSizing", "contain", "display", "flexBasis", "flexDirection", "flexShrink", "justifyContent", "maxHeight", "maxWidth", "minHeight", "minWidth", "overflow", "pointerEvents", "position", "textWrap"]),
+  MotionView = createMotionView("div"),
   MotionText = createMotionView("span");
 function createMotionView(defaultTag) {
   const isText = defaultTag === "span",
@@ -208,7 +216,7 @@ function createMotionView(defaultTag) {
           // noMergeStyle: true,
           resolveValues: "auto"
         });
-        return out.viewProps.style && (0, import_core.styleToCSS)(out.viewProps.style), out.viewProps;
+        return out.viewProps.style && ((0, import_core.fixStyles)(out.viewProps.style), (0, import_core.styleToCSS)(out.viewProps.style)), out.viewProps;
       }
       const props = getProps({
           ...propsRest,

package/dist/cjs/createAnimations.js

@@ -46,33 +46,42 @@ function createAnimations(animationsProp) {
     usePresence: import_use_presence.usePresence,
     ResetPresence: import_use_presence.ResetPresence,
     useAnimations: (animationProps) => {
-      const { props, style, componentState, stateRef, useStyleEmitter } = animationProps, animationKey = Array.isArray(props.animation) ? props.animation[0] : props.animation, disableAnimation = componentState.unmounted === !0 || !animationKey, presenceContext = import_react2.default.useContext(import_use_presence.PresenceContext), [scope, animate] = (0, import_react.useAnimate)(), firstRenderStyle = (0, import_react2.useRef)(null);
-      props.style && (0, import_core.styleToCSS)(props.style);
-      const { dontAnimate, doAnimate, animationOptions } = (0, import_react2.useMemo)(() => getMotionAnimatedProps(props, style, disableAnimation), [presenceContext, animationKey, JSON.stringify(style)]);
-      function runAnimation(animationStyle, options) {
-        if (stateRef.current.host instanceof HTMLElement) {
-          if (!firstRenderStyle.current) {
-            firstRenderStyle.current = animationStyle, animate(stateRef.current.host, animationStyle, {
-              duration: 0,
-              type: "tween"
-            });
-            return;
-          }
-          animate(stateRef.current.host, animationStyle, animationOptions);
+      const { props, style, componentState, stateRef, useStyleEmitter } = animationProps, animationKey = Array.isArray(props.animation) ? props.animation[0] : props.animation, disableAnimation = componentState.unmounted === !0 || !animationKey, presenceContext = import_react2.default.useContext(import_use_presence.PresenceContext), [scope, animate] = (0, import_react.useAnimate)(), lastAnimationStyle = (0, import_react2.useRef)(null), controls = (0, import_react2.useRef)(null), styleKey = JSON.stringify(style), { dontAnimate, doAnimate, animationOptions } = (0, import_react2.useMemo)(() => getMotionAnimatedProps(
+        props,
+        style,
+        disableAnimation
+      ), [presenceContext, animationKey, styleKey]), runAnimation = (animationStyle, animationOptions2) => {
+        if (!animationStyle || !(stateRef.current.host instanceof HTMLElement))
+          return;
+        if ((0, import_core.fixStyles)(animationStyle), (0, import_core.styleToCSS)(animationStyle), !lastAnimationStyle.current) {
+          lastAnimationStyle.current = animationStyle, controls.current = animate(scope.current, animationStyle, {
+            duration: 0,
+            type: "tween"
+          }), controls.current.complete();
+          return;
         }
-      }
+        const diff = {};
+        for (const key in animationStyle)
+          animationStyle[key] !== lastAnimationStyle.current[key] && (diff[key] = animationStyle[key]);
+        controls.current = animate(scope.current, diff, animationOptions2), lastAnimationStyle.current = animationStyle;
+      };
       return useStyleEmitter?.((nextStyle) => {
         const { doAnimate: doAnimate2, animationOptions: animationOptions2 } = getMotionAnimatedProps(
           props,
           nextStyle,
           disableAnimation
         );
-        doAnimate2 && runAnimation(doAnimate2, animationOptions2);
+        runAnimation(doAnimate2, animationOptions2);
       }), (0, import_react2.useEffect)(() => () => {
-        firstRenderStyle.current = null;
+        lastAnimationStyle.current = null;
       }, []), (0, import_react2.useLayoutEffect)(() => {
         doAnimate && runAnimation(doAnimate, animationOptions);
-      }, [doAnimate, firstRenderStyle]), {
+      }, [JSON.stringify(doAnimate), lastAnimationStyle]), process.env.NODE_ENV === "development" && props.debug && props.debug !== "profile" && console.info("[animations-motion](", JSON.stringify(doAnimate, null, 2) + ")", {
+        doAnimate,
+        dontAnimate,
+        animationOptions,
+        props
+      }), {
         style: dontAnimate,
         ref: scope,
         tag: "div"
@@ -128,11 +137,11 @@ function createAnimations(animationsProp) {
         doAnimate: null
       };
     const animationOptions = animationPropToAnimationConfig(props.animation);
-    let dontAnimate = {};
-    const doAnimate = {}, animateOnly = props.animateOnly;
+    let dontAnimate = {}, doAnimate = null;
+    const animateOnly = props.animateOnly;
     for (const key in style) {
       const value = style[key];
-      animateOnly && !animateOnly.includes(key) ? dontAnimate[key] = value : doAnimate[key] = value;
+      disableAnimationProps.has(key) || animateOnly && !animateOnly.includes(key) ? dontAnimate[key] = value : (doAnimate ||= {}, doAnimate[key] = value);
     }
     return {
       dontAnimate,
@@ -150,7 +159,26 @@ function createAnimations(animationsProp) {
     } : {};
   }
 }
-const MotionView = createMotionView("div"), MotionText = createMotionView("span");
+const disableAnimationProps = /* @__PURE__ */ new Set([
+  "alignContent",
+  "alignItems",
+  "backdropFilter",
+  "boxSizing",
+  "contain",
+  "display",
+  "flexBasis",
+  "flexDirection",
+  "flexShrink",
+  "justifyContent",
+  "maxHeight",
+  "maxWidth",
+  "minHeight",
+  "minWidth",
+  "overflow",
+  "pointerEvents",
+  "position",
+  "textWrap"
+]), MotionView = createMotionView("div"), MotionText = createMotionView("span");
 function createMotionView(defaultTag) {
   const isText = defaultTag === "span", Component = (0, import_react2.forwardRef)((propsIn, ref) => {
     const { forwardedRef, animation, tag = defaultTag, style, ...propsRest } = propsIn, [scope, animate] = (0, import_react.useAnimate)(), hostRef = (0, import_react2.useRef)(null), composedRefs = (0, import_core.useComposedRefs)(forwardedRef, ref, hostRef, scope), stateRef = (0, import_react2.useRef)(null);
@@ -179,7 +207,7 @@ function createMotionView(defaultTag) {
           resolveValues: "auto"
         }
       );
-      return out.viewProps.style && (0, import_core.styleToCSS)(out.viewProps.style), out.viewProps;
+      return out.viewProps.style && ((0, import_core.fixStyles)(out.viewProps.style), (0, import_core.styleToCSS)(out.viewProps.style)), out.viewProps;
     }
     const props = getProps({ ...propsRest, style: nonAnimatedStyles }), Element = tag || "div", transformedProps = import_core.hooks.usePropsTransform?.(tag, props, stateRef, !1);
     return (0, import_react2.useEffect)(() => {

package/dist/cjs/createAnimations.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
   "sources": ["../../src/createAnimations.tsx"],
-  "mappings": "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",
-  "names": ["import_react", "React", "doAnimate", "animationOptions", "props"]
+  "mappings": "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",
+  "names": ["import_react", "React", "animationOptions", "doAnimate", "props"]
 }

package/dist/cjs/createAnimations.native.js

@@ -46,40 +46,46 @@ function createAnimations(animationsProp) {
     usePresence: import_use_presence.usePresence,
     ResetPresence: import_use_presence.ResetPresence,
     useAnimations: function(animationProps) {
-      var { props, style, componentState, stateRef, useStyleEmitter } = animationProps, animationKey = Array.isArray(props.animation) ? props.animation[0] : props.animation, isHydrating = componentState.unmounted === !0, disableAnimation = isHydrating || !animationKey, presenceContext = import_react2.default.useContext(import_use_presence.PresenceContext), [scope, animate] = (0, import_react.useAnimate)(), firstRenderStyle = (0, import_react2.useRef)(null);
-      props.style && (0, import_core.styleToCSS)(props.style);
-      var { dontAnimate, doAnimate, animationOptions } = (0, import_react2.useMemo)(function() {
-        return getMotionAnimatedProps(props, style, disableAnimation);
+      var { props, style, componentState, stateRef, useStyleEmitter } = animationProps, animationKey = Array.isArray(props.animation) ? props.animation[0] : props.animation, isHydrating = componentState.unmounted === !0, disableAnimation = isHydrating || !animationKey, presenceContext = import_react2.default.useContext(import_use_presence.PresenceContext), [scope, animate] = (0, import_react.useAnimate)(), lastAnimationStyle = (0, import_react2.useRef)(null), controls = (0, import_react2.useRef)(null), styleKey = JSON.stringify(style), { dontAnimate, doAnimate, animationOptions } = (0, import_react2.useMemo)(function() {
+        var motionAnimationState = getMotionAnimatedProps(props, style, disableAnimation);
+        return motionAnimationState;
       }, [
         presenceContext,
         animationKey,
-        JSON.stringify(style)
-      ]);
-      function runAnimation(animationStyle, options) {
-        if (stateRef.current.host instanceof HTMLElement) {
-          if (!firstRenderStyle.current) {
-            firstRenderStyle.current = animationStyle, animate(stateRef.current.host, animationStyle, {
+        styleKey
+      ]), runAnimation = function(animationStyle, animationOptions2) {
+        if (animationStyle && stateRef.current.host instanceof HTMLElement) {
+          if ((0, import_core.fixStyles)(animationStyle), (0, import_core.styleToCSS)(animationStyle), !lastAnimationStyle.current) {
+            lastAnimationStyle.current = animationStyle, controls.current = animate(scope.current, animationStyle, {
               duration: 0,
               type: "tween"
-            });
+            }), controls.current.complete();
             return;
           }
-          animate(stateRef.current.host, animationStyle, animationOptions);
+          var diff = {};
+          for (var key2 in animationStyle)
+            animationStyle[key2] !== lastAnimationStyle.current[key2] && (diff[key2] = animationStyle[key2]);
+          controls.current = animate(scope.current, diff, animationOptions2), lastAnimationStyle.current = animationStyle;
         }
-      }
+      };
       return useStyleEmitter == null || useStyleEmitter(function(nextStyle) {
         var { doAnimate: doAnimate2, animationOptions: animationOptions2 } = getMotionAnimatedProps(props, nextStyle, disableAnimation);
-        doAnimate2 && runAnimation(doAnimate2, animationOptions2);
+        runAnimation(doAnimate2, animationOptions2);
       }), (0, import_react2.useEffect)(function() {
         return function() {
-          firstRenderStyle.current = null;
+          lastAnimationStyle.current = null;
         };
       }, []), (0, import_react2.useLayoutEffect)(function() {
         doAnimate && runAnimation(doAnimate, animationOptions);
       }, [
+        JSON.stringify(doAnimate),
+        lastAnimationStyle
+      ]), process.env.NODE_ENV === "development" && props.debug && props.debug !== "profile" && console.info("[animations-motion](", JSON.stringify(doAnimate, null, 2) + ")", {
         doAnimate,
-        firstRenderStyle
-      ]), {
+        dontAnimate,
+        animationOptions,
+        props
+      }), {
         style: dontAnimate,
         ref: scope,
         tag: "div"
@@ -143,10 +149,10 @@ function createAnimations(animationsProp) {
         dontAnimate: style,
         doAnimate: null
       };
-    var animationOptions = animationPropToAnimationConfig(props.animation), dontAnimate = {}, doAnimate = {}, animateOnly = props.animateOnly;
+    var animationOptions = animationPropToAnimationConfig(props.animation), dontAnimate = {}, doAnimate = null, animateOnly = props.animateOnly;
     for (var key2 in style) {
       var value = style[key2];
-      animateOnly && !animateOnly.includes(key2) ? dontAnimate[key2] = value : doAnimate[key2] = value;
+      disableAnimationProps.has(key2) || animateOnly && !animateOnly.includes(key2) ? dontAnimate[key2] = value : (doAnimate || (doAnimate = {}), doAnimate[key2] = value);
     }
     return {
       dontAnimate,
@@ -169,7 +175,26 @@ function createAnimations(animationsProp) {
     } : {};
   }
 }
-var MotionView = createMotionView("div"), MotionText = createMotionView("span");
+var disableAnimationProps = /* @__PURE__ */ new Set([
+  "alignContent",
+  "alignItems",
+  "backdropFilter",
+  "boxSizing",
+  "contain",
+  "display",
+  "flexBasis",
+  "flexDirection",
+  "flexShrink",
+  "justifyContent",
+  "maxHeight",
+  "maxWidth",
+  "minHeight",
+  "minWidth",
+  "overflow",
+  "pointerEvents",
+  "position",
+  "textWrap"
+]), MotionView = createMotionView("div"), MotionText = createMotionView("span");
 function createMotionView(defaultTag) {
   var isText = defaultTag === "span", Component = /* @__PURE__ */ (0, import_react2.forwardRef)(function(propsIn, ref) {
     var _hooks_usePropsTransform, { forwardedRef, animation, tag = defaultTag, style, ...propsRest } = propsIn, [scope, animate] = (0, import_react.useAnimate)(), hostRef = (0, import_react2.useRef)(null), composedRefs = (0, import_core.useComposedRefs)(forwardedRef, ref, hostRef, scope), stateRef = (0, import_react2.useRef)(null);
@@ -199,7 +224,7 @@ function createMotionView(defaultTag) {
         // noMergeStyle: true,
         resolveValues: "auto"
       });
-      return out.viewProps.style && (0, import_core.styleToCSS)(out.viewProps.style), out.viewProps;
+      return out.viewProps.style && ((0, import_core.fixStyles)(out.viewProps.style), (0, import_core.styleToCSS)(out.viewProps.style)), out.viewProps;
     }
     var props = getProps({
       ...propsRest,

package/dist/cjs/createAnimations.native.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
   "sources": ["../../src/createAnimations.tsx"],
-  "mappings": "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",
-  "names": ["import_react", "MotionValueStrategy", "WeakMap", "createAnimations", "animationsProp", "animations", "key", "type", "View", "MotionView", "Text", "MotionText", "isReactNative", "supportsCSSVars", "needsWebStyles", "avoidReRenders", "usePresence", "ResetPresence", "useAnimations", "animationProps", "props", "style", "componentState", "stateRef", "useStyleEmitter", "animationKey", "Array", "isArray", "animation", "isHydrating", "unmounted", "disableAnimation", "presenceContext", "React", "useContext", "PresenceContext", "scope", "animate", "useAnimate", "firstRenderStyle", "useRef", "styleToCSS", "dontAnimate", "doAnimate", "animationOptions", "useMemo", "getMotionAnimatedProps", "JSON", "stringify", "runAnimation", "animationStyle", "options", "current", "host", "HTMLElement", "duration", "nextStyle", "useEffect", "useLayoutEffect", "ref", "tag", "useAnimatedNumber", "initial", "motionValue", "useMotionValue", "getInstance", "getValue", "get", "setValue", "next", "config", "onFinish", "set", "unsubscribe", "on", "value", "Math", "abs", "stop", "useAnimatedNumberReaction", "onValue", "instance", "useMotionValueEvent", "useAnimatedNumberStyle", "val", "getStyleProp", "getStyleRef", "getStyle", "cur", "disable", "animationPropToAnimationConfig", "animateOnly", "includes", "animationProp", "defaultAnimationKey", "specificAnimations", "default", "Object", "fromEntries", "keys", "flatMap", "createMotionView", "defaultTag", "isText", "Component", "forwardRef", "propsIn", "hooks", "forwardedRef", "propsRest", "hostRef", "composedRefs", "useComposedRefs", "_", "state", "useThemeWithState", "styles", "animatedStyle", "nonAnimatedStyles", "find", "x", "filter", "getProps", "out", "getSplitStyles", "staticConfig", "theme", "name", "isAnimated", "noClass", "resolveValues", "viewProps", "Element", "transformedProps", "usePropsTransform", "animationConfig", "node", "webStyle", "motionAnimationConfig", "_jsx"]
+  "mappings": "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",
+  "names": ["import_react", "MotionValueStrategy", "WeakMap", "createAnimations", "animationsProp", "animations", "key", "type", "View", "MotionView", "Text", "MotionText", "isReactNative", "supportsCSSVars", "needsWebStyles", "avoidReRenders", "usePresence", "ResetPresence", "useAnimations", "animationProps", "props", "style", "componentState", "stateRef", "useStyleEmitter", "animationKey", "Array", "isArray", "animation", "isHydrating", "unmounted", "disableAnimation", "presenceContext", "React", "useContext", "PresenceContext", "scope", "animate", "useAnimate", "lastAnimationStyle", "useRef", "controls", "styleKey", "JSON", "stringify", "dontAnimate", "doAnimate", "animationOptions", "useMemo", "motionAnimationState", "getMotionAnimatedProps", "runAnimation", "animationStyle", "current", "host", "HTMLElement", "fixStyles", "styleToCSS", "duration", "complete", "diff", "nextStyle", "useEffect", "useLayoutEffect", "process", "env", "NODE_ENV", "console", "info", "ref", "tag", "useAnimatedNumber", "initial", "motionValue", "useMotionValue", "getInstance", "getValue", "get", "setValue", "next", "config", "onFinish", "set", "unsubscribe", "on", "value", "Math", "abs", "stop", "useAnimatedNumberReaction", "onValue", "instance", "useMotionValueEvent", "useAnimatedNumberStyle", "val", "getStyleProp", "getStyleRef", "getStyle", "cur", "disable", "animationPropToAnimationConfig", "animateOnly", "disableAnimationProps", "has", "includes", "animationProp", "defaultAnimationKey", "specificAnimations", "default", "Object", "fromEntries", "keys", "flatMap", "Set", "createMotionView", "defaultTag", "isText", "Component", "forwardRef", "propsIn", "hooks", "forwardedRef", "propsRest", "hostRef", "composedRefs", "useComposedRefs", "_", "state", "useThemeWithState", "styles", "animatedStyle", "nonAnimatedStyles", "find", "x", "filter", "getProps", "out", "getSplitStyles", "staticConfig", "theme", "name", "isAnimated", "noClass", "resolveValues", "viewProps", "Element", "transformedProps", "usePropsTransform", "animationConfig", "node", "webStyle", "motionAnimationConfig", "_jsx"]
 }

package/dist/esm/createAnimations.js

@@ -1,4 +1,5 @@
 import {
+  fixStyles,
   getSplitStyles,
   hooks,
   styleToCSS,
@@ -35,33 +36,42 @@ function createAnimations(animationsProp) {
     usePresence,
     ResetPresence,
     useAnimations: (animationProps) => {
-      const { props, style, componentState, stateRef, useStyleEmitter } = animationProps, animationKey = Array.isArray(props.animation) ? props.animation[0] : props.animation, disableAnimation = componentState.unmounted === !0 || !animationKey, presenceContext = React.useContext(PresenceContext), [scope, animate] = useAnimate(), firstRenderStyle = useRef(null);
-      props.style && styleToCSS(props.style);
-      const { dontAnimate, doAnimate, animationOptions } = useMemo(() => getMotionAnimatedProps(props, style, disableAnimation), [presenceContext, animationKey, JSON.stringify(style)]);
-      function runAnimation(animationStyle, options) {
-        if (stateRef.current.host instanceof HTMLElement) {
-          if (!firstRenderStyle.current) {
-            firstRenderStyle.current = animationStyle, animate(stateRef.current.host, animationStyle, {
-              duration: 0,
-              type: "tween"
-            });
-            return;
-          }
-          animate(stateRef.current.host, animationStyle, animationOptions);
+      const { props, style, componentState, stateRef, useStyleEmitter } = animationProps, animationKey = Array.isArray(props.animation) ? props.animation[0] : props.animation, disableAnimation = componentState.unmounted === !0 || !animationKey, presenceContext = React.useContext(PresenceContext), [scope, animate] = useAnimate(), lastAnimationStyle = useRef(null), controls = useRef(null), styleKey = JSON.stringify(style), { dontAnimate, doAnimate, animationOptions } = useMemo(() => getMotionAnimatedProps(
+        props,
+        style,
+        disableAnimation
+      ), [presenceContext, animationKey, styleKey]), runAnimation = (animationStyle, animationOptions2) => {
+        if (!animationStyle || !(stateRef.current.host instanceof HTMLElement))
+          return;
+        if (fixStyles(animationStyle), styleToCSS(animationStyle), !lastAnimationStyle.current) {
+          lastAnimationStyle.current = animationStyle, controls.current = animate(scope.current, animationStyle, {
+            duration: 0,
+            type: "tween"
+          }), controls.current.complete();
+          return;
         }
-      }
+        const diff = {};
+        for (const key in animationStyle)
+          animationStyle[key] !== lastAnimationStyle.current[key] && (diff[key] = animationStyle[key]);
+        controls.current = animate(scope.current, diff, animationOptions2), lastAnimationStyle.current = animationStyle;
+      };
       return useStyleEmitter?.((nextStyle) => {
         const { doAnimate: doAnimate2, animationOptions: animationOptions2 } = getMotionAnimatedProps(
           props,
           nextStyle,
           disableAnimation
         );
-        doAnimate2 && runAnimation(doAnimate2, animationOptions2);
+        runAnimation(doAnimate2, animationOptions2);
       }), useEffect(() => () => {
-        firstRenderStyle.current = null;
+        lastAnimationStyle.current = null;
       }, []), useLayoutEffect(() => {
         doAnimate && runAnimation(doAnimate, animationOptions);
-      }, [doAnimate, firstRenderStyle]), {
+      }, [JSON.stringify(doAnimate), lastAnimationStyle]), process.env.NODE_ENV === "development" && props.debug && props.debug !== "profile" && console.info("[animations-motion](", JSON.stringify(doAnimate, null, 2) + ")", {
+        doAnimate,
+        dontAnimate,
+        animationOptions,
+        props
+      }), {
         style: dontAnimate,
         ref: scope,
         tag: "div"
@@ -117,11 +127,11 @@ function createAnimations(animationsProp) {
         doAnimate: null
       };
     const animationOptions = animationPropToAnimationConfig(props.animation);
-    let dontAnimate = {};
-    const doAnimate = {}, animateOnly = props.animateOnly;
+    let dontAnimate = {}, doAnimate = null;
+    const animateOnly = props.animateOnly;
     for (const key in style) {
       const value = style[key];
-      animateOnly && !animateOnly.includes(key) ? dontAnimate[key] = value : doAnimate[key] = value;
+      disableAnimationProps.has(key) || animateOnly && !animateOnly.includes(key) ? dontAnimate[key] = value : (doAnimate ||= {}, doAnimate[key] = value);
     }
     return {
       dontAnimate,
@@ -139,7 +149,26 @@ function createAnimations(animationsProp) {
     } : {};
   }
 }
-const MotionView = createMotionView("div"), MotionText = createMotionView("span");
+const disableAnimationProps = /* @__PURE__ */ new Set([
+  "alignContent",
+  "alignItems",
+  "backdropFilter",
+  "boxSizing",
+  "contain",
+  "display",
+  "flexBasis",
+  "flexDirection",
+  "flexShrink",
+  "justifyContent",
+  "maxHeight",
+  "maxWidth",
+  "minHeight",
+  "minWidth",
+  "overflow",
+  "pointerEvents",
+  "position",
+  "textWrap"
+]), MotionView = createMotionView("div"), MotionText = createMotionView("span");
 function createMotionView(defaultTag) {
   const isText = defaultTag === "span", Component = forwardRef((propsIn, ref) => {
     const { forwardedRef, animation, tag = defaultTag, style, ...propsRest } = propsIn, [scope, animate] = useAnimate(), hostRef = useRef(null), composedRefs = useComposedRefs(forwardedRef, ref, hostRef, scope), stateRef = useRef(null);
@@ -168,7 +197,7 @@ function createMotionView(defaultTag) {
           resolveValues: "auto"
         }
       );
-      return out.viewProps.style && styleToCSS(out.viewProps.style), out.viewProps;
+      return out.viewProps.style && (fixStyles(out.viewProps.style), styleToCSS(out.viewProps.style)), out.viewProps;
     }
     const props = getProps({ ...propsRest, style: nonAnimatedStyles }), Element = tag || "div", transformedProps = hooks.usePropsTransform?.(tag, props, stateRef, !1);
     return useEffect(() => {

package/dist/esm/createAnimations.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
   "sources": ["../../src/createAnimations.tsx"],
-  "mappings": "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",
-  "names": ["doAnimate", "animationOptions", "props"]
+  "mappings": "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",
+  "names": ["animationOptions", "doAnimate", "props"]
 }

package/dist/esm/createAnimations.mjs

@@ -1,4 +1,4 @@
-import { getSplitStyles, hooks, styleToCSS, Text, useComposedRefs, useThemeWithState, View } from "@tamagui/core";
+import { fixStyles, getSplitStyles, hooks, styleToCSS, Text, useComposedRefs, useThemeWithState, View } from "@tamagui/core";
 import { PresenceContext, ResetPresence, usePresence } from "@tamagui/use-presence";
 import { useAnimate, useMotionValue, useMotionValueEvent } from "motion/react";
 import React, { forwardRef, useEffect, useLayoutEffect, useMemo, useRef } from "react";
@@ -33,36 +33,43 @@ function createAnimations(animationsProp) {
         disableAnimation = componentState.unmounted === !0 || !animationKey,
         presenceContext = React.useContext(PresenceContext),
         [scope, animate] = useAnimate(),
-        firstRenderStyle = useRef(null);
-      props.style && styleToCSS(props.style);
-      const {
-        dontAnimate,
-        doAnimate,
-        animationOptions
-      } = useMemo(() => getMotionAnimatedProps(props, style, disableAnimation), [presenceContext, animationKey, JSON.stringify(style)]);
-      function runAnimation(animationStyle, options) {
-        if (stateRef.current.host instanceof HTMLElement) {
-          if (!firstRenderStyle.current) {
-            firstRenderStyle.current = animationStyle, animate(stateRef.current.host, animationStyle, {
+        lastAnimationStyle = useRef(null),
+        controls = useRef(null),
+        styleKey = JSON.stringify(style),
+        {
+          dontAnimate,
+          doAnimate,
+          animationOptions
+        } = useMemo(() => getMotionAnimatedProps(props, style, disableAnimation), [presenceContext, animationKey, styleKey]),
+        runAnimation = (animationStyle, animationOptions2) => {
+          if (!animationStyle || !(stateRef.current.host instanceof HTMLElement)) return;
+          if (fixStyles(animationStyle), styleToCSS(animationStyle), !lastAnimationStyle.current) {
+            lastAnimationStyle.current = animationStyle, controls.current = animate(scope.current, animationStyle, {
               duration: 0,
               type: "tween"
-            });
+            }), controls.current.complete();
             return;
           }
-          animate(stateRef.current.host, animationStyle, animationOptions);
-        }
-      }
+          const diff = {};
+          for (const key in animationStyle) animationStyle[key] !== lastAnimationStyle.current[key] && (diff[key] = animationStyle[key]);
+          controls.current = animate(scope.current, diff, animationOptions2), lastAnimationStyle.current = animationStyle;
+        };
       return useStyleEmitter?.(nextStyle => {
         const {
           doAnimate: doAnimate2,
           animationOptions: animationOptions2
         } = getMotionAnimatedProps(props, nextStyle, disableAnimation);
-        doAnimate2 && runAnimation(doAnimate2, animationOptions2);
+        runAnimation(doAnimate2, animationOptions2);
       }), useEffect(() => () => {
-        firstRenderStyle.current = null;
+        lastAnimationStyle.current = null;
       }, []), useLayoutEffect(() => {
         doAnimate && runAnimation(doAnimate, animationOptions);
-      }, [doAnimate, firstRenderStyle]), {
+      }, [JSON.stringify(doAnimate), lastAnimationStyle]), process.env.NODE_ENV === "development" && props.debug && props.debug !== "profile" && console.info("[animations-motion](", JSON.stringify(doAnimate, null, 2) + ")", {
+        doAnimate,
+        dontAnimate,
+        animationOptions,
+        props
+      }), {
         style: dontAnimate,
         ref: scope,
         tag: "div"
@@ -117,12 +124,12 @@ function createAnimations(animationsProp) {
       doAnimate: null
     };
     const animationOptions = animationPropToAnimationConfig(props.animation);
-    let dontAnimate = {};
-    const doAnimate = {},
-      animateOnly = props.animateOnly;
+    let dontAnimate = {},
+      doAnimate = null;
+    const animateOnly = props.animateOnly;
     for (const key in style) {
       const value = style[key];
-      animateOnly && !animateOnly.includes(key) ? dontAnimate[key] = value : doAnimate[key] = value;
+      disableAnimationProps.has(key) || animateOnly && !animateOnly.includes(key) ? dontAnimate[key] = value : (doAnimate ||= {}, doAnimate[key] = value);
     }
     return {
       dontAnimate,
@@ -139,7 +146,8 @@ function createAnimations(animationsProp) {
     } : {};
   }
 }
-const MotionView = createMotionView("div"),
+const disableAnimationProps = /* @__PURE__ */new Set(["alignContent", "alignItems", "backdropFilter", "boxSizing", "contain", "display", "flexBasis", "flexDirection", "flexShrink", "justifyContent", "maxHeight", "maxWidth", "minHeight", "minWidth", "overflow", "pointerEvents", "position", "textWrap"]),
+  MotionView = createMotionView("div"),
   MotionText = createMotionView("span");
 function createMotionView(defaultTag) {
   const isText = defaultTag === "span",
@@ -172,7 +180,7 @@ function createMotionView(defaultTag) {
           // noMergeStyle: true,
           resolveValues: "auto"
         });
-        return out.viewProps.style && styleToCSS(out.viewProps.style), out.viewProps;
+        return out.viewProps.style && (fixStyles(out.viewProps.style), styleToCSS(out.viewProps.style)), out.viewProps;
       }
       const props = getProps({
           ...propsRest,

package/dist/esm/createAnimations.mjs.map

@@ -1 +1 @@
-{"version":3,"names":["getSplitStyles","hooks","styleToCSS","Text","useComposedRefs","useThemeWithState","View","PresenceContext","ResetPresence","usePresence","useAnimate","useMotionValue","useMotionValueEvent","React","forwardRef","useEffect","useLayoutEffect","useMemo","useRef","jsx","MotionValueStrategy","WeakMap","createAnimations","animationsProp","animations","key","type","MotionView","MotionText","isReactNative","supportsCSSVars","needsWebStyles","avoidReRenders","useAnimations","animationProps","props","style","componentState","stateRef","useStyleEmitter","animationKey","Array","isArray","animation","disableAnimation","unmounted","presenceContext","useContext","scope","animate","firstRenderStyle","dontAnimate","doAnimate","animationOptions","getMotionAnimatedProps","JSON","stringify","runAnimation","animationStyle","options","current","host","HTMLElement","duration","nextStyle","doAnimate2","animationOptions2","ref","tag","useAnimatedNumber","initial","motionValue","getInstance","getValue","get","setValue","next","config","onFinish","set","unsubscribe","on","value","Math","abs","stop","useAnimatedNumberReaction","onValue","instance","useAnimatedNumberStyle","val","getStyleProp","getStyleRef","getStyle","cur","disable","animationPropToAnimationConfig","animateOnly","includes","animationProp","defaultAnimationKey","specificAnimations","default","Object","fromEntries","keys","flatMap","createMotionView","defaultTag","isText","Component","propsIn","forwardedRef","propsRest","hostRef","composedRefs","_","state","styles","animatedStyle","nonAnimatedStyles","find","x","filter","getProps","props2","out","staticConfig","theme","name","isAnimated","noClass","resolveValues","viewProps","Element","transformedProps","usePropsTransform","animationConfig","node","webStyle","motionAnimationConfig","acceptTagProp"],"sources":["../../src/createAnimations.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["fixStyles","getSplitStyles","hooks","styleToCSS","Text","useComposedRefs","useThemeWithState","View","PresenceContext","ResetPresence","usePresence","useAnimate","useMotionValue","useMotionValueEvent","React","forwardRef","useEffect","useLayoutEffect","useMemo","useRef","jsx","MotionValueStrategy","WeakMap","createAnimations","animationsProp","animations","key","type","MotionView","MotionText","isReactNative","supportsCSSVars","needsWebStyles","avoidReRenders","useAnimations","animationProps","props","style","componentState","stateRef","useStyleEmitter","animationKey","Array","isArray","animation","disableAnimation","unmounted","presenceContext","useContext","scope","animate","lastAnimationStyle","controls","styleKey","JSON","stringify","dontAnimate","doAnimate","animationOptions","getMotionAnimatedProps","runAnimation","animationStyle","animationOptions2","current","host","HTMLElement","duration","complete","diff","nextStyle","doAnimate2","process","env","NODE_ENV","debug","console","info","ref","tag","useAnimatedNumber","initial","motionValue","getInstance","getValue","get","setValue","next","config","onFinish","set","unsubscribe","on","value","Math","abs","stop","useAnimatedNumberReaction","onValue","instance","useAnimatedNumberStyle","val","getStyleProp","getStyleRef","getStyle","cur","disable","animationPropToAnimationConfig","animateOnly","disableAnimationProps","has","includes","animationProp","defaultAnimationKey","specificAnimations","default","Object","fromEntries","keys","flatMap","Set","createMotionView","defaultTag","isText","Component","propsIn","forwardedRef","propsRest","hostRef","composedRefs","_","state","styles","animatedStyle","nonAnimatedStyles","find","x","filter","getProps","props2","out","staticConfig","theme","name","isAnimated","noClass","resolveValues","viewProps","Element","transformedProps","usePropsTransform","animationConfig","node","webStyle","motionAnimationConfig","acceptTagProp"],"sources":["../../src/createAnimations.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/esm/createAnimations.native.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { getSplitStyles, hooks, styleToCSS, Text, useComposedRefs, useThemeWithState, View } from "@tamagui/core";
+import { fixStyles, getSplitStyles, hooks, styleToCSS, Text, useComposedRefs, useThemeWithState, View } from "@tamagui/core";
 import { PresenceContext, ResetPresence, usePresence } from "@tamagui/use-presence";
 import { useAnimate, useMotionValue, useMotionValueEvent } from "motion/react";
 import React, { forwardRef, useEffect, useLayoutEffect, useMemo, useRef } from "react";
@@ -34,40 +34,49 @@ function createAnimations(animationsProp) {
         disableAnimation = isHydrating || !animationKey,
         presenceContext = React.useContext(PresenceContext),
         [scope, animate] = useAnimate(),
-        firstRenderStyle = useRef(null);
-      props.style && styleToCSS(props.style);
-      var {
-        dontAnimate,
-        doAnimate,
-        animationOptions
-      } = useMemo(function () {
-        return getMotionAnimatedProps(props, style, disableAnimation);
-      }, [presenceContext, animationKey, JSON.stringify(style)]);
-      function runAnimation(animationStyle, options) {
-        if (stateRef.current.host instanceof HTMLElement) {
-          if (!firstRenderStyle.current) {
-            firstRenderStyle.current = animationStyle, animate(stateRef.current.host, animationStyle, {
-              duration: 0,
-              type: "tween"
-            });
-            return;
+        lastAnimationStyle = useRef(null),
+        controls = useRef(null),
+        styleKey = JSON.stringify(style),
+        {
+          dontAnimate,
+          doAnimate,
+          animationOptions
+        } = useMemo(function () {
+          var motionAnimationState = getMotionAnimatedProps(props, style, disableAnimation);
+          return motionAnimationState;
+        }, [presenceContext, animationKey, styleKey]),
+        runAnimation = function (animationStyle, animationOptions2) {
+          if (animationStyle && stateRef.current.host instanceof HTMLElement) {
+            if (fixStyles(animationStyle), styleToCSS(animationStyle), !lastAnimationStyle.current) {
+              lastAnimationStyle.current = animationStyle, controls.current = animate(scope.current, animationStyle, {
+                duration: 0,
+                type: "tween"
+              }), controls.current.complete();
+              return;
+            }
+            var diff = {};
+            for (var key2 in animationStyle) animationStyle[key2] !== lastAnimationStyle.current[key2] && (diff[key2] = animationStyle[key2]);
+            controls.current = animate(scope.current, diff, animationOptions2), lastAnimationStyle.current = animationStyle;
           }
-          animate(stateRef.current.host, animationStyle, animationOptions);
-        }
-      }
+        };
       return useStyleEmitter?.(function (nextStyle) {
         var {
           doAnimate: doAnimate2,
           animationOptions: animationOptions2
         } = getMotionAnimatedProps(props, nextStyle, disableAnimation);
-        doAnimate2 && runAnimation(doAnimate2, animationOptions2);
+        runAnimation(doAnimate2, animationOptions2);
       }), useEffect(function () {
         return function () {
-          firstRenderStyle.current = null;
+          lastAnimationStyle.current = null;
         };
       }, []), useLayoutEffect(function () {
         doAnimate && runAnimation(doAnimate, animationOptions);
-      }, [doAnimate, firstRenderStyle]), {
+      }, [JSON.stringify(doAnimate), lastAnimationStyle]), process.env.NODE_ENV === "development" && props.debug && props.debug !== "profile" && console.info("[animations-motion](", JSON.stringify(doAnimate, null, 2) + ")", {
+        doAnimate,
+        dontAnimate,
+        animationOptions,
+        props
+      }), {
         style: dontAnimate,
         ref: scope,
         tag: "div"
@@ -132,11 +141,11 @@ function createAnimations(animationsProp) {
     };
     var animationOptions = animationPropToAnimationConfig(props.animation),
       dontAnimate = {},
-      doAnimate = {},
+      doAnimate = null,
       animateOnly = props.animateOnly;
     for (var key2 in style) {
       var value = style[key2];
-      animateOnly && !animateOnly.includes(key2) ? dontAnimate[key2] = value : doAnimate[key2] = value;
+      disableAnimationProps.has(key2) || animateOnly && !animateOnly.includes(key2) ? dontAnimate[key2] = value : (doAnimate || (doAnimate = {}), doAnimate[key2] = value);
     }
     return {
       dontAnimate,
@@ -155,7 +164,8 @@ function createAnimations(animationsProp) {
     } : {};
   }
 }
-var MotionView = createMotionView("div"),
+var disableAnimationProps = /* @__PURE__ */new Set(["alignContent", "alignItems", "backdropFilter", "boxSizing", "contain", "display", "flexBasis", "flexDirection", "flexShrink", "justifyContent", "maxHeight", "maxWidth", "minHeight", "minWidth", "overflow", "pointerEvents", "position", "textWrap"]),
+  MotionView = createMotionView("div"),
   MotionText = createMotionView("span");
 function createMotionView(defaultTag) {
   var isText = defaultTag === "span",
@@ -195,7 +205,7 @@ function createMotionView(defaultTag) {
           // noMergeStyle: true,
           resolveValues: "auto"
         });
-        return out.viewProps.style && styleToCSS(out.viewProps.style), out.viewProps;
+        return out.viewProps.style && (fixStyles(out.viewProps.style), styleToCSS(out.viewProps.style)), out.viewProps;
       }
       var props = getProps({
           ...propsRest,

package/dist/esm/createAnimations.native.js.map

@@ -1 +1 @@
-{"version":3,"names":["jsx","_jsx","getSplitStyles","hooks","styleToCSS","Text","useComposedRefs","useThemeWithState","View","PresenceContext","ResetPresence","usePresence","useAnimate","useMotionValue","useMotionValueEvent","React","forwardRef","useEffect","useLayoutEffect","useMemo","useRef","MotionValueStrategy","WeakMap","createAnimations","animationsProp","animations","key","type","MotionView","MotionText","isReactNative","supportsCSSVars","needsWebStyles","avoidReRenders","useAnimations","animationProps","props","style","componentState","stateRef","useStyleEmitter","animationKey","Array","isArray","animation","isHydrating","unmounted","disableAnimation","presenceContext","useContext","scope","animate","firstRenderStyle","dontAnimate","doAnimate","animationOptions","getMotionAnimatedProps","JSON","stringify","runAnimation","animationStyle","options","current","host","HTMLElement","duration","nextStyle","doAnimate2","animationOptions2","ref","tag","useAnimatedNumber","initial","motionValue","getInstance","getValue","get","setValue","next","config","arguments","length","onFinish","set","unsubscribe","on","value","Math","abs","stop","useAnimatedNumberReaction","param","onValue","instance","useAnimatedNumberStyle","val","getStyleProp","getStyleRef","getStyle","cur","disable","animationPropToAnimationConfig","animateOnly","key2","includes","animationProp","defaultAnimationKey","specificAnimations","default","Object","fromEntries","keys","flatMap","createMotionView","defaultTag","isText","Component","propsIn","_hooks_usePropsTransform","forwardedRef","propsRest","hostRef","composedRefs","_","state","styles","animatedStyle","nonAnimatedStyles","find","x","filter","getProps","props2","out","staticConfig","theme","name","isAnimated","noClass","resolveValues","viewProps","Element","transformedProps","usePropsTransform","call","animationConfig","node","webStyle","motionAnimationConfig"],"sources":["../../src/createAnimations.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["jsx","_jsx","fixStyles","getSplitStyles","hooks","styleToCSS","Text","useComposedRefs","useThemeWithState","View","PresenceContext","ResetPresence","usePresence","useAnimate","useMotionValue","useMotionValueEvent","React","forwardRef","useEffect","useLayoutEffect","useMemo","useRef","MotionValueStrategy","WeakMap","createAnimations","animationsProp","animations","key","type","MotionView","MotionText","isReactNative","supportsCSSVars","needsWebStyles","avoidReRenders","useAnimations","animationProps","props","style","componentState","stateRef","useStyleEmitter","animationKey","Array","isArray","animation","isHydrating","unmounted","disableAnimation","presenceContext","useContext","scope","animate","lastAnimationStyle","controls","styleKey","JSON","stringify","dontAnimate","doAnimate","animationOptions","motionAnimationState","getMotionAnimatedProps","runAnimation","animationStyle","animationOptions2","current","host","HTMLElement","duration","complete","diff","key2","nextStyle","doAnimate2","process","env","NODE_ENV","debug","console","info","ref","tag","useAnimatedNumber","initial","motionValue","getInstance","getValue","get","setValue","next","config","arguments","length","onFinish","set","unsubscribe","on","value","Math","abs","stop","useAnimatedNumberReaction","param","onValue","instance","useAnimatedNumberStyle","val","getStyleProp","getStyleRef","getStyle","cur","disable","animationPropToAnimationConfig","animateOnly","disableAnimationProps","has","includes","animationProp","defaultAnimationKey","specificAnimations","default","Object","fromEntries","keys","flatMap","Set","createMotionView","defaultTag","isText","Component","propsIn","_hooks_usePropsTransform","forwardedRef","propsRest","hostRef","composedRefs","_","state","styles","animatedStyle","nonAnimatedStyles","find","x","filter","getProps","props2","out","staticConfig","theme","name","isAnimated","noClass","resolveValues","viewProps","Element","transformedProps","usePropsTransform","call","animationConfig","node","webStyle","motionAnimationConfig"],"sources":["../../src/createAnimations.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/animations-motion",
-  "version": "1.129.5",
+  "version": "1.129.6",
   "source": "src/index.ts",
   "license": "MIT",
   "types": "./types/index.d.ts",
@@ -29,12 +29,12 @@
     }
   },
   "dependencies": {
-    "@tamagui/core": "1.129.5",
-    "@tamagui/use-presence": "1.129.5",
+    "@tamagui/core": "1.129.6",
+    "@tamagui/use-presence": "1.129.6",
     "motion": "^12.19.1"
   },
   "devDependencies": {
-    "@tamagui/build": "1.129.5",
+    "@tamagui/build": "1.129.6",
     "react": "*"
   },
   "scripts": {

package/src/createAnimations.tsx

@@ -2,6 +2,7 @@ import {
   type AnimatedNumberStrategy,
   type AnimationDriver,
   type AnimationProp,
+  fixStyles,
   getSplitStyles,
   hooks,
   styleToCSS,
@@ -14,6 +15,7 @@ import {
 import { PresenceContext, ResetPresence, usePresence } from '@tamagui/use-presence'
 import {
   type AnimationOptions,
+  type AnimationPlaybackControlsWithThen,
   type MotionValue,
   useAnimate,
   useMotionValue,
@@ -72,34 +74,55 @@ export function createAnimations<A extends Record<string, AnimationConfig>>(
       const presenceContext = React.useContext(PresenceContext)
 
       const [scope, animate] = useAnimate()
-      const firstRenderStyle = useRef<Object | null>(null)
-
-      if (props.style) {
-        styleToCSS(props.style) // ideally this would just come from tamagui
-      }
+      const lastAnimationStyle = useRef<Object | null>(null)
+      const controls = useRef<AnimationPlaybackControlsWithThen | null>(null)
+      const styleKey = JSON.stringify(style)
 
       const { dontAnimate, doAnimate, animationOptions } = useMemo(() => {
-        return getMotionAnimatedProps(props as any, style, disableAnimation)
-      }, [presenceContext, animationKey, JSON.stringify(style)])
+        const motionAnimationState = getMotionAnimatedProps(
+          props as any,
+          style,
+          disableAnimation
+        )
+        return motionAnimationState
+      }, [presenceContext, animationKey, styleKey])
 
-      function runAnimation(
-        animationStyle: Record<string, unknown>,
-        options: AnimationOptions
-      ) {
+      // const id = useId()
+
+      const runAnimation = (
+        animationStyle: Record<string, unknown> | null,
+        animationOptions: AnimationOptions | undefined
+      ) => {
+        if (!animationStyle) return
         if (!(stateRef.current.host instanceof HTMLElement)) {
           return
         }
 
-        if (!firstRenderStyle.current) {
-          firstRenderStyle.current = animationStyle
-          animate(stateRef.current.host, animationStyle, {
+        // ideally this would just come from tamagui
+        fixStyles(animationStyle)
+        styleToCSS(animationStyle)
+
+        if (!lastAnimationStyle.current) {
+          // console.log('first', id, animationStyle)
+          lastAnimationStyle.current = animationStyle
+          controls.current = animate(scope.current, animationStyle, {
             duration: 0,
             type: 'tween',
           })
+          controls.current.complete()
           return
         }
 
-        animate(stateRef.current.host, animationStyle, animationOptions)
+        const diff = {}
+        for (const key in animationStyle) {
+          if (animationStyle[key] !== lastAnimationStyle.current[key]) {
+            diff[key] = animationStyle[key]
+          }
+        }
+
+        // console.log('animate', id, diff)
+        controls.current = animate(scope.current, diff, animationOptions)
+        lastAnimationStyle.current = animationStyle
       }
 
       useStyleEmitter?.((nextStyle) => {
@@ -108,27 +131,38 @@ export function createAnimations<A extends Record<string, AnimationConfig>>(
           nextStyle,
           disableAnimation
         )
-        if (doAnimate) {
-          runAnimation(doAnimate, animationOptions)
-          // Object.assign(dontAnimate, doAnimate)
-        }
+        runAnimation(doAnimate, animationOptions)
       })
 
       // strict mode correctness fix, idk why i thought it would clear a useRef
       // before running strict? if you remove this you'll see the next
-      // useLayoutEffect re-run and animate due to firstRenderStyle.current
+      // useLayoutEffect re-run and animate due to lastAnimationStyle.current
       // being set when in theory it should be clear
       useEffect(() => {
         return () => {
-          firstRenderStyle.current = null
+          lastAnimationStyle.current = null
         }
       }, [])
 
       useLayoutEffect(() => {
         if (!doAnimate) return
-        // debugger
         runAnimation(doAnimate, animationOptions)
-      }, [doAnimate, firstRenderStyle])
+      }, [JSON.stringify(doAnimate), lastAnimationStyle])
+
+      if (
+        process.env.NODE_ENV === 'development' &&
+        props['debug'] &&
+        props['debug'] !== 'profile'
+      ) {
+        console.info(`[animations-motion](`, JSON.stringify(doAnimate, null, 2) + ')', {
+          doAnimate,
+          dontAnimate,
+          animationOptions,
+          props,
+        })
+      }
+
+      // console.log('render', id, scope)
 
       return {
         style: dontAnimate,
@@ -218,14 +252,15 @@ export function createAnimations<A extends Record<string, AnimationConfig>>(
     const animationOptions = animationPropToAnimationConfig(props.animation)
 
     let dontAnimate = {}
-    const doAnimate = {}
+    let doAnimate: Record<string, unknown> | null = null
 
     const animateOnly = props.animateOnly as string[] | undefined
     for (const key in style) {
       const value = style[key]
-      if (animateOnly && !animateOnly.includes(key)) {
+      if (disableAnimationProps.has(key) || (animateOnly && !animateOnly.includes(key))) {
         dontAnimate[key] = value
       } else {
+        doAnimate ||= {}
         doAnimate[key] = value
       }
     }
@@ -272,6 +307,28 @@ export function createAnimations<A extends Record<string, AnimationConfig>>(
   }
 }
 
+// sort of temporary
+const disableAnimationProps = new Set<string>([
+  'alignContent',
+  'alignItems',
+  'backdropFilter',
+  'boxSizing',
+  'contain',
+  'display',
+  'flexBasis',
+  'flexDirection',
+  'flexShrink',
+  'justifyContent',
+  'maxHeight',
+  'maxWidth',
+  'minHeight',
+  'minWidth',
+  'overflow',
+  'pointerEvents',
+  'position',
+  'textWrap',
+])
+
 const MotionView = createMotionView('div')
 const MotionText = createMotionView('span')
 
@@ -329,8 +386,10 @@ function createMotionView(defaultTag: string) {
 
       // we can definitely get rid of this here
       if (out.viewProps.style) {
+        fixStyles(out.viewProps.style)
         styleToCSS(out.viewProps.style)
       }
+
       return out.viewProps
     }
 

package/types/createAnimations.d.ts.map

@@ -1,5 +1,5 @@
 {
-  "mappings": "AAAA,cAEO,uBAUA,eAAe;AAEtB,cAMO,uBACA,cAAc;KAMhB,kBAAkB;AASvB,OAAO,iBAAS,iBAAiB,UAAU,eAAe,kBACxDA,gBAAgB,IACf,gBAAgB",
+  "mappings": "AAAA,cAEO,uBAWA,eAAe;AAEtB,cAOO,uBACA,cAAc;KAMhB,kBAAkB;AASvB,OAAO,iBAAS,iBAAiB,UAAU,eAAe,kBACxDA,gBAAgB,IACf,gBAAgB",
   "names": [
     "animationsProp: A"
   ],
@@ -7,7 +7,7 @@
     "src/createAnimations.tsx"
   ],
   "sourcesContent": [
-    "import {\n  type AnimatedNumberStrategy,\n  type AnimationDriver,\n  type AnimationProp,\n  getSplitStyles,\n  hooks,\n  styleToCSS,\n  Text,\n  type UniversalAnimatedNumber,\n  useComposedRefs,\n  useThemeWithState,\n  View,\n} from '@tamagui/core'\nimport { PresenceContext, ResetPresence, usePresence } from '@tamagui/use-presence'\nimport {\n  type AnimationOptions,\n  type MotionValue,\n  useAnimate,\n  useMotionValue,\n  useMotionValueEvent,\n  type ValueTransition,\n} from 'motion/react'\nimport React, { forwardRef, useEffect, useLayoutEffect, useMemo, useRef } from 'react'\n\n// TODO: useAnimatedNumber style could avoid re-rendering\n\ntype MotionAnimatedNumber = MotionValue<number>\ntype AnimationConfig = ValueTransition\n\ntype MotionAnimatedNumberStyle = {\n  getStyle: (cur: number) => Record<string, unknown>\n  motionValue: MotionValue<number>\n}\n\nconst MotionValueStrategy = new WeakMap<MotionValue, AnimatedNumberStrategy>()\n\nexport function createAnimations<A extends Record<string, AnimationConfig>>(\n  animationsProp: A\n): AnimationDriver<A> {\n  // normalize, it doesn't assume type: 'spring' even if damping etc there so we do that\n  // which also matches the moti driver\n  // @ts-expect-error avoid doing a spread for no reason, sub-constraint type issue\n  const animations: A = {}\n  for (const key in animationsProp) {\n    animations[key] = {\n      type: 'spring',\n      ...animationsProp[key],\n    }\n  }\n\n  return {\n    // this is only used by Sheet basically for now to pass result of useAnimatedStyle to\n    View: MotionView,\n    Text: MotionText,\n    isReactNative: false,\n    supportsCSSVars: true,\n    needsWebStyles: true,\n    avoidReRenders: true,\n    animations,\n    usePresence,\n    ResetPresence,\n\n    useAnimations: (animationProps) => {\n      const { props, style, componentState, stateRef, useStyleEmitter } = animationProps\n\n      const animationKey = Array.isArray(props.animation)\n        ? props.animation[0]\n        : props.animation\n\n      const isHydrating = componentState.unmounted === true\n      const disableAnimation = isHydrating || !animationKey\n      const presenceContext = React.useContext(PresenceContext)\n\n      const [scope, animate] = useAnimate()\n      const firstRenderStyle = useRef<Object | null>(null)\n\n      if (props.style) {\n        styleToCSS(props.style) // ideally this would just come from tamagui\n      }\n\n      const { dontAnimate, doAnimate, animationOptions } = useMemo(() => {\n        return getMotionAnimatedProps(props as any, style, disableAnimation)\n      }, [presenceContext, animationKey, JSON.stringify(style)])\n\n      function runAnimation(\n        animationStyle: Record<string, unknown>,\n        options: AnimationOptions\n      ) {\n        if (!(stateRef.current.host instanceof HTMLElement)) {\n          return\n        }\n\n        if (!firstRenderStyle.current) {\n          firstRenderStyle.current = animationStyle\n          animate(stateRef.current.host, animationStyle, {\n            duration: 0,\n            type: 'tween',\n          })\n          return\n        }\n\n        animate(stateRef.current.host, animationStyle, animationOptions)\n      }\n\n      useStyleEmitter?.((nextStyle) => {\n        const { doAnimate, animationOptions } = getMotionAnimatedProps(\n          props as any,\n          nextStyle,\n          disableAnimation\n        )\n        if (doAnimate) {\n          runAnimation(doAnimate, animationOptions)\n          // Object.assign(dontAnimate, doAnimate)\n        }\n      })\n\n      // strict mode correctness fix, idk why i thought it would clear a useRef\n      // before running strict? if you remove this you'll see the next\n      // useLayoutEffect re-run and animate due to firstRenderStyle.current\n      // being set when in theory it should be clear\n      useEffect(() => {\n        return () => {\n          firstRenderStyle.current = null\n        }\n      }, [])\n\n      useLayoutEffect(() => {\n        if (!doAnimate) return\n        // debugger\n        runAnimation(doAnimate, animationOptions)\n      }, [doAnimate, firstRenderStyle])\n\n      return {\n        style: dontAnimate,\n        ref: scope,\n        tag: 'div',\n      }\n    },\n\n    useAnimatedNumber(initial): UniversalAnimatedNumber<MotionAnimatedNumber> {\n      const motionValue = useMotionValue(initial)\n\n      return React.useMemo(\n        () => ({\n          getInstance() {\n            return motionValue\n          },\n          getValue() {\n            return motionValue.get()\n          },\n          setValue(next, config = { type: 'spring' }, onFinish) {\n            if (config.type === 'direct') {\n              MotionValueStrategy.set(motionValue, {\n                type: 'direct',\n              })\n              motionValue.set(next)\n              onFinish?.()\n            } else {\n              MotionValueStrategy.set(motionValue, config)\n\n              if (onFinish) {\n                const unsubscribe = motionValue.on('change', (value) => {\n                  if (Math.abs(value - next) < 0.01) {\n                    unsubscribe()\n                    onFinish()\n                  }\n                })\n              }\n\n              motionValue.set(next)\n              // Motion doesn't have a direct onFinish callback, so we simulate it\n            }\n          },\n          stop() {\n            motionValue.stop()\n          },\n        }),\n        [motionValue]\n      )\n    },\n\n    useAnimatedNumberReaction({ value }, onValue) {\n      const instance = value.getInstance() as MotionValue<number>\n      useMotionValueEvent(instance, 'change', onValue)\n    },\n\n    useAnimatedNumberStyle(val, getStyleProp) {\n      const motionValue = val.getInstance() as MotionValue<number>\n      const getStyleRef = useRef<typeof getStyleProp>(getStyleProp)\n\n      // we need to change useAnimatedNumberStyle to have dep args to be concurrent safe\n      getStyleRef.current = getStyleProp\n\n      // never changes\n      return useMemo(() => {\n        return {\n          getStyle: (cur) => {\n            return getStyleRef.current(cur)\n          },\n          motionValue,\n        } satisfies MotionAnimatedNumberStyle\n      }, [])\n    },\n  }\n\n  function getMotionAnimatedProps(\n    props: { animation: AnimationProp | null; animateOnly?: string[] },\n    style: Record<string, unknown>,\n    disable = false\n  ) {\n    if (disable) {\n      return {\n        dontAnimate: style,\n        doAnimate: null,\n      }\n    }\n\n    const animationOptions = animationPropToAnimationConfig(props.animation)\n\n    let dontAnimate = {}\n    const doAnimate = {}\n\n    const animateOnly = props.animateOnly as string[] | undefined\n    for (const key in style) {\n      const value = style[key]\n      if (animateOnly && !animateOnly.includes(key)) {\n        dontAnimate[key] = value\n      } else {\n        doAnimate[key] = value\n      }\n    }\n\n    return {\n      dontAnimate,\n      doAnimate,\n      animationOptions,\n    }\n  }\n\n  function animationPropToAnimationConfig(\n    animationProp: AnimationProp | null\n  ): AnimationOptions {\n    let defaultAnimationKey = ''\n    let specificAnimations = {}\n\n    if (typeof animationProp === 'string') {\n      defaultAnimationKey = animationProp\n    } else if (Array.isArray(animationProp)) {\n      if (typeof animationProp[0] === 'string') {\n        defaultAnimationKey = animationProp[0]\n        specificAnimations = animationProp[1]\n      } else {\n        specificAnimations = animationProp\n      }\n    }\n\n    if (!defaultAnimationKey) {\n      return {}\n    }\n\n    return {\n      default: animations[defaultAnimationKey],\n      ...Object.fromEntries(\n        Object.keys(specificAnimations).flatMap((key) => {\n          if (animations[key]) {\n            return [[key, animations[key]]]\n          }\n          return []\n        })\n      ),\n    }\n  }\n}\n\nconst MotionView = createMotionView('div')\nconst MotionText = createMotionView('span')\n\nfunction createMotionView(defaultTag: string) {\n  // return forwardRef((props: any, ref) => {\n  //   console.log('rendering?', props)\n  //   const Element = motion[props.tag || defaultTag]\n  //   return <Element ref={ref} {...props} />\n  // })\n  const isText = defaultTag === 'span'\n\n  const Component = forwardRef((propsIn: any, ref) => {\n    const { forwardedRef, animation, tag = defaultTag, style, ...propsRest } = propsIn\n    const [scope, animate] = useAnimate()\n    const hostRef = useRef<HTMLElement>(null)\n    const composedRefs = useComposedRefs(forwardedRef, ref, hostRef, scope)\n\n    const stateRef = useRef<any>(null)\n    if (!stateRef.current) {\n      stateRef.current = {\n        get host() {\n          return hostRef.current\n        },\n      }\n    }\n\n    const [_, state] = useThemeWithState({})\n\n    const styles = Array.isArray(style) ? style : [style]\n\n    // we can assume just one animatedStyle max for now\n    const [animatedStyle, nonAnimatedStyles] = (() => {\n      return [\n        styles.find((x) => x.getStyle) as MotionAnimatedNumberStyle | undefined,\n        styles.filter((x) => !x.getStyle),\n      ] as const\n    })()\n\n    function getProps(props: any) {\n      const out = getSplitStyles(\n        props,\n        isText ? Text.staticConfig : View.staticConfig,\n        state?.theme!,\n        state?.name!,\n        {\n          unmounted: false,\n        },\n        {\n          isAnimated: false,\n          noClass: true,\n          // noMergeStyle: true,\n          resolveValues: 'auto',\n        }\n      )\n\n      // we can definitely get rid of this here\n      if (out.viewProps.style) {\n        styleToCSS(out.viewProps.style)\n      }\n      return out.viewProps\n    }\n\n    const props = getProps({ ...propsRest, style: nonAnimatedStyles })\n    const Element = tag || 'div'\n    const transformedProps = hooks.usePropsTransform?.(tag, props, stateRef, false)\n\n    useEffect(() => {\n      if (!animatedStyle) return\n\n      return animatedStyle.motionValue.on('change', (value) => {\n        const nextStyle = animatedStyle.getStyle(value)\n        const animationConfig = MotionValueStrategy.get(animatedStyle.motionValue)\n        const node = hostRef.current\n\n        const webStyle = getProps({ style: nextStyle }).style\n\n        if (webStyle && node instanceof HTMLElement) {\n          const motionAnimationConfig =\n            animationConfig?.type === 'timing'\n              ? {\n                  type: 'tween',\n                  duration: (animationConfig?.duration || 0) / 1000,\n                }\n              : animationConfig?.type === 'direct'\n                ? { type: 'tween', duration: 0 }\n                : {\n                    type: 'spring',\n                    ...(animationConfig as any),\n                  }\n\n          animate(node, webStyle as any, motionAnimationConfig)\n        }\n      })\n    }, [animatedStyle])\n\n    return <Element {...transformedProps} ref={composedRefs} />\n  })\n\n  Component['acceptTagProp'] = true\n\n  return Component\n}\n"
+    "import {\n  type AnimatedNumberStrategy,\n  type AnimationDriver,\n  type AnimationProp,\n  fixStyles,\n  getSplitStyles,\n  hooks,\n  styleToCSS,\n  Text,\n  type UniversalAnimatedNumber,\n  useComposedRefs,\n  useThemeWithState,\n  View,\n} from '@tamagui/core'\nimport { PresenceContext, ResetPresence, usePresence } from '@tamagui/use-presence'\nimport {\n  type AnimationOptions,\n  type AnimationPlaybackControlsWithThen,\n  type MotionValue,\n  useAnimate,\n  useMotionValue,\n  useMotionValueEvent,\n  type ValueTransition,\n} from 'motion/react'\nimport React, { forwardRef, useEffect, useLayoutEffect, useMemo, useRef } from 'react'\n\n// TODO: useAnimatedNumber style could avoid re-rendering\n\ntype MotionAnimatedNumber = MotionValue<number>\ntype AnimationConfig = ValueTransition\n\ntype MotionAnimatedNumberStyle = {\n  getStyle: (cur: number) => Record<string, unknown>\n  motionValue: MotionValue<number>\n}\n\nconst MotionValueStrategy = new WeakMap<MotionValue, AnimatedNumberStrategy>()\n\nexport function createAnimations<A extends Record<string, AnimationConfig>>(\n  animationsProp: A\n): AnimationDriver<A> {\n  // normalize, it doesn't assume type: 'spring' even if damping etc there so we do that\n  // which also matches the moti driver\n  // @ts-expect-error avoid doing a spread for no reason, sub-constraint type issue\n  const animations: A = {}\n  for (const key in animationsProp) {\n    animations[key] = {\n      type: 'spring',\n      ...animationsProp[key],\n    }\n  }\n\n  return {\n    // this is only used by Sheet basically for now to pass result of useAnimatedStyle to\n    View: MotionView,\n    Text: MotionText,\n    isReactNative: false,\n    supportsCSSVars: true,\n    needsWebStyles: true,\n    avoidReRenders: true,\n    animations,\n    usePresence,\n    ResetPresence,\n\n    useAnimations: (animationProps) => {\n      const { props, style, componentState, stateRef, useStyleEmitter } = animationProps\n\n      const animationKey = Array.isArray(props.animation)\n        ? props.animation[0]\n        : props.animation\n\n      const isHydrating = componentState.unmounted === true\n      const disableAnimation = isHydrating || !animationKey\n      const presenceContext = React.useContext(PresenceContext)\n\n      const [scope, animate] = useAnimate()\n      const lastAnimationStyle = useRef<Object | null>(null)\n      const controls = useRef<AnimationPlaybackControlsWithThen | null>(null)\n      const styleKey = JSON.stringify(style)\n\n      const { dontAnimate, doAnimate, animationOptions } = useMemo(() => {\n        const motionAnimationState = getMotionAnimatedProps(\n          props as any,\n          style,\n          disableAnimation\n        )\n        return motionAnimationState\n      }, [presenceContext, animationKey, styleKey])\n\n      // const id = useId()\n\n      const runAnimation = (\n        animationStyle: Record<string, unknown> | null,\n        animationOptions: AnimationOptions | undefined\n      ) => {\n        if (!animationStyle) return\n        if (!(stateRef.current.host instanceof HTMLElement)) {\n          return\n        }\n\n        // ideally this would just come from tamagui\n        fixStyles(animationStyle)\n        styleToCSS(animationStyle)\n\n        if (!lastAnimationStyle.current) {\n          // console.log('first', id, animationStyle)\n          lastAnimationStyle.current = animationStyle\n          controls.current = animate(scope.current, animationStyle, {\n            duration: 0,\n            type: 'tween',\n          })\n          controls.current.complete()\n          return\n        }\n\n        const diff = {}\n        for (const key in animationStyle) {\n          if (animationStyle[key] !== lastAnimationStyle.current[key]) {\n            diff[key] = animationStyle[key]\n          }\n        }\n\n        // console.log('animate', id, diff)\n        controls.current = animate(scope.current, diff, animationOptions)\n        lastAnimationStyle.current = animationStyle\n      }\n\n      useStyleEmitter?.((nextStyle) => {\n        const { doAnimate, animationOptions } = getMotionAnimatedProps(\n          props as any,\n          nextStyle,\n          disableAnimation\n        )\n        runAnimation(doAnimate, animationOptions)\n      })\n\n      // strict mode correctness fix, idk why i thought it would clear a useRef\n      // before running strict? if you remove this you'll see the next\n      // useLayoutEffect re-run and animate due to lastAnimationStyle.current\n      // being set when in theory it should be clear\n      useEffect(() => {\n        return () => {\n          lastAnimationStyle.current = null\n        }\n      }, [])\n\n      useLayoutEffect(() => {\n        if (!doAnimate) return\n        runAnimation(doAnimate, animationOptions)\n      }, [JSON.stringify(doAnimate), lastAnimationStyle])\n\n      if (\n        process.env.NODE_ENV === 'development' &&\n        props['debug'] &&\n        props['debug'] !== 'profile'\n      ) {\n        console.info(`[animations-motion](`, JSON.stringify(doAnimate, null, 2) + ')', {\n          doAnimate,\n          dontAnimate,\n          animationOptions,\n          props,\n        })\n      }\n\n      // console.log('render', id, scope)\n\n      return {\n        style: dontAnimate,\n        ref: scope,\n        tag: 'div',\n      }\n    },\n\n    useAnimatedNumber(initial): UniversalAnimatedNumber<MotionAnimatedNumber> {\n      const motionValue = useMotionValue(initial)\n\n      return React.useMemo(\n        () => ({\n          getInstance() {\n            return motionValue\n          },\n          getValue() {\n            return motionValue.get()\n          },\n          setValue(next, config = { type: 'spring' }, onFinish) {\n            if (config.type === 'direct') {\n              MotionValueStrategy.set(motionValue, {\n                type: 'direct',\n              })\n              motionValue.set(next)\n              onFinish?.()\n            } else {\n              MotionValueStrategy.set(motionValue, config)\n\n              if (onFinish) {\n                const unsubscribe = motionValue.on('change', (value) => {\n                  if (Math.abs(value - next) < 0.01) {\n                    unsubscribe()\n                    onFinish()\n                  }\n                })\n              }\n\n              motionValue.set(next)\n              // Motion doesn't have a direct onFinish callback, so we simulate it\n            }\n          },\n          stop() {\n            motionValue.stop()\n          },\n        }),\n        [motionValue]\n      )\n    },\n\n    useAnimatedNumberReaction({ value }, onValue) {\n      const instance = value.getInstance() as MotionValue<number>\n      useMotionValueEvent(instance, 'change', onValue)\n    },\n\n    useAnimatedNumberStyle(val, getStyleProp) {\n      const motionValue = val.getInstance() as MotionValue<number>\n      const getStyleRef = useRef<typeof getStyleProp>(getStyleProp)\n\n      // we need to change useAnimatedNumberStyle to have dep args to be concurrent safe\n      getStyleRef.current = getStyleProp\n\n      // never changes\n      return useMemo(() => {\n        return {\n          getStyle: (cur) => {\n            return getStyleRef.current(cur)\n          },\n          motionValue,\n        } satisfies MotionAnimatedNumberStyle\n      }, [])\n    },\n  }\n\n  function getMotionAnimatedProps(\n    props: { animation: AnimationProp | null; animateOnly?: string[] },\n    style: Record<string, unknown>,\n    disable = false\n  ) {\n    if (disable) {\n      return {\n        dontAnimate: style,\n        doAnimate: null,\n      }\n    }\n\n    const animationOptions = animationPropToAnimationConfig(props.animation)\n\n    let dontAnimate = {}\n    let doAnimate: Record<string, unknown> | null = null\n\n    const animateOnly = props.animateOnly as string[] | undefined\n    for (const key in style) {\n      const value = style[key]\n      if (disableAnimationProps.has(key) || (animateOnly && !animateOnly.includes(key))) {\n        dontAnimate[key] = value\n      } else {\n        doAnimate ||= {}\n        doAnimate[key] = value\n      }\n    }\n\n    return {\n      dontAnimate,\n      doAnimate,\n      animationOptions,\n    }\n  }\n\n  function animationPropToAnimationConfig(\n    animationProp: AnimationProp | null\n  ): AnimationOptions {\n    let defaultAnimationKey = ''\n    let specificAnimations = {}\n\n    if (typeof animationProp === 'string') {\n      defaultAnimationKey = animationProp\n    } else if (Array.isArray(animationProp)) {\n      if (typeof animationProp[0] === 'string') {\n        defaultAnimationKey = animationProp[0]\n        specificAnimations = animationProp[1]\n      } else {\n        specificAnimations = animationProp\n      }\n    }\n\n    if (!defaultAnimationKey) {\n      return {}\n    }\n\n    return {\n      default: animations[defaultAnimationKey],\n      ...Object.fromEntries(\n        Object.keys(specificAnimations).flatMap((key) => {\n          if (animations[key]) {\n            return [[key, animations[key]]]\n          }\n          return []\n        })\n      ),\n    }\n  }\n}\n\n// sort of temporary\nconst disableAnimationProps = new Set<string>([\n  'alignContent',\n  'alignItems',\n  'backdropFilter',\n  'boxSizing',\n  'contain',\n  'display',\n  'flexBasis',\n  'flexDirection',\n  'flexShrink',\n  'justifyContent',\n  'maxHeight',\n  'maxWidth',\n  'minHeight',\n  'minWidth',\n  'overflow',\n  'pointerEvents',\n  'position',\n  'textWrap',\n])\n\nconst MotionView = createMotionView('div')\nconst MotionText = createMotionView('span')\n\nfunction createMotionView(defaultTag: string) {\n  // return forwardRef((props: any, ref) => {\n  //   console.log('rendering?', props)\n  //   const Element = motion[props.tag || defaultTag]\n  //   return <Element ref={ref} {...props} />\n  // })\n  const isText = defaultTag === 'span'\n\n  const Component = forwardRef((propsIn: any, ref) => {\n    const { forwardedRef, animation, tag = defaultTag, style, ...propsRest } = propsIn\n    const [scope, animate] = useAnimate()\n    const hostRef = useRef<HTMLElement>(null)\n    const composedRefs = useComposedRefs(forwardedRef, ref, hostRef, scope)\n\n    const stateRef = useRef<any>(null)\n    if (!stateRef.current) {\n      stateRef.current = {\n        get host() {\n          return hostRef.current\n        },\n      }\n    }\n\n    const [_, state] = useThemeWithState({})\n\n    const styles = Array.isArray(style) ? style : [style]\n\n    // we can assume just one animatedStyle max for now\n    const [animatedStyle, nonAnimatedStyles] = (() => {\n      return [\n        styles.find((x) => x.getStyle) as MotionAnimatedNumberStyle | undefined,\n        styles.filter((x) => !x.getStyle),\n      ] as const\n    })()\n\n    function getProps(props: any) {\n      const out = getSplitStyles(\n        props,\n        isText ? Text.staticConfig : View.staticConfig,\n        state?.theme!,\n        state?.name!,\n        {\n          unmounted: false,\n        },\n        {\n          isAnimated: false,\n          noClass: true,\n          // noMergeStyle: true,\n          resolveValues: 'auto',\n        }\n      )\n\n      // we can definitely get rid of this here\n      if (out.viewProps.style) {\n        fixStyles(out.viewProps.style)\n        styleToCSS(out.viewProps.style)\n      }\n\n      return out.viewProps\n    }\n\n    const props = getProps({ ...propsRest, style: nonAnimatedStyles })\n    const Element = tag || 'div'\n    const transformedProps = hooks.usePropsTransform?.(tag, props, stateRef, false)\n\n    useEffect(() => {\n      if (!animatedStyle) return\n\n      return animatedStyle.motionValue.on('change', (value) => {\n        const nextStyle = animatedStyle.getStyle(value)\n        const animationConfig = MotionValueStrategy.get(animatedStyle.motionValue)\n        const node = hostRef.current\n\n        const webStyle = getProps({ style: nextStyle }).style\n\n        if (webStyle && node instanceof HTMLElement) {\n          const motionAnimationConfig =\n            animationConfig?.type === 'timing'\n              ? {\n                  type: 'tween',\n                  duration: (animationConfig?.duration || 0) / 1000,\n                }\n              : animationConfig?.type === 'direct'\n                ? { type: 'tween', duration: 0 }\n                : {\n                    type: 'spring',\n                    ...(animationConfig as any),\n                  }\n\n          animate(node, webStyle as any, motionAnimationConfig)\n        }\n      })\n    }, [animatedStyle])\n\n    return <Element {...transformedProps} ref={composedRefs} />\n  })\n\n  Component['acceptTagProp'] = true\n\n  return Component\n}\n"
   ],
   "version": 3
 }