@tamagui/animations-css 1.22.12 → 1.23.0

package/dist/cjs/createAnimations.js

@@ -21,6 +21,7 @@ __export(createAnimations_exports, {
   createAnimations: () => createAnimations
 });
 module.exports = __toCommonJS(createAnimations_exports);
+var import_cubic_bezier_animator = require("@tamagui/cubic-bezier-animator");
 var import_use_presence = require("@tamagui/use-presence");
 var import_web = require("@tamagui/web");
 var import_react = require("react");
@@ -71,6 +72,7 @@ function createAnimations(animations) {
       const isEntering = !!state.unmounted;
       const isExiting = (presence == null ? void 0 : presence[0]) === false;
       const sendExitComplete = presence == null ? void 0 : presence[1];
+      const initialPositionRef = (0, import_web.useSafeRef)(null);
       const animationKey = Array.isArray(props.animation) ? props.animation[0] : props.animation;
       const animation = animations[animationKey];
       if (!animation) {
@@ -91,7 +93,32 @@ function createAnimations(animations) {
           node.addEventListener("transitioncancel", onFinishAnimation);
         };
       }, [sendExitComplete, isExiting]);
-      style.transition = `${keys} ${animation}`;
+      (0, import_web.useIsomorphicLayoutEffect)(() => {
+        var _a;
+        if (!hostRef.current || !props.layout) {
+          return;
+        }
+        const boundingBox = (_a = hostRef.current) == null ? void 0 : _a.getBoundingClientRect();
+        if (isChanged(initialPositionRef.current, boundingBox)) {
+          const transform = invert(
+            hostRef.current,
+            boundingBox,
+            initialPositionRef.current
+          );
+          (0, import_cubic_bezier_animator.animate)({
+            from: transform,
+            to: { x: 0, y: 0, scaleX: 1, scaleY: 1 },
+            duration: 1e3,
+            onUpdate: ({ x, y, scaleX, scaleY }) => {
+              hostRef.current.style.transform = `translate(${x}px, ${y}px) scaleX(${scaleX}) scaleY(${scaleY})`;
+            },
+            // TODO: extract ease-in from string and convert/map it to a cubicBezier array
+            cubicBezier: [0, 1.38, 1, -0.41]
+          });
+        }
+        initialPositionRef.current = boundingBox;
+      });
+      style.transition = `${keys} ${animation}${props.layout ? ",width 0s, height 0s, margin 0s, padding 0s, transform" : ""}`;
       if (process.env.NODE_ENV === "development" && props["debug"]) {
         console.log("CSS animation", style, { isEntering, isExiting });
       }
@@ -101,6 +128,23 @@ function createAnimations(animations) {
     }
   };
 }
+const isChanged = (initialBox, finalBox) => {
+  if (!initialBox || !finalBox)
+    return false;
+  return JSON.stringify(initialBox) !== JSON.stringify(finalBox);
+};
+const invert = (el, from, to) => {
+  const { x: fromX, y: fromY, width: fromWidth, height: fromHeight } = from;
+  const { x, y, width, height } = to;
+  const transform = {
+    x: x - fromX - (fromWidth - width) / 2,
+    y: y - fromY - (fromHeight - height) / 2,
+    scaleX: width / fromWidth,
+    scaleY: height / fromHeight
+  };
+  el.style.transform = `translate(${transform.x}px, ${transform.y}px) scaleX(${transform.scaleX}) scaleY(${transform.scaleY})`;
+  return transform;
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   createAnimations

package/dist/cjs/createAnimations.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
   "sources": ["../../src/createAnimations.tsx"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAA4B;AAC5B,iBAMO;AACP,mBAA0C;AAEnC,SAAS,iBAAmC,YAAmC;AACpF,SAAO;AAAA,IACL,MAAM;AAAA,IACN,MAAM;AAAA,IACN;AAAA,IACA;AAAA,IAEA,kBAAkB,SAA0C;AAC1D,YAAM,CAAC,KAAK,MAAM,QAAI,uBAAS,OAAO;AAEtC,aAAO;AAAA,QACL,cAAc;AACZ,iBAAO;AAAA,QACT;AAAA,QACA,WAAW;AACT,iBAAO;AAAA,QACT;AAAA,QACA,SAAS,MAAM;AACb,iBAAO,IAAI;AAAA,QACb;AAAA,QACA,OAAO;AAAA,QAAC;AAAA,MACV;AAAA,IACF;AAAA,IAEA,0BAA0B,EAAE,SAAS,MAAM,GAAG,SAAS;AAErD,gDAA0B,MAAM;AAC9B,YAAI,CAAC,QAAQ;AAAS;AACtB,cAAM,oBAAoB,CAAC,MAAuB;AAChD,kBAAQ,MAAM,SAAS,CAAC;AAAA,QAC1B;AAEA,cAAM,OAAO,QAAQ;AACrB,aAAK,iBAAiB,mBAAmB,iBAAiB;AAC1D,aAAK,iBAAiB,oBAAoB,iBAAiB;AAC3D,aAAK,iBAAiB,iBAAiB,iBAAiB;AACxD,eAAO,MAAM;AACX,eAAK,oBAAoB,mBAAmB,iBAAiB;AAC7D,eAAK,oBAAoB,oBAAoB,iBAAiB;AAC9D,eAAK,oBAAoB,iBAAiB,iBAAiB;AAAA,QAC7D;AAAA,MACF,GAAG,CAAC,SAAS,OAAO,CAAC;AAAA,IACvB;AAAA,IAEA,uBAAuB,KAAK,UAAU;AACpC,aAAO,SAAS,IAAI,SAAS,CAAC;AAAA,IAChC;AAAA,IAEA,eAAe,CAAC,EAAE,OAAO,UAAU,OAAO,OAAO,QAAQ,MAAM;AAC7D,YAAM,aAAa,CAAC,CAAC,MAAM;AAC3B,YAAM,aAAY,qCAAW,QAAO;AACpC,YAAM,mBAAmB,qCAAW;AACpC,YAAM,eAAe,MAAM,QAAQ,MAAM,SAAS,IAC9C,MAAM,UAAU,CAAC,IACjB,MAAM;AACV,YAAM,YAAY,WAAW,YAAmB;AAChD,UAAI,CAAC,WAAW;AACd,eAAO;AAAA,MACT;AAEA,YAAM,OAAO,MAAM,cAAc,MAAM,YAAY,KAAK,GAAG,IAAI;AAE/D,gDAA0B,MAAM;AAC9B,YAAI,CAAC,oBAAoB,CAAC,aAAa,CAAC,QAAQ;AAAS;AACzD,cAAM,OAAO,QAAQ;AACrB,cAAM,oBAAoB,MAAM;AAC9B;AAAA,QACF;AACA,aAAK,iBAAiB,iBAAiB,iBAAiB;AACxD,aAAK,iBAAiB,oBAAoB,iBAAiB;AAC3D,eAAO,MAAM;AACX,eAAK,oBAAoB,iBAAiB,iBAAiB;AAC3D,eAAK,iBAAiB,oBAAoB,iBAAiB;AAAA,QAC7D;AAAA,MACF,GAAG,CAAC,kBAAkB,SAAS,CAAC;AAGhC,YAAM,aAAa,GAAG,QAAQ;AAE9B,UAAI,QAAQ,IAAI,aAAa,iBAAiB,MAAM,OAAO,GAAG;AAE5D,gBAAQ,IAAI,iBAAiB,OAAO,EAAE,YAAY,UAAU,CAAC;AAAA,MAC/D;AAEA,iBAAO,sBAAQ,MAAM;AACnB,eAAO,EAAE,MAAM;AAAA,MAEjB,GAAG,CAAC,KAAK,UAAU,KAAK,CAAC,CAAC;AAAA,IAC5B;AAAA,EACF;AACF;",
+  "mappings": "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",
   "names": []
 }

package/dist/esm/createAnimations.js

@@ -1,8 +1,10 @@
+import { animate } from "@tamagui/cubic-bezier-animator";
 import { usePresence } from "@tamagui/use-presence";
 import {
   Stack,
   Text,
-  useIsomorphicLayoutEffect
+  useIsomorphicLayoutEffect,
+  useSafeRef
 } from "@tamagui/web";
 import { useMemo, useState } from "react";
 function createAnimations(animations) {
@@ -52,6 +54,7 @@ function createAnimations(animations) {
       const isEntering = !!state.unmounted;
       const isExiting = (presence == null ? void 0 : presence[0]) === false;
       const sendExitComplete = presence == null ? void 0 : presence[1];
+      const initialPositionRef = useSafeRef(null);
       const animationKey = Array.isArray(props.animation) ? props.animation[0] : props.animation;
       const animation = animations[animationKey];
       if (!animation) {
@@ -72,7 +75,32 @@ function createAnimations(animations) {
           node.addEventListener("transitioncancel", onFinishAnimation);
         };
       }, [sendExitComplete, isExiting]);
-      style.transition = `${keys} ${animation}`;
+      useIsomorphicLayoutEffect(() => {
+        var _a;
+        if (!hostRef.current || !props.layout) {
+          return;
+        }
+        const boundingBox = (_a = hostRef.current) == null ? void 0 : _a.getBoundingClientRect();
+        if (isChanged(initialPositionRef.current, boundingBox)) {
+          const transform = invert(
+            hostRef.current,
+            boundingBox,
+            initialPositionRef.current
+          );
+          animate({
+            from: transform,
+            to: { x: 0, y: 0, scaleX: 1, scaleY: 1 },
+            duration: 1e3,
+            onUpdate: ({ x, y, scaleX, scaleY }) => {
+              hostRef.current.style.transform = `translate(${x}px, ${y}px) scaleX(${scaleX}) scaleY(${scaleY})`;
+            },
+            // TODO: extract ease-in from string and convert/map it to a cubicBezier array
+            cubicBezier: [0, 1.38, 1, -0.41]
+          });
+        }
+        initialPositionRef.current = boundingBox;
+      });
+      style.transition = `${keys} ${animation}${props.layout ? ",width 0s, height 0s, margin 0s, padding 0s, transform" : ""}`;
       if (process.env.NODE_ENV === "development" && props["debug"]) {
         console.log("CSS animation", style, { isEntering, isExiting });
       }
@@ -82,6 +110,23 @@ function createAnimations(animations) {
     }
   };
 }
+const isChanged = (initialBox, finalBox) => {
+  if (!initialBox || !finalBox)
+    return false;
+  return JSON.stringify(initialBox) !== JSON.stringify(finalBox);
+};
+const invert = (el, from, to) => {
+  const { x: fromX, y: fromY, width: fromWidth, height: fromHeight } = from;
+  const { x, y, width, height } = to;
+  const transform = {
+    x: x - fromX - (fromWidth - width) / 2,
+    y: y - fromY - (fromHeight - height) / 2,
+    scaleX: width / fromWidth,
+    scaleY: height / fromHeight
+  };
+  el.style.transform = `translate(${transform.x}px, ${transform.y}px) scaleX(${transform.scaleX}) scaleY(${transform.scaleY})`;
+  return transform;
+};
 export {
   createAnimations
 };

package/dist/esm/createAnimations.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
   "sources": ["../../src/createAnimations.tsx"],
-  "mappings": "AAAA,SAAS,mBAAmB;AAC5B;AAAA,EAEE;AAAA,EACA;AAAA,EAEA;AAAA,OACK;AACP,SAAS,SAAiB,gBAAgB;AAEnC,SAAS,iBAAmC,YAAmC;AACpF,SAAO;AAAA,IACL,MAAM;AAAA,IACN;AAAA,IACA;AAAA,IACA;AAAA,IAEA,kBAAkB,SAA0C;AAC1D,YAAM,CAAC,KAAK,MAAM,IAAI,SAAS,OAAO;AAEtC,aAAO;AAAA,QACL,cAAc;AACZ,iBAAO;AAAA,QACT;AAAA,QACA,WAAW;AACT,iBAAO;AAAA,QACT;AAAA,QACA,SAAS,MAAM;AACb,iBAAO,IAAI;AAAA,QACb;AAAA,QACA,OAAO;AAAA,QAAC;AAAA,MACV;AAAA,IACF;AAAA,IAEA,0BAA0B,EAAE,SAAS,MAAM,GAAG,SAAS;AAErD,gCAA0B,MAAM;AAC9B,YAAI,CAAC,QAAQ;AAAS;AACtB,cAAM,oBAAoB,CAAC,MAAuB;AAChD,kBAAQ,MAAM,SAAS,CAAC;AAAA,QAC1B;AAEA,cAAM,OAAO,QAAQ;AACrB,aAAK,iBAAiB,mBAAmB,iBAAiB;AAC1D,aAAK,iBAAiB,oBAAoB,iBAAiB;AAC3D,aAAK,iBAAiB,iBAAiB,iBAAiB;AACxD,eAAO,MAAM;AACX,eAAK,oBAAoB,mBAAmB,iBAAiB;AAC7D,eAAK,oBAAoB,oBAAoB,iBAAiB;AAC9D,eAAK,oBAAoB,iBAAiB,iBAAiB;AAAA,QAC7D;AAAA,MACF,GAAG,CAAC,SAAS,OAAO,CAAC;AAAA,IACvB;AAAA,IAEA,uBAAuB,KAAK,UAAU;AACpC,aAAO,SAAS,IAAI,SAAS,CAAC;AAAA,IAChC;AAAA,IAEA,eAAe,CAAC,EAAE,OAAO,UAAU,OAAO,OAAO,QAAQ,MAAM;AAC7D,YAAM,aAAa,CAAC,CAAC,MAAM;AAC3B,YAAM,aAAY,qCAAW,QAAO;AACpC,YAAM,mBAAmB,qCAAW;AACpC,YAAM,eAAe,MAAM,QAAQ,MAAM,SAAS,IAC9C,MAAM,UAAU,CAAC,IACjB,MAAM;AACV,YAAM,YAAY,WAAW,YAAmB;AAChD,UAAI,CAAC,WAAW;AACd,eAAO;AAAA,MACT;AAEA,YAAM,OAAO,MAAM,cAAc,MAAM,YAAY,KAAK,GAAG,IAAI;AAE/D,gCAA0B,MAAM;AAC9B,YAAI,CAAC,oBAAoB,CAAC,aAAa,CAAC,QAAQ;AAAS;AACzD,cAAM,OAAO,QAAQ;AACrB,cAAM,oBAAoB,MAAM;AAC9B;AAAA,QACF;AACA,aAAK,iBAAiB,iBAAiB,iBAAiB;AACxD,aAAK,iBAAiB,oBAAoB,iBAAiB;AAC3D,eAAO,MAAM;AACX,eAAK,oBAAoB,iBAAiB,iBAAiB;AAC3D,eAAK,iBAAiB,oBAAoB,iBAAiB;AAAA,QAC7D;AAAA,MACF,GAAG,CAAC,kBAAkB,SAAS,CAAC;AAGhC,YAAM,aAAa,GAAG,QAAQ;AAE9B,UAAI,QAAQ,IAAI,aAAa,iBAAiB,MAAM,OAAO,GAAG;AAE5D,gBAAQ,IAAI,iBAAiB,OAAO,EAAE,YAAY,UAAU,CAAC;AAAA,MAC/D;AAEA,aAAO,QAAQ,MAAM;AACnB,eAAO,EAAE,MAAM;AAAA,MAEjB,GAAG,CAAC,KAAK,UAAU,KAAK,CAAC,CAAC;AAAA,IAC5B;AAAA,EACF;AACF;",
+  "mappings": "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",
   "names": []
 }

package/dist/esm/createAnimations.mjs

@@ -1,8 +1,10 @@
+import { animate } from "@tamagui/cubic-bezier-animator";
 import { usePresence } from "@tamagui/use-presence";
 import {
   Stack,
   Text,
-  useIsomorphicLayoutEffect
+  useIsomorphicLayoutEffect,
+  useSafeRef
 } from "@tamagui/web";
 import { useMemo, useState } from "react";
 function createAnimations(animations) {
@@ -52,6 +54,7 @@ function createAnimations(animations) {
       const isEntering = !!state.unmounted;
       const isExiting = (presence == null ? void 0 : presence[0]) === false;
       const sendExitComplete = presence == null ? void 0 : presence[1];
+      const initialPositionRef = useSafeRef(null);
       const animationKey = Array.isArray(props.animation) ? props.animation[0] : props.animation;
       const animation = animations[animationKey];
       if (!animation) {
@@ -72,7 +75,32 @@ function createAnimations(animations) {
           node.addEventListener("transitioncancel", onFinishAnimation);
         };
       }, [sendExitComplete, isExiting]);
-      style.transition = `${keys} ${animation}`;
+      useIsomorphicLayoutEffect(() => {
+        var _a;
+        if (!hostRef.current || !props.layout) {
+          return;
+        }
+        const boundingBox = (_a = hostRef.current) == null ? void 0 : _a.getBoundingClientRect();
+        if (isChanged(initialPositionRef.current, boundingBox)) {
+          const transform = invert(
+            hostRef.current,
+            boundingBox,
+            initialPositionRef.current
+          );
+          animate({
+            from: transform,
+            to: { x: 0, y: 0, scaleX: 1, scaleY: 1 },
+            duration: 1e3,
+            onUpdate: ({ x, y, scaleX, scaleY }) => {
+              hostRef.current.style.transform = `translate(${x}px, ${y}px) scaleX(${scaleX}) scaleY(${scaleY})`;
+            },
+            // TODO: extract ease-in from string and convert/map it to a cubicBezier array
+            cubicBezier: [0, 1.38, 1, -0.41]
+          });
+        }
+        initialPositionRef.current = boundingBox;
+      });
+      style.transition = `${keys} ${animation}${props.layout ? ",width 0s, height 0s, margin 0s, padding 0s, transform" : ""}`;
       if (process.env.NODE_ENV === "development" && props["debug"]) {
         console.log("CSS animation", style, { isEntering, isExiting });
       }
@@ -82,6 +110,23 @@ function createAnimations(animations) {
     }
   };
 }
+const isChanged = (initialBox, finalBox) => {
+  if (!initialBox || !finalBox)
+    return false;
+  return JSON.stringify(initialBox) !== JSON.stringify(finalBox);
+};
+const invert = (el, from, to) => {
+  const { x: fromX, y: fromY, width: fromWidth, height: fromHeight } = from;
+  const { x, y, width, height } = to;
+  const transform = {
+    x: x - fromX - (fromWidth - width) / 2,
+    y: y - fromY - (fromHeight - height) / 2,
+    scaleX: width / fromWidth,
+    scaleY: height / fromHeight
+  };
+  el.style.transform = `translate(${transform.x}px, ${transform.y}px) scaleX(${transform.scaleX}) scaleY(${transform.scaleY})`;
+  return transform;
+};
 export {
   createAnimations
 };

package/dist/esm/createAnimations.mjs.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
   "sources": ["../../src/createAnimations.tsx"],
-  "mappings": "AAAA,SAAS,mBAAmB;AAC5B;AAAA,EAEE;AAAA,EACA;AAAA,EAEA;AAAA,OACK;AACP,SAAS,SAAiB,gBAAgB;AAEnC,SAAS,iBAAmC,YAAmC;AACpF,SAAO;AAAA,IACL,MAAM;AAAA,IACN;AAAA,IACA;AAAA,IACA;AAAA,IAEA,kBAAkB,SAA0C;AAC1D,YAAM,CAAC,KAAK,MAAM,IAAI,SAAS,OAAO;AAEtC,aAAO;AAAA,QACL,cAAc;AACZ,iBAAO;AAAA,QACT;AAAA,QACA,WAAW;AACT,iBAAO;AAAA,QACT;AAAA,QACA,SAAS,MAAM;AACb,iBAAO,IAAI;AAAA,QACb;AAAA,QACA,OAAO;AAAA,QAAC;AAAA,MACV;AAAA,IACF;AAAA,IAEA,0BAA0B,EAAE,SAAS,MAAM,GAAG,SAAS;AAErD,gCAA0B,MAAM;AAC9B,YAAI,CAAC,QAAQ;AAAS;AACtB,cAAM,oBAAoB,CAAC,MAAuB;AAChD,kBAAQ,MAAM,SAAS,CAAC;AAAA,QAC1B;AAEA,cAAM,OAAO,QAAQ;AACrB,aAAK,iBAAiB,mBAAmB,iBAAiB;AAC1D,aAAK,iBAAiB,oBAAoB,iBAAiB;AAC3D,aAAK,iBAAiB,iBAAiB,iBAAiB;AACxD,eAAO,MAAM;AACX,eAAK,oBAAoB,mBAAmB,iBAAiB;AAC7D,eAAK,oBAAoB,oBAAoB,iBAAiB;AAC9D,eAAK,oBAAoB,iBAAiB,iBAAiB;AAAA,QAC7D;AAAA,MACF,GAAG,CAAC,SAAS,OAAO,CAAC;AAAA,IACvB;AAAA,IAEA,uBAAuB,KAAK,UAAU;AACpC,aAAO,SAAS,IAAI,SAAS,CAAC;AAAA,IAChC;AAAA,IAEA,eAAe,CAAC,EAAE,OAAO,UAAU,OAAO,OAAO,QAAQ,MAAM;AAC7D,YAAM,aAAa,CAAC,CAAC,MAAM;AAC3B,YAAM,aAAY,qCAAW,QAAO;AACpC,YAAM,mBAAmB,qCAAW;AACpC,YAAM,eAAe,MAAM,QAAQ,MAAM,SAAS,IAC9C,MAAM,UAAU,CAAC,IACjB,MAAM;AACV,YAAM,YAAY,WAAW,YAAmB;AAChD,UAAI,CAAC,WAAW;AACd,eAAO;AAAA,MACT;AAEA,YAAM,OAAO,MAAM,cAAc,MAAM,YAAY,KAAK,GAAG,IAAI;AAE/D,gCAA0B,MAAM;AAC9B,YAAI,CAAC,oBAAoB,CAAC,aAAa,CAAC,QAAQ;AAAS;AACzD,cAAM,OAAO,QAAQ;AACrB,cAAM,oBAAoB,MAAM;AAC9B;AAAA,QACF;AACA,aAAK,iBAAiB,iBAAiB,iBAAiB;AACxD,aAAK,iBAAiB,oBAAoB,iBAAiB;AAC3D,eAAO,MAAM;AACX,eAAK,oBAAoB,iBAAiB,iBAAiB;AAC3D,eAAK,iBAAiB,oBAAoB,iBAAiB;AAAA,QAC7D;AAAA,MACF,GAAG,CAAC,kBAAkB,SAAS,CAAC;AAGhC,YAAM,aAAa,GAAG,QAAQ;AAE9B,UAAI,QAAQ,IAAI,aAAa,iBAAiB,MAAM,OAAO,GAAG;AAE5D,gBAAQ,IAAI,iBAAiB,OAAO,EAAE,YAAY,UAAU,CAAC;AAAA,MAC/D;AAEA,aAAO,QAAQ,MAAM;AACnB,eAAO,EAAE,MAAM;AAAA,MAEjB,GAAG,CAAC,KAAK,UAAU,KAAK,CAAC,CAAC;AAAA,IAC5B;AAAA,EACF;AACF;",
+  "mappings": "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",
   "names": []
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/animations-css",
-  "version": "1.22.12",
+  "version": "1.23.0",
   "source": "src/index.ts",
   "sideEffects": false,
   "license": "MIT",
@@ -13,11 +13,11 @@
     "dist"
   ],
   "dependencies": {
-    "@tamagui/use-presence": "1.22.12",
-    "@tamagui/web": "1.22.12"
+    "@tamagui/use-presence": "1.23.0",
+    "@tamagui/web": "1.23.0"
   },
   "devDependencies": {
-    "@tamagui/build": "1.22.12"
+    "@tamagui/build": "1.23.0"
   },
   "scripts": {
     "build": "tamagui-build",

package/src/createAnimations.tsx

@@ -1,3 +1,4 @@
+import { animate } from '@tamagui/cubic-bezier-animator'
 import { usePresence } from '@tamagui/use-presence'
 import {
   AnimationDriver,
@@ -5,8 +6,9 @@ import {
   Text,
   UniversalAnimatedNumber,
   useIsomorphicLayoutEffect,
+  useSafeRef,
 } from '@tamagui/web'
-import { useMemo, useRef, useState } from 'react'
+import { useMemo, useState } from 'react'
 
 export function createAnimations<A extends Object>(animations: A): AnimationDriver<A> {
   return {
@@ -60,6 +62,7 @@ export function createAnimations<A extends Object>(animations: A): AnimationDriv
       const isEntering = !!state.unmounted
       const isExiting = presence?.[0] === false
       const sendExitComplete = presence?.[1]
+      const initialPositionRef = useSafeRef<any>(null)
       const animationKey = Array.isArray(props.animation)
         ? props.animation[0]
         : props.animation
@@ -84,8 +87,44 @@ export function createAnimations<A extends Object>(animations: A): AnimationDriv
         }
       }, [sendExitComplete, isExiting])
 
+      useIsomorphicLayoutEffect(() => {
+        if (!hostRef.current || !props.layout) {
+          return
+        }
+        // @ts-ignore
+        const boundingBox = hostRef.current?.getBoundingClientRect()
+        if (isChanged(initialPositionRef.current, boundingBox)) {
+          const transform = invert(
+            hostRef.current,
+            boundingBox,
+            initialPositionRef.current
+          )
+
+          animate({
+            from: transform,
+            to: { x: 0, y: 0, scaleX: 1, scaleY: 1 },
+            duration: 1000,
+            onUpdate: ({ x, y, scaleX, scaleY }) => {
+              // @ts-ignore
+              hostRef.current.style.transform = `translate(${x}px, ${y}px) scaleX(${scaleX}) scaleY(${scaleY})`
+              // TODO: handle childRef inverse scale
+              //   childRef.current.style.transform = `scaleX(${1 / scaleX}) scaleY(${
+              //     1 / scaleY
+              //   })`
+            },
+            // TODO: extract ease-in from string and convert/map it to a cubicBezier array
+            cubicBezier: [0, 1.38, 1, -0.41],
+          })
+        }
+        initialPositionRef.current = boundingBox
+      })
+
       // add css transition
-      style.transition = `${keys} ${animation}`
+      // TODO: we disabled the transform transition, because it will create issue for inverse function and animate function
+      // for non layout transform properties either use animate function or find a workaround to do it with css
+      style.transition = `${keys} ${animation}${
+        props.layout ? ',width 0s, height 0s, margin 0s, padding 0s, transform' : ''
+      }`
 
       if (process.env.NODE_ENV === 'development' && props['debug']) {
         // rome-ignore lint/nursery/noConsoleLog: ok
@@ -99,3 +138,27 @@ export function createAnimations<A extends Object>(animations: A): AnimationDriv
     },
   }
 }
+
+const isChanged = (initialBox: any, finalBox: any) => {
+  // we just mounted, so we don't have complete data yet
+  if (!initialBox || !finalBox) return false
+
+  // deep compare the two boxes
+  return JSON.stringify(initialBox) !== JSON.stringify(finalBox)
+}
+
+const invert = (el, from, to) => {
+  const { x: fromX, y: fromY, width: fromWidth, height: fromHeight } = from
+  const { x, y, width, height } = to
+
+  const transform = {
+    x: x - fromX - (fromWidth - width) / 2,
+    y: y - fromY - (fromHeight - height) / 2,
+    scaleX: width / fromWidth,
+    scaleY: height / fromHeight,
+  }
+
+  el.style.transform = `translate(${transform.x}px, ${transform.y}px) scaleX(${transform.scaleX}) scaleY(${transform.scaleY})`
+
+  return transform
+}

package/types/createAnimations.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"createAnimations.d.ts","sourceRoot":"","sources":["../src/createAnimations.tsx"],"names":[],"mappings":"AACA,OAAO,EACL,eAAe,EAKhB,MAAM,cAAc,CAAA;AAGrB,wBAAgB,gBAAgB,CAAC,CAAC,SAAS,MAAM,EAAE,UAAU,EAAE,CAAC,GAAG,eAAe,CAAC,CAAC,CAAC,CA0FpF"}
+{"version":3,"file":"createAnimations.d.ts","sourceRoot":"","sources":["../src/createAnimations.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,eAAe,EAMhB,MAAM,cAAc,CAAA;AAGrB,wBAAgB,gBAAgB,CAAC,CAAC,SAAS,MAAM,EAAE,UAAU,EAAE,CAAC,GAAG,eAAe,CAAC,CAAC,CAAC,CA+HpF"}