diff --git a/.changeset/pink-rivers-rush.md b/.changeset/pink-rivers-rush.md
new file mode 100644
index 0000000000..c9cb866725
--- /dev/null
+++ b/.changeset/pink-rivers-rush.md
@@ -0,0 +1,20 @@
+---
+"@nextui-org/accordion": patch
+"@nextui-org/autocomplete": patch
+"@nextui-org/button": patch
+"@nextui-org/calendar": patch
+"@nextui-org/card": patch
+"@nextui-org/dropdown": patch
+"@nextui-org/modal": patch
+"@nextui-org/navbar": patch
+"@nextui-org/popover": patch
+"@nextui-org/ripple": patch
+"@nextui-org/select": patch
+"@nextui-org/snippet": patch
+"@nextui-org/tabs": patch
+"@nextui-org/tooltip": patch
+"@nextui-org/system": patch
+"@nextui-org/framer-utils": patch
+---
+
+update `framer-motion` versions
diff --git a/.changeset/tiny-kids-thank.md b/.changeset/tiny-kids-thank.md
new file mode 100644
index 0000000000..71d470661f
--- /dev/null
+++ b/.changeset/tiny-kids-thank.md
@@ -0,0 +1,15 @@
+---
+"@nextui-org/accordion": patch
+"@nextui-org/calendar": patch
+"@nextui-org/modal": patch
+"@nextui-org/navbar": patch
+"@nextui-org/popover": patch
+"@nextui-org/ripple": patch
+"@nextui-org/tooltip": patch
+"@nextui-org/theme": patch
+"@nextui-org/use-infinite-scroll": patch
+"@nextui-org/dom-animation": patch
+"@nextui-org/shared-utils": patch
+---
+
+framer motion optimization (#3340)
diff --git a/apps/docs/package.json b/apps/docs/package.json
index bfaf58848c..1190dc3182 100644
--- a/apps/docs/package.json
+++ b/apps/docs/package.json
@@ -55,7 +55,7 @@
     "color2k": "^2.0.2",
     "contentlayer": "^0.3.4",
     "date-fns": "^2.30.0",
-    "framer-motion": "^11.1.7",
+    "framer-motion": "^11.2.12",
     "github-slugger": "^2.0.0",
     "gray-matter": "^4.0.3",
     "hast-util-to-html": "7.1.2",
diff --git a/packages/components/accordion/package.json b/packages/components/accordion/package.json
index eea9d9c92c..7f2ac0c069 100644
--- a/packages/components/accordion/package.json
+++ b/packages/components/accordion/package.json
@@ -42,7 +42,7 @@
   "peerDependencies": {
     "react": ">=18",
     "react-dom": ">=18",
-    "framer-motion": ">=10.17.0",
+    "framer-motion": ">=11.0.22",
     "@nextui-org/theme": ">=2.1.0",
     "@nextui-org/system": ">=2.0.0"
   },
@@ -54,6 +54,7 @@
     "@nextui-org/framer-utils": "workspace:*",
     "@nextui-org/divider": "workspace:*",
     "@nextui-org/use-aria-accordion": "workspace:*",
+    "@nextui-org/dom-animation": "workspace:*",
     "@react-aria/interactions": "3.21.3",
     "@react-aria/focus": "3.17.1",
     "@react-aria/utils": "3.24.1",
@@ -69,7 +70,7 @@
     "@nextui-org/avatar": "workspace:*",
     "@nextui-org/input": "workspace:*",
     "@nextui-org/test-utils": "workspace:*",
-    "framer-motion": "^11.0.22",
+    "framer-motion": "^11.2.12",
     "clean-package": "2.2.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0"
diff --git a/packages/components/accordion/src/accordion-item.tsx b/packages/components/accordion/src/accordion-item.tsx
index 16022bedd4..0c2ac20d87 100644
--- a/packages/components/accordion/src/accordion-item.tsx
+++ b/packages/components/accordion/src/accordion-item.tsx
@@ -3,13 +3,15 @@ import type {Variants} from "framer-motion";
 import {forwardRef} from "@nextui-org/system";
 import {useMemo, ReactNode} from "react";
 import {ChevronIcon} from "@nextui-org/shared-icons";
-import {AnimatePresence, LazyMotion, domAnimation, m, useWillChange} from "framer-motion";
+import {AnimatePresence, LazyMotion, m, useWillChange} from "framer-motion";
 import {TRANSITION_VARIANTS} from "@nextui-org/framer-utils";
 
 import {UseAccordionItemProps, useAccordionItem} from "./use-accordion-item";
 
 export interface AccordionItemProps extends UseAccordionItemProps {}
 
+const domAnimation = () => import("@nextui-org/dom-animation").then((res) => res.default);
+
 const AccordionItem = forwardRef<"button", AccordionItemProps>((props, ref) => {
   const {
     Component,
diff --git a/packages/components/autocomplete/package.json b/packages/components/autocomplete/package.json
index 67d769067b..19f991427b 100644
--- a/packages/components/autocomplete/package.json
+++ b/packages/components/autocomplete/package.json
@@ -36,7 +36,7 @@
   "peerDependencies": {
     "react": ">=18",
     "react-dom": ">=18",
-    "framer-motion": ">=10.17.0",
+    "framer-motion": ">=11.0.22",
     "@nextui-org/theme": ">=2.1.0",
     "@nextui-org/system": ">=2.0.0"
   },
@@ -71,7 +71,7 @@
     "@nextui-org/stories-utils": "workspace:*",
     "@nextui-org/use-infinite-scroll": "workspace:*",
     "@react-stately/data": "3.11.4",
-    "framer-motion": "^11.0.28",
+    "framer-motion": "^11.2.12",
     "clean-package": "2.2.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
diff --git a/packages/components/button/package.json b/packages/components/button/package.json
index b7e44122ef..6650cc2be8 100644
--- a/packages/components/button/package.json
+++ b/packages/components/button/package.json
@@ -36,7 +36,7 @@
   "peerDependencies": {
     "react": ">=18",
     "react-dom": ">=18",
-    "framer-motion": ">=10.17.0",
+    "framer-motion": ">=11.0.22",
     "@nextui-org/theme": ">=2.1.0",
     "@nextui-org/system": ">=2.0.0"
   },
diff --git a/packages/components/calendar/package.json b/packages/components/calendar/package.json
index 4be97746e0..4a9f1f55d2 100644
--- a/packages/components/calendar/package.json
+++ b/packages/components/calendar/package.json
@@ -46,6 +46,7 @@
     "@nextui-org/framer-utils": "workspace:*",
     "@nextui-org/use-aria-button": "workspace:*",
     "@nextui-org/button": "workspace:*",
+    "@nextui-org/dom-animation": "workspace:*",
     "@internationalized/date": "^3.5.4",
     "@react-aria/calendar": "3.5.8",
     "@react-aria/focus": "3.17.1",
@@ -65,7 +66,7 @@
     "@nextui-org/theme": "workspace:*",
     "@nextui-org/radio": "workspace:*",
     "@nextui-org/test-utils": "workspace:*",
-    "framer-motion": "^10.16.4",
+    "framer-motion": "^11.2.12",
     "clean-package": "2.2.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0"
diff --git a/packages/components/calendar/src/calendar-base.tsx b/packages/components/calendar/src/calendar-base.tsx
index 0d5def77b1..a3ad6392f6 100644
--- a/packages/components/calendar/src/calendar-base.tsx
+++ b/packages/components/calendar/src/calendar-base.tsx
@@ -3,13 +3,12 @@ import type {As, HTMLNextUIProps} from "@nextui-org/system";
 import type {ButtonProps} from "@nextui-org/button";
 import type {HTMLAttributes, ReactNode, RefObject} from "react";
 
-import {Fragment} from "react";
-import {useState} from "react";
+import {Fragment, useState} from "react";
 import {useLocale} from "@react-aria/i18n";
 import {VisuallyHidden} from "@react-aria/visually-hidden";
 import {Button} from "@nextui-org/button";
 import {chain, mergeProps} from "@react-aria/utils";
-import {AnimatePresence, LazyMotion, domAnimation, MotionConfig} from "framer-motion";
+import {AnimatePresence, LazyMotion, MotionConfig} from "framer-motion";
 import {ResizablePanel} from "@nextui-org/framer-utils";
 
 import {ChevronLeftIcon} from "./chevron-left";
@@ -20,6 +19,8 @@ import {CalendarHeader} from "./calendar-header";
 import {CalendarPicker} from "./calendar-picker";
 import {useCalendarContext} from "./calendar-context";
 
+const domAnimation = () => import("@nextui-org/dom-animation").then((res) => res.default);
+
 export interface CalendarBaseProps extends HTMLNextUIProps<"div"> {
   Component?: As;
   showHelper?: boolean;
diff --git a/packages/components/card/package.json b/packages/components/card/package.json
index b1a7048a34..3999ee656b 100644
--- a/packages/components/card/package.json
+++ b/packages/components/card/package.json
@@ -36,7 +36,7 @@
   "peerDependencies": {
     "react": ">=18",
     "react-dom": ">=18",
-    "framer-motion": ">=10.17.0",
+    "framer-motion": ">=11.0.22",
     "@nextui-org/theme": ">=2.1.0",
     "@nextui-org/system": ">=2.0.0"
   },
diff --git a/packages/components/dropdown/package.json b/packages/components/dropdown/package.json
index 6b9f7dc3f1..9d2d23c5fc 100644
--- a/packages/components/dropdown/package.json
+++ b/packages/components/dropdown/package.json
@@ -36,7 +36,7 @@
   "peerDependencies": {
     "react": ">=18",
     "react-dom": ">=18",
-    "framer-motion": ">=10.17.0",
+    "framer-motion": ">=11.0.22",
     "@nextui-org/theme": ">=2.1.0",
     "@nextui-org/system": ">=2.0.0"
   },
@@ -61,7 +61,7 @@
     "@nextui-org/image": "workspace:*",
     "@nextui-org/shared-icons": "workspace:*",
     "@nextui-org/test-utils": "workspace:*",
-    "framer-motion": "^11.0.22",
+    "framer-motion": "^11.2.12",
     "clean-package": "2.2.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0"
diff --git a/packages/components/modal/package.json b/packages/components/modal/package.json
index ab4a4ce7fa..9fe10c24ac 100644
--- a/packages/components/modal/package.json
+++ b/packages/components/modal/package.json
@@ -36,7 +36,7 @@
   "peerDependencies": {
     "react": ">=18",
     "react-dom": ">=18",
-    "framer-motion": ">=10.17.0",
+    "framer-motion": ">=11.0.22",
     "@nextui-org/theme": ">=2.1.0",
     "@nextui-org/system": ">=2.0.0"
   },
@@ -48,6 +48,7 @@
     "@nextui-org/react-utils": "workspace:*",
     "@nextui-org/shared-icons": "workspace:*",
     "@nextui-org/use-aria-modal-overlay": "workspace:*",
+    "@nextui-org/dom-animation": "workspace:*",
     "@react-aria/dialog": "3.5.14",
     "@react-aria/focus": "3.17.1",
     "@react-aria/interactions": "3.21.3",
@@ -64,7 +65,7 @@
     "@nextui-org/button": "workspace:*",
     "@nextui-org/link": "workspace:*",
     "react-lorem-component": "0.13.0",
-    "framer-motion": "^11.0.22",
+    "framer-motion": "^11.2.12",
     "clean-package": "2.2.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0"
diff --git a/packages/components/modal/src/modal-content.tsx b/packages/components/modal/src/modal-content.tsx
index 23fec3da48..336c0f2392 100644
--- a/packages/components/modal/src/modal-content.tsx
+++ b/packages/components/modal/src/modal-content.tsx
@@ -6,7 +6,7 @@ import {forwardRef} from "@nextui-org/system";
 import {DismissButton} from "@react-aria/overlays";
 import {TRANSITION_VARIANTS} from "@nextui-org/framer-utils";
 import {CloseIcon} from "@nextui-org/shared-icons";
-import {domAnimation, LazyMotion, m} from "framer-motion";
+import {LazyMotion, m} from "framer-motion";
 import {useDialog} from "@react-aria/dialog";
 import {chain, mergeProps} from "@react-aria/utils";
 import {HTMLNextUIProps} from "@nextui-org/system";
@@ -21,6 +21,8 @@ export interface ModalContentProps extends AriaDialogProps, HTMLNextUIProps<"div
   children: ReactNode | ((onClose: () => void) => ReactNode);
 }
 
+const domAnimation = () => import("@nextui-org/dom-animation").then((res) => res.default);
+
 const ModalContent = forwardRef<"div", ModalContentProps, KeysToOmit>((props, _) => {
   const {as, children, role = "dialog", ...otherProps} = props;
 
@@ -84,6 +86,8 @@ const ModalContent = forwardRef<"div", ModalContentProps, KeysToOmit>((props, _)
       return <div {...getBackdropProps()} />;
     }
 
+    const domAnimation = () => import("@nextui-org/dom-animation").then((res) => res.default);
+
     return (
       <LazyMotion features={domAnimation}>
         <m.div
diff --git a/packages/components/navbar/package.json b/packages/components/navbar/package.json
index 1698a4f9e0..aecb9bfa01 100644
--- a/packages/components/navbar/package.json
+++ b/packages/components/navbar/package.json
@@ -36,7 +36,7 @@
   "peerDependencies": {
     "react": ">=18",
     "react-dom": ">=18",
-    "framer-motion": ">=10.17.0",
+    "framer-motion": ">=11.0.22",
     "@nextui-org/theme": ">=2.1.0",
     "@nextui-org/system": ">=2.0.0"
   },
@@ -46,6 +46,7 @@
     "@nextui-org/framer-utils": "workspace:*",
     "@nextui-org/use-aria-toggle-button": "workspace:*",
     "@nextui-org/use-scroll-position": "workspace:*",
+    "@nextui-org/dom-animation": "workspace:*",
     "@react-aria/focus": "3.17.1",
     "@react-aria/interactions": "3.21.3",
     "@react-aria/overlays": "3.22.1",
diff --git a/packages/components/navbar/src/navbar-menu.tsx b/packages/components/navbar/src/navbar-menu.tsx
index 6b010b9e18..6b91b7a7d4 100644
--- a/packages/components/navbar/src/navbar-menu.tsx
+++ b/packages/components/navbar/src/navbar-menu.tsx
@@ -1,7 +1,7 @@
 import {forwardRef, HTMLNextUIProps} from "@nextui-org/system";
 import {useDOMRef} from "@nextui-org/react-utils";
 import {clsx, dataAttr} from "@nextui-org/shared-utils";
-import {AnimatePresence, domAnimation, HTMLMotionProps, LazyMotion, m} from "framer-motion";
+import {AnimatePresence, HTMLMotionProps, LazyMotion, m} from "framer-motion";
 import {mergeProps} from "@react-aria/utils";
 import {ReactElement, useCallback} from "react";
 import {RemoveScroll} from "react-remove-scroll";
@@ -23,6 +23,8 @@ export interface NavbarMenuProps extends HTMLNextUIProps<"ul"> {
   motionProps?: HTMLMotionProps<"ul">;
 }
 
+const domAnimation = () => import("@nextui-org/dom-animation").then((res) => res.default);
+
 const NavbarMenu = forwardRef<"ul", NavbarMenuProps>((props, ref) => {
   const {className, children, portalContainer, motionProps, style, ...otherProps} = props;
   const domRef = useDOMRef(ref);
diff --git a/packages/components/navbar/src/navbar.tsx b/packages/components/navbar/src/navbar.tsx
index 6fe07b9a1c..be7fdb3593 100644
--- a/packages/components/navbar/src/navbar.tsx
+++ b/packages/components/navbar/src/navbar.tsx
@@ -1,6 +1,6 @@
 import {forwardRef} from "@nextui-org/system";
 import {pickChildren} from "@nextui-org/react-utils";
-import {LazyMotion, domAnimation, m} from "framer-motion";
+import {LazyMotion, m} from "framer-motion";
 import {mergeProps} from "@react-aria/utils";
 
 import {hideOnScrollVariants} from "./navbar-transitions";
@@ -12,6 +12,8 @@ export interface NavbarProps extends Omit<UseNavbarProps, "hideOnScroll"> {
   children?: React.ReactNode | React.ReactNode[];
 }
 
+const domAnimation = () => import("@nextui-org/dom-animation").then((res) => res.default);
+
 const Navbar = forwardRef<"div", NavbarProps>((props, ref) => {
   const {children, ...otherProps} = props;
 
diff --git a/packages/components/popover/package.json b/packages/components/popover/package.json
index 599672dd25..a19f1f3529 100644
--- a/packages/components/popover/package.json
+++ b/packages/components/popover/package.json
@@ -36,7 +36,7 @@
   "peerDependencies": {
     "react": ">=18",
     "react-dom": ">=18",
-    "framer-motion": ">=10.17.0",
+    "framer-motion": ">=11.0.22",
     "@nextui-org/theme": ">=2.1.0",
     "@nextui-org/system": ">=2.0.0"
   },
@@ -48,6 +48,7 @@
     "@nextui-org/shared-utils": "workspace:*",
     "@nextui-org/react-utils": "workspace:*",
     "@nextui-org/use-safe-layout-effect": "workspace:*",
+    "@nextui-org/dom-animation": "workspace:*",
     "@react-aria/dialog": "3.5.14",
     "@react-aria/focus": "3.17.1",
     "@react-aria/interactions": "3.21.3",
@@ -63,7 +64,7 @@
     "@nextui-org/system": "workspace:*",
     "@nextui-org/input": "workspace:*",
     "@nextui-org/card": "workspace:*",
-    "framer-motion": "^11.0.22",
+    "framer-motion": "^11.2.12",
     "clean-package": "2.2.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0"
diff --git a/packages/components/popover/src/free-solo-popover.tsx b/packages/components/popover/src/free-solo-popover.tsx
index 036a0ce348..1dab904b20 100644
--- a/packages/components/popover/src/free-solo-popover.tsx
+++ b/packages/components/popover/src/free-solo-popover.tsx
@@ -10,7 +10,7 @@
 import * as React from "react";
 import {DismissButton, Overlay} from "@react-aria/overlays";
 import {forwardRef} from "@nextui-org/system";
-import {domAnimation, HTMLMotionProps, LazyMotion, m} from "framer-motion";
+import {HTMLMotionProps, LazyMotion, m} from "framer-motion";
 import {mergeProps} from "@react-aria/utils";
 import {getTransformOrigins} from "@nextui-org/aria-utils";
 import {TRANSITION_VARIANTS} from "@nextui-org/framer-utils";
@@ -34,6 +34,8 @@ type FreeSoloPopoverWrapperProps = {
   motionProps?: UsePopoverProps["motionProps"];
 } & React.HTMLAttributes<HTMLDivElement>;
 
+const domAnimation = () => import("@nextui-org/dom-animation").then((res) => res.default);
+
 const FreeSoloPopoverWrapper = forwardRef<"div", FreeSoloPopoverWrapperProps>(
   (
     {
diff --git a/packages/components/popover/src/popover-content.tsx b/packages/components/popover/src/popover-content.tsx
index 4f64da3257..cadc80217f 100644
--- a/packages/components/popover/src/popover-content.tsx
+++ b/packages/components/popover/src/popover-content.tsx
@@ -5,7 +5,7 @@ import {DOMAttributes, ReactNode, useMemo, useRef} from "react";
 import {forwardRef} from "@nextui-org/system";
 import {DismissButton} from "@react-aria/overlays";
 import {TRANSITION_VARIANTS} from "@nextui-org/framer-utils";
-import {m, domAnimation, LazyMotion} from "framer-motion";
+import {m, LazyMotion} from "framer-motion";
 import {HTMLNextUIProps} from "@nextui-org/system";
 import {RemoveScroll} from "react-remove-scroll";
 import {getTransformOrigins} from "@nextui-org/aria-utils";
@@ -19,6 +19,8 @@ export interface PopoverContentProps
   children: ReactNode | ((titleProps: DOMAttributes<HTMLElement>) => ReactNode);
 }
 
+const domAnimation = () => import("@nextui-org/dom-animation").then((res) => res.default);
+
 const PopoverContent = forwardRef<"div", PopoverContentProps>((props, _) => {
   const {as, children, className, ...otherProps} = props;
 
diff --git a/packages/components/ripple/package.json b/packages/components/ripple/package.json
index 275538fb9f..9205c707ff 100644
--- a/packages/components/ripple/package.json
+++ b/packages/components/ripple/package.json
@@ -36,19 +36,20 @@
   "peerDependencies": {
     "react": ">=18",
     "react-dom": ">=18",
-    "framer-motion": ">=10.17.0",
+    "framer-motion": ">=11.0.22",
     "@nextui-org/theme": ">=2.1.0",
     "@nextui-org/system": ">=2.0.0"
   },
   "dependencies": {
     "@nextui-org/shared-utils": "workspace:*",
-    "@nextui-org/react-utils": "workspace:*"
+    "@nextui-org/react-utils": "workspace:*",
+    "@nextui-org/dom-animation": "workspace:*"
   },
   "devDependencies": {
     "@nextui-org/theme": "workspace:*",
     "@nextui-org/system": "workspace:*",
     "clean-package": "2.2.0",
-    "framer-motion": "^11.0.22",
+    "framer-motion": "^11.2.12",
     "react": "^18.0.0",
     "react-dom": "^18.0.0"
   },
diff --git a/packages/components/ripple/src/ripple.tsx b/packages/components/ripple/src/ripple.tsx
index 92caacc451..96d4c480cd 100644
--- a/packages/components/ripple/src/ripple.tsx
+++ b/packages/components/ripple/src/ripple.tsx
@@ -3,7 +3,7 @@ import type {FC} from "react";
 import type {HTMLMotionProps} from "framer-motion";
 import type {HTMLNextUIProps} from "@nextui-org/system";
 
-import {AnimatePresence, m, LazyMotion, domAnimation} from "framer-motion";
+import {AnimatePresence, m, LazyMotion} from "framer-motion";
 import {clamp} from "@nextui-org/shared-utils";
 
 export interface RippleProps extends HTMLNextUIProps<"span"> {
@@ -14,6 +14,8 @@ export interface RippleProps extends HTMLNextUIProps<"span"> {
   onClear: (key: React.Key) => void;
 }
 
+const domAnimation = () => import("@nextui-org/dom-animation").then((res) => res.default);
+
 const Ripple: FC<RippleProps> = (props) => {
   const {ripples = [], motionProps, color = "currentColor", style, onClear} = props;
 
diff --git a/packages/components/select/package.json b/packages/components/select/package.json
index 40aea16170..88537c4e6f 100644
--- a/packages/components/select/package.json
+++ b/packages/components/select/package.json
@@ -36,7 +36,7 @@
   "peerDependencies": {
     "react": ">=18",
     "react-dom": ">=18",
-    "framer-motion": ">=10.17.0",
+    "framer-motion": ">=11.0.22",
     "@nextui-org/theme": ">=2.1.0",
     "@nextui-org/system": ">=2.0.0"
   },
@@ -68,7 +68,7 @@
     "@nextui-org/chip": "workspace:*",
     "@nextui-org/stories-utils": "workspace:*",
     "@nextui-org/use-infinite-scroll": "workspace:*",
-    "framer-motion": "^11.0.28",
+    "framer-motion": "^11.2.12",
     "@react-aria/i18n": "3.11.1",
     "@react-stately/data": "3.11.4",
     "clean-package": "2.2.0",
diff --git a/packages/components/snippet/package.json b/packages/components/snippet/package.json
index 415e008cad..fc3da063dd 100644
--- a/packages/components/snippet/package.json
+++ b/packages/components/snippet/package.json
@@ -36,7 +36,7 @@
   "peerDependencies": {
     "react": ">=18",
     "react-dom": ">=18",
-    "framer-motion": ">=10.17.0",
+    "framer-motion": ">=11.0.22",
     "@nextui-org/theme": ">=2.1.0",
     "@nextui-org/system": ">=2.0.0"
   },
diff --git a/packages/components/tabs/package.json b/packages/components/tabs/package.json
index 43d25d6e13..79fd53869b 100644
--- a/packages/components/tabs/package.json
+++ b/packages/components/tabs/package.json
@@ -36,7 +36,7 @@
   "peerDependencies": {
     "react": ">=18",
     "react-dom": ">=18",
-    "framer-motion": ">=10.17.0",
+    "framer-motion": ">=11.0.22",
     "@nextui-org/theme": ">=2.1.0",
     "@nextui-org/system": ">=2.0.0"
   },
@@ -59,7 +59,7 @@
   "devDependencies": {
     "@nextui-org/theme": "workspace:*",
     "@nextui-org/system": "workspace:*",
-    "framer-motion": "^11.0.22",
+    "framer-motion": "^11.2.12",
     "react-lorem-component": "0.13.0",
     "@nextui-org/card": "workspace:*",
     "@nextui-org/input": "workspace:*",
diff --git a/packages/components/tabs/src/tab.tsx b/packages/components/tabs/src/tab.tsx
index 1be4868b4e..d5a36be892 100644
--- a/packages/components/tabs/src/tab.tsx
+++ b/packages/components/tabs/src/tab.tsx
@@ -9,7 +9,7 @@ import {useFocusRing} from "@react-aria/focus";
 import {Node} from "@react-types/shared";
 import {useTab} from "@react-aria/tabs";
 import {useHover} from "@react-aria/interactions";
-import {m, domMax, LazyMotion} from "framer-motion";
+import {m, LazyMotion, domMax} from "framer-motion";
 import {useIsMounted} from "@nextui-org/use-is-mounted";
 
 import {ValuesType} from "./use-tabs";
@@ -122,6 +122,8 @@ const Tab = forwardRef<"button", TabItemProps>((props, ref) => {
       type={Component === "button" ? "button" : undefined}
     >
       {isSelected && !disableAnimation && !disableCursorAnimation && isMounted ? (
+        // use synchronous loading for domMax here
+        // since lazy loading produces different behaviour
         <LazyMotion features={domMax}>
           <m.span
             className={slots.cursor({class: classNames?.cursor})}
diff --git a/packages/components/tooltip/package.json b/packages/components/tooltip/package.json
index f7652b3ea0..0a86e1e0ec 100644
--- a/packages/components/tooltip/package.json
+++ b/packages/components/tooltip/package.json
@@ -36,7 +36,7 @@
   "peerDependencies": {
     "react": ">=18",
     "react-dom": ">=18",
-    "framer-motion": ">=10.17.0",
+    "framer-motion": ">=11.0.22",
     "@nextui-org/theme": ">=2.1.0",
     "@nextui-org/system": ">=2.0.0"
   },
@@ -46,6 +46,7 @@
     "@nextui-org/aria-utils": "workspace:*",
     "@nextui-org/framer-utils": "workspace:*",
     "@nextui-org/use-safe-layout-effect": "workspace:*",
+    "@nextui-org/dom-animation": "workspace:*",
     "@react-aria/interactions": "3.21.3",
     "@react-aria/overlays": "3.22.1",
     "@react-aria/tooltip": "3.7.4",
@@ -59,7 +60,7 @@
     "@nextui-org/system": "workspace:*",
     "@nextui-org/theme": "workspace:*",
     "clean-package": "2.2.0",
-    "framer-motion": "^11.0.28",
+    "framer-motion": "^11.2.12",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
diff --git a/packages/components/tooltip/src/tooltip.tsx b/packages/components/tooltip/src/tooltip.tsx
index 3bfa32c309..e014eb8944 100644
--- a/packages/components/tooltip/src/tooltip.tsx
+++ b/packages/components/tooltip/src/tooltip.tsx
@@ -1,6 +1,6 @@
 import {forwardRef} from "@nextui-org/system";
 import {OverlayContainer} from "@react-aria/overlays";
-import {AnimatePresence, m, LazyMotion, domAnimation} from "framer-motion";
+import {AnimatePresence, m, LazyMotion} from "framer-motion";
 import {TRANSITION_VARIANTS} from "@nextui-org/framer-utils";
 import {warn} from "@nextui-org/shared-utils";
 import {Children, cloneElement, isValidElement} from "react";
@@ -11,6 +11,8 @@ import {UseTooltipProps, useTooltip} from "./use-tooltip";
 
 export interface TooltipProps extends Omit<UseTooltipProps, "disableTriggerFocus" | "backdrop"> {}
 
+const domAnimation = () => import("@nextui-org/dom-animation").then((res) => res.default);
+
 const Tooltip = forwardRef<"div", TooltipProps>((props, ref) => {
   const {
     Component,
diff --git a/packages/core/react/package.json b/packages/core/react/package.json
index 446b9ff596..9dc49b24dc 100644
--- a/packages/core/react/package.json
+++ b/packages/core/react/package.json
@@ -89,7 +89,7 @@
   "peerDependencies": {
     "react": ">=18",
     "react-dom": ">=18",
-    "framer-motion": ">=10.17.0"
+    "framer-motion": ">=11.0.22"
   },
   "devDependencies": {
     "react": "^18.0.0",
diff --git a/packages/core/system/package.json b/packages/core/system/package.json
index 219d84aeab..ee066c738c 100644
--- a/packages/core/system/package.json
+++ b/packages/core/system/package.json
@@ -42,7 +42,7 @@
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "clean-package": "2.2.0",
-    "framer-motion": "^11.0.22"
+    "framer-motion": "^11.2.12"
   },
   "clean-package": "../../../clean-package.config.json",
   "tsup": {
diff --git a/packages/utilities/dom-animation/README.md b/packages/utilities/dom-animation/README.md
new file mode 100644
index 0000000000..d461d2d42c
--- /dev/null
+++ b/packages/utilities/dom-animation/README.md
@@ -0,0 +1,24 @@
+# @nextui-org/dom-animation
+
+A Quick description of the component
+
+> This is an internal utility, not intended for public usage.
+
+## Installation
+
+```sh
+yarn add @nextui-org/dom-animation
+# or
+npm i @nextui-org/dom-animation
+```
+
+## Contribution
+
+Yes please! See the
+[contributing guidelines](https://github.com/nextui-org/nextui/blob/master/CONTRIBUTING.md)
+for details.
+
+## License
+
+This project is licensed under the terms of the
+[MIT license](https://github.com/nextui-org/nextui/blob/master/LICENSE).
diff --git a/packages/utilities/dom-animation/package.json b/packages/utilities/dom-animation/package.json
new file mode 100644
index 0000000000..ef2febdfd6
--- /dev/null
+++ b/packages/utilities/dom-animation/package.json
@@ -0,0 +1,44 @@
+{
+  "name": "@nextui-org/dom-animation",
+  "version": "2.0.0",
+  "description": "Dom Animation from Framer Motion for dynamic import",
+  "keywords": [
+    "dom-animation"
+  ],
+  "author": "WK Wong <wingkwong.code@gmail.com>",
+  "homepage": "https://nextui.org",
+  "license": "MIT",
+  "main": "src/index.ts",
+  "sideEffects": false,
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/nextui-org/nextui.git",
+    "directory": "packages/utilities/dom-animation"
+  },
+  "bugs": {
+    "url": "https://github.com/nextui-org/nextui/issues"
+  },
+  "scripts": {
+    "build": "tsup src --dts",
+    "build:fast": "tsup src",
+    "dev": "pnpm build:fast --watch",
+    "clean": "rimraf dist .turbo",
+    "typecheck": "tsc --noEmit",
+    "prepack": "clean-package",
+    "postpack": "clean-package restore"
+  },
+  "peerDependencies": {
+    "framer-motion": ">=11.0.22"
+  },
+  "devDependencies": {
+    "clean-package": "2.2.0",
+    "framer-motion": "^11.0.22"
+  },
+  "clean-package": "../../../clean-package.config.json"
+}
\ No newline at end of file
diff --git a/packages/utilities/dom-animation/src/index.ts b/packages/utilities/dom-animation/src/index.ts
new file mode 100644
index 0000000000..0f667e5069
--- /dev/null
+++ b/packages/utilities/dom-animation/src/index.ts
@@ -0,0 +1,2 @@
+import {domAnimation} from "framer-motion";
+export default domAnimation;
diff --git a/packages/utilities/dom-animation/tsconfig.json b/packages/utilities/dom-animation/tsconfig.json
new file mode 100644
index 0000000000..46e3b466c2
--- /dev/null
+++ b/packages/utilities/dom-animation/tsconfig.json
@@ -0,0 +1,4 @@
+{
+  "extends": "../../../tsconfig.json",
+  "include": ["src", "index.ts"]
+}
diff --git a/packages/utilities/dom-animation/tsup.config.ts b/packages/utilities/dom-animation/tsup.config.ts
new file mode 100644
index 0000000000..3e2bcff6cc
--- /dev/null
+++ b/packages/utilities/dom-animation/tsup.config.ts
@@ -0,0 +1,8 @@
+import {defineConfig} from "tsup";
+
+export default defineConfig({
+  clean: true,
+  target: "es2019",
+  format: ["cjs", "esm"],
+  banner: {js: '"use client";'},
+});
diff --git a/packages/utilities/framer-utils/package.json b/packages/utilities/framer-utils/package.json
index 75315222d7..c80a6a00a8 100644
--- a/packages/utilities/framer-utils/package.json
+++ b/packages/utilities/framer-utils/package.json
@@ -36,7 +36,7 @@
   "peerDependencies": {
     "react": ">=18",
     "react-dom": ">=18",
-    "framer-motion": ">=10.17.0"
+    "framer-motion": ">=11.0.22"
   },
   "dependencies": {
     "@nextui-org/system": "workspace:*",
@@ -47,7 +47,7 @@
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "clean-package": "2.2.0",
-    "framer-motion": "^11.0.22"
+    "framer-motion": "^11.2.12"
   },
   "clean-package": "../../../clean-package.config.json"
 }
\ No newline at end of file
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 50dda1c9e1..99767b4e1c 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -391,8 +391,8 @@ importers:
         specifier: ^2.30.0
         version: 2.30.0
       framer-motion:
-        specifier: ^11.1.7
-        version: 11.1.7(react-dom@18.2.0)(react@18.2.0)
+        specifier: ^11.2.12
+        version: 11.2.12(react-dom@18.2.0)(react@18.2.0)
       github-slugger:
         specifier: ^2.0.0
         version: 2.0.0
@@ -616,6 +616,9 @@ importers:
       '@nextui-org/divider':
         specifier: workspace:*
         version: link:../divider
+      '@nextui-org/dom-animation':
+        specifier: workspace:*
+        version: link:../../utilities/dom-animation
       '@nextui-org/framer-utils':
         specifier: workspace:*
         version: link:../../utilities/framer-utils
@@ -675,8 +678,8 @@ importers:
         specifier: 2.2.0
         version: 2.2.0
       framer-motion:
-        specifier: ^11.0.22
-        version: 11.0.28(react-dom@18.2.0)(react@18.2.0)
+        specifier: ^11.2.12
+        version: 11.2.12(react-dom@18.2.0)(react@18.2.0)
       react:
         specifier: ^18.2.0
         version: 18.2.0
@@ -775,8 +778,8 @@ importers:
         specifier: 2.2.0
         version: 2.2.0
       framer-motion:
-        specifier: ^11.0.28
-        version: 11.0.28(react-dom@18.2.0)(react@18.2.0)
+        specifier: ^11.2.12
+        version: 11.2.12(react-dom@18.2.0)(react@18.2.0)
       react:
         specifier: ^18.2.0
         version: 18.2.0
@@ -952,7 +955,7 @@ importers:
         specifier: 3.23.1
         version: 3.23.1(react@18.2.0)
       framer-motion:
-        specifier: '>=10.17.0'
+        specifier: '>=11.0.22'
         version: 11.1.7(react-dom@18.2.0)(react@18.2.0)
     devDependencies:
       '@nextui-org/shared-icons':
@@ -982,6 +985,9 @@ importers:
       '@nextui-org/button':
         specifier: workspace:*
         version: link:../button
+      '@nextui-org/dom-animation':
+        specifier: workspace:*
+        version: link:../../utilities/dom-animation
       '@nextui-org/framer-utils':
         specifier: workspace:*
         version: link:../../utilities/framer-utils
@@ -1050,8 +1056,8 @@ importers:
         specifier: 2.2.0
         version: 2.2.0
       framer-motion:
-        specifier: ^10.16.4
-        version: 10.18.0(react-dom@18.2.0)(react@18.2.0)
+        specifier: ^11.2.12
+        version: 11.2.12(react-dom@18.2.0)(react@18.2.0)
       react:
         specifier: ^18.2.0
         version: 18.2.0
@@ -1089,7 +1095,7 @@ importers:
         specifier: 3.23.1
         version: 3.23.1(react@18.2.0)
       framer-motion:
-        specifier: '>=10.17.0'
+        specifier: '>=11.0.22'
         version: 11.1.7(react-dom@18.2.0)(react@18.2.0)
     devDependencies:
       '@nextui-org/avatar':
@@ -1481,8 +1487,8 @@ importers:
         specifier: 2.2.0
         version: 2.2.0
       framer-motion:
-        specifier: ^11.0.22
-        version: 11.0.28(react-dom@18.2.0)(react@18.2.0)
+        specifier: ^11.2.12
+        version: 11.2.12(react-dom@18.2.0)(react@18.2.0)
       react:
         specifier: ^18.2.0
         version: 18.2.0
@@ -1786,6 +1792,9 @@ importers:
 
   packages/components/modal:
     dependencies:
+      '@nextui-org/dom-animation':
+        specifier: workspace:*
+        version: link:../../utilities/dom-animation
       '@nextui-org/framer-utils':
         specifier: workspace:*
         version: link:../../utilities/framer-utils
@@ -1851,8 +1860,8 @@ importers:
         specifier: 2.2.0
         version: 2.2.0
       framer-motion:
-        specifier: ^11.0.22
-        version: 11.0.28(react-dom@18.2.0)(react@18.2.0)
+        specifier: ^11.2.12
+        version: 11.2.12(react-dom@18.2.0)(react@18.2.0)
       react:
         specifier: ^18.2.0
         version: 18.2.0
@@ -1865,6 +1874,9 @@ importers:
 
   packages/components/navbar:
     dependencies:
+      '@nextui-org/dom-animation':
+        specifier: workspace:*
+        version: link:../../utilities/dom-animation
       '@nextui-org/framer-utils':
         specifier: workspace:*
         version: link:../../utilities/framer-utils
@@ -1899,7 +1911,7 @@ importers:
         specifier: 3.10.1
         version: 3.10.1(react@18.2.0)
       framer-motion:
-        specifier: '>=10.17.0'
+        specifier: '>=11.0.22'
         version: 11.1.7(react-dom@18.2.0)(react@18.2.0)
       react-remove-scroll:
         specifier: ^2.5.6
@@ -1996,6 +2008,9 @@ importers:
       '@nextui-org/button':
         specifier: workspace:*
         version: link:../button
+      '@nextui-org/dom-animation':
+        specifier: workspace:*
+        version: link:../../utilities/dom-animation
       '@nextui-org/framer-utils':
         specifier: workspace:*
         version: link:../../utilities/framer-utils
@@ -2055,8 +2070,8 @@ importers:
         specifier: 2.2.0
         version: 2.2.0
       framer-motion:
-        specifier: ^11.0.22
-        version: 11.0.28(react-dom@18.2.0)(react@18.2.0)
+        specifier: ^11.2.12
+        version: 11.2.12(react-dom@18.2.0)(react@18.2.0)
       react:
         specifier: ^18.2.0
         version: 18.2.0
@@ -2164,6 +2179,9 @@ importers:
 
   packages/components/ripple:
     dependencies:
+      '@nextui-org/dom-animation':
+        specifier: workspace:*
+        version: link:../../utilities/dom-animation
       '@nextui-org/react-utils':
         specifier: workspace:*
         version: link:../../utilities/react-utils
@@ -2181,8 +2199,8 @@ importers:
         specifier: 2.2.0
         version: 2.2.0
       framer-motion:
-        specifier: ^11.0.22
-        version: 11.0.28(react-dom@18.2.0)(react@18.2.0)
+        specifier: ^11.2.12
+        version: 11.2.12(react-dom@18.2.0)(react@18.2.0)
       react:
         specifier: ^18.2.0
         version: 18.2.0
@@ -2309,8 +2327,8 @@ importers:
         specifier: 2.2.0
         version: 2.2.0
       framer-motion:
-        specifier: ^11.0.28
-        version: 11.0.28(react-dom@18.2.0)(react@18.2.0)
+        specifier: ^11.2.12
+        version: 11.2.12(react-dom@18.2.0)(react@18.2.0)
       react:
         specifier: ^18.2.0
         version: 18.2.0
@@ -2434,7 +2452,7 @@ importers:
         specifier: 3.24.1
         version: 3.24.1(react@18.2.0)
       framer-motion:
-        specifier: '>=10.17.0'
+        specifier: '>=11.0.22'
         version: 11.1.7(react-dom@18.2.0)(react@18.2.0)
     devDependencies:
       '@nextui-org/system':
@@ -2716,8 +2734,8 @@ importers:
         specifier: 2.2.0
         version: 2.2.0
       framer-motion:
-        specifier: ^11.0.22
-        version: 11.0.28(react-dom@18.2.0)(react@18.2.0)
+        specifier: ^11.2.12
+        version: 11.2.12(react-dom@18.2.0)(react@18.2.0)
       react:
         specifier: ^18.2.0
         version: 18.2.0
@@ -2733,6 +2751,9 @@ importers:
       '@nextui-org/aria-utils':
         specifier: workspace:*
         version: link:../../utilities/aria-utils
+      '@nextui-org/dom-animation':
+        specifier: workspace:*
+        version: link:../../utilities/dom-animation
       '@nextui-org/framer-utils':
         specifier: workspace:*
         version: link:../../utilities/framer-utils
@@ -2780,8 +2801,8 @@ importers:
         specifier: 2.2.0
         version: 2.2.0
       framer-motion:
-        specifier: ^11.0.28
-        version: 11.0.28(react-dom@18.2.0)(react@18.2.0)
+        specifier: ^11.2.12
+        version: 11.2.12(react-dom@18.2.0)(react@18.2.0)
       react:
         specifier: ^18.2.0
         version: 18.2.0
@@ -2961,8 +2982,8 @@ importers:
         specifier: 3.8.12
         version: 3.8.12(react@18.2.0)
       framer-motion:
-        specifier: '>=10.17.0'
-        version: 11.1.7(react-dom@18.2.0)(react@18.2.0)
+        specifier: '>=11.0.22'
+        version: 11.2.12(react-dom@18.2.0)(react@18.2.0)
     devDependencies:
       clean-package:
         specifier: 2.2.0
@@ -3002,8 +3023,8 @@ importers:
         specifier: 2.2.0
         version: 2.2.0
       framer-motion:
-        specifier: ^11.0.22
-        version: 11.1.7(react-dom@18.2.0)(react@18.2.0)
+        specifier: ^11.2.12
+        version: 11.2.12(react-dom@18.2.0)(react@18.2.0)
       react:
         specifier: ^18.2.0
         version: 18.2.0
@@ -3637,6 +3658,15 @@ importers:
         specifier: ^18.2.0
         version: 18.2.0(react@18.2.0)
 
+  packages/utilities/dom-animation:
+    devDependencies:
+      clean-package:
+        specifier: 2.2.0
+        version: 2.2.0
+      framer-motion:
+        specifier: ^11.0.22
+        version: 11.1.7(react-dom@18.2.0)(react@18.2.0)
+
   packages/utilities/framer-utils:
     dependencies:
       '@nextui-org/shared-utils':
@@ -3653,8 +3683,8 @@ importers:
         specifier: 2.2.0
         version: 2.2.0
       framer-motion:
-        specifier: ^11.0.22
-        version: 11.0.28(react-dom@18.2.0)(react@18.2.0)
+        specifier: ^11.2.12
+        version: 11.2.12(react-dom@18.2.0)(react@18.2.0)
       react:
         specifier: ^18.2.0
         version: 18.2.0
@@ -6087,20 +6117,6 @@ packages:
     dev: true
     optional: true
 
-  /@emotion/is-prop-valid@0.8.8:
-    resolution: {integrity: sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==}
-    requiresBuild: true
-    dependencies:
-      '@emotion/memoize': 0.7.4
-    dev: true
-    optional: true
-
-  /@emotion/memoize@0.7.4:
-    resolution: {integrity: sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==}
-    requiresBuild: true
-    dev: true
-    optional: true
-
   /@emotion/use-insertion-effect-with-fallbacks@1.0.1(react@18.2.0):
     resolution: {integrity: sha512-jT/qyKZ9rzLErtrjGgdkMBn2OP8wl0G3sQlBb3YPryvKHsjvINUhVaPFfP+fpBcOkmrVOVEEHQFJ7nbj2TH2gw==}
     peerDependencies:
@@ -17306,26 +17322,8 @@ packages:
       map-cache: 0.2.2
     dev: true
 
-  /framer-motion@10.18.0(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-oGlDh1Q1XqYPksuTD/usb0I70hq95OUzmL9+6Zd+Hs4XV0oaISBa/UUMSjYiq6m8EUF32132mOJ8xVZS+I0S6w==}
-    peerDependencies:
-      react: ^18.2.0
-      react-dom: ^18.2.0
-    peerDependenciesMeta:
-      react:
-        optional: true
-      react-dom:
-        optional: true
-    dependencies:
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-      tslib: 2.6.2
-    optionalDependencies:
-      '@emotion/is-prop-valid': 0.8.8
-    dev: true
-
-  /framer-motion@11.0.28(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-j/vNYTCH5MX5sY/3dwMs00z1+qAqKX3iIHF762bwqlU814ooD5dDbuj3pA0LmIT5YqyryCkXEb/q+zRblin0lw==}
+  /framer-motion@11.1.7(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-cW11Pu53eDAXUEhv5hEiWuIXWhfkbV32PlgVISn7jRdcAiVrJ1S03YQQ0/DzoswGYYwKi4qYmHHjCzAH52eSdQ==}
     peerDependencies:
       '@emotion/is-prop-valid': '*'
       react: ^18.2.0
@@ -17341,10 +17339,9 @@ packages:
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
       tslib: 2.6.2
-    dev: true
 
-  /framer-motion@11.1.7(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-cW11Pu53eDAXUEhv5hEiWuIXWhfkbV32PlgVISn7jRdcAiVrJ1S03YQQ0/DzoswGYYwKi4qYmHHjCzAH52eSdQ==}
+  /framer-motion@11.2.12(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-lCjkV4nA9rWOy2bhR4RZzkp2xpB++kFmUZ6D44V9VQaxk+JDmbDd5lq+u58DjJIIllE8AZEXp9OG/TyDN4FB/w==}
     peerDependencies:
       '@emotion/is-prop-valid': '*'
       react: ^18.2.0