chore(deps): Update framer-motion to v12.23.12 (#97802)

malwilley · web-flow · commit efe618bfd3f2 · 2025-08-14T08:52:39.000-07:00
diff --git a/package.json b/package.json
@@ -119,7 +119,7 @@
     "echarts-for-react": "3.0.2",
     "esbuild": "0.25.3",
     "focus-trap": "^7.3.1",
-    "framer-motion": "12.7.3",
+    "framer-motion": "12.23.12",
     "fuse.js": "^6.6.2",
     "gettext-parser": "7.0.1",
     "gl-matrix": "^3.4.3",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/static/app/components/events/autofix/autofixChanges.tsx b/static/app/components/events/autofix/autofixChanges.tsx
@@ -1,6 +1,6 @@
 import {Fragment, useEffect, useMemo, useRef, useState} from 'react';
 import styled from '@emotion/styled';
-import {AnimatePresence, motion, type AnimationProps} from 'framer-motion';
+import {AnimatePresence, motion, type MotionNodeAnimationOptions} from 'framer-motion';
 
 import {addErrorMessage} from 'sentry/actionCreators/indicator';
 import {openModal} from 'sentry/actionCreators/modal';
@@ -104,7 +104,7 @@ function AutofixRepoChange({
   );
 }
 
-const cardAnimationProps: AnimationProps = {
+const cardAnimationProps: MotionNodeAnimationOptions = {
   exit: {opacity: 0, height: 0, scale: 0.8, y: -20},
   initial: {opacity: 0, height: 0, scale: 0.8},
   animate: {opacity: 1, height: 'auto', scale: 1},
diff --git a/static/app/components/events/autofix/autofixRootCause.tsx b/static/app/components/events/autofix/autofixRootCause.tsx
@@ -1,6 +1,6 @@
 import React, {Fragment, useRef} from 'react';
 import styled from '@emotion/styled';
-import {AnimatePresence, motion, type AnimationProps} from 'framer-motion';
+import {AnimatePresence, motion, type MotionNodeAnimationOptions} from 'framer-motion';
 
 import ClippedBox from 'sentry/components/clippedBox';
 import {CopyToClipboardButton} from 'sentry/components/copyToClipboardButton';
@@ -34,7 +34,7 @@ type AutofixRootCauseProps = {
   terminationReason?: string;
 };
 
-const cardAnimationProps: AnimationProps = {
+const cardAnimationProps: MotionNodeAnimationOptions = {
   exit: {opacity: 0, height: 0, scale: 0.8, y: -20},
   initial: {opacity: 0, height: 0, scale: 0.8},
   animate: {opacity: 1, height: 'auto', scale: 1},
diff --git a/static/app/components/events/autofix/autofixSolution.tsx b/static/app/components/events/autofix/autofixSolution.tsx
@@ -1,6 +1,6 @@
 import React, {useCallback, useEffect, useRef, useState} from 'react';
 import styled from '@emotion/styled';
-import {AnimatePresence, motion, type AnimationProps} from 'framer-motion';
+import {AnimatePresence, motion, type MotionNodeAnimationOptions} from 'framer-motion';
 
 import {addErrorMessage, addLoadingMessage} from 'sentry/actionCreators/indicator';
 import ClippedBox from 'sentry/components/clippedBox';
@@ -125,7 +125,7 @@ type AutofixSolutionProps = {
   previousInsightCount?: number;
 };
 
-const cardAnimationProps: AnimationProps = {
+const cardAnimationProps: MotionNodeAnimationOptions = {
   exit: {opacity: 0, height: 0, scale: 0.8, y: -20},
   initial: {opacity: 0, height: 0, scale: 0.8},
   animate: {opacity: 1, height: 'auto', scale: 1},
diff --git a/static/app/components/events/autofix/autofixSteps.tsx b/static/app/components/events/autofix/autofixSteps.tsx
@@ -1,6 +1,6 @@
 import {Fragment, useEffect, useRef} from 'react';
 import styled from '@emotion/styled';
-import {AnimatePresence, motion, type AnimationProps} from 'framer-motion';
+import {AnimatePresence, motion, type MotionNodeAnimationOptions} from 'framer-motion';
 
 import {AutofixChanges} from 'sentry/components/events/autofix/autofixChanges';
 import AutofixInsightCards from 'sentry/components/events/autofix/autofixInsightCards';
@@ -22,7 +22,7 @@ import {space} from 'sentry/styles/space';
 import testableTransition from 'sentry/utils/testableTransition';
 import useOrganization from 'sentry/utils/useOrganization';
 
-const animationProps: AnimationProps = {
+const animationProps: MotionNodeAnimationOptions = {
   exit: {opacity: 0},
   initial: {opacity: 0},
   animate: {opacity: 1},
diff --git a/static/app/components/globalDrawer/components.tsx b/static/app/components/globalDrawer/components.tsx
@@ -1,7 +1,7 @@
 import {createContext, Fragment, useContext} from 'react';
 import styled from '@emotion/styled';
 import {mergeRefs} from '@react-aria/utils';
-import type {AnimationProps} from 'framer-motion';
+import type {Transition} from 'framer-motion';
 
 import {Button} from 'sentry/components/core/button';
 import type {DrawerOptions} from 'sentry/components/globalDrawer';
@@ -43,7 +43,7 @@ interface DrawerPanelProps {
   drawerWidth?: DrawerOptions['drawerWidth'];
   ref?: React.Ref<HTMLDivElement>;
   resizable?: DrawerOptions['resizable'];
-  transitionProps?: AnimationProps['transition'];
+  transitionProps?: Transition;
 }
 
 function DrawerPanel({
diff --git a/static/app/components/globalDrawer/index.tsx b/static/app/components/globalDrawer/index.tsx
@@ -8,8 +8,7 @@ import {
   useState,
 } from 'react';
 import type {Interpolation, Theme} from '@emotion/react';
-import type {AnimationProps} from 'framer-motion';
-import {AnimatePresence} from 'framer-motion';
+import {AnimatePresence, type Transition} from 'framer-motion';
 import type {Location} from 'history';
 
 import ErrorBoundary from 'sentry/components/errorBoundary';
@@ -74,7 +73,7 @@ export interface DrawerOptions {
   //
   // Custom framer motion transition for the drawer
   //
-  transitionProps?: AnimationProps['transition'];
+  transitionProps?: Transition;
 }
 
 interface DrawerRenderProps {
diff --git a/static/app/components/overlay.tsx b/static/app/components/overlay.tsx
@@ -52,8 +52,7 @@ const overlayAnimation: MotionProps = {
     opacity: 1,
     scale: 1,
     transition: testableTransition({
-      type: 'linear',
-      ease: [0.5, 1, 0.89, 1],
+      type: 'spring',
       duration: 0.2,
     }),
   },
diff --git a/static/app/components/slideOverPanel.tsx b/static/app/components/slideOverPanel.tsx
@@ -2,7 +2,7 @@ import {useEffect} from 'react';
 import isPropValid from '@emotion/is-prop-valid';
 import {css} from '@emotion/react';
 import styled from '@emotion/styled';
-import {motion, type AnimationProps} from 'framer-motion';
+import {motion, type Transition} from 'framer-motion';
 
 import {space} from 'sentry/styles/space';
 
@@ -32,7 +32,7 @@ type SlideOverPanelProps = {
   panelWidth?: string;
   ref?: React.Ref<HTMLDivElement>;
   slidePosition?: 'right' | 'bottom' | 'left';
-  transitionProps?: AnimationProps['transition'];
+  transitionProps?: Transition;
 };
 
 export default SlideOverPanel;
diff --git a/static/app/views/dashboards/widgetBuilder/components/common/animationSettings.tsx b/static/app/views/dashboards/widgetBuilder/components/common/animationSettings.tsx
@@ -1,4 +1,6 @@
-export const animationTransitionSettings = {
+import type {MotionNodeAnimationOptions} from 'framer-motion';
+
+export const animationTransitionSettings: MotionNodeAnimationOptions['transition'] = {
   type: 'tween',
   duration: 0.5,
 };
diff --git a/static/app/views/dashboards/widgetBuilder/components/newWidgetBuilder.tsx b/static/app/views/dashboards/widgetBuilder/components/newWidgetBuilder.tsx
@@ -2,7 +2,7 @@ import {Fragment, useCallback, useEffect, useState, type CSSProperties} from 're
 import {closestCorners, DndContext, useDraggable, useDroppable} from '@dnd-kit/core';
 import {css, Global, useTheme} from '@emotion/react';
 import styled from '@emotion/styled';
-import {AnimatePresence, motion} from 'framer-motion';
+import {AnimatePresence, motion, type MotionNodeAnimationOptions} from 'framer-motion';
 import cloneDeep from 'lodash/cloneDeep';
 import omit from 'lodash/omit';
 
@@ -344,7 +344,7 @@ export function WidgetPreviewContainer({
     return PREVIEW_HEIGHT_PX;
   };
 
-  const animatedProps = {
+  const animatedProps: MotionNodeAnimationOptions = {
     initial: {opacity: 0, x: '100%', y: 0},
     animate: {opacity: 1, x: 0, y: 0},
     exit: {opacity: 0, x: '100%', y: 0},
diff --git a/static/app/views/issueList/actions/index.tsx b/static/app/views/issueList/actions/index.tsx
@@ -1,7 +1,7 @@
 import {Fragment, useEffect, useState} from 'react';
 import {useTheme} from '@emotion/react';
 import styled from '@emotion/styled';
-import {AnimatePresence, motion, type AnimationProps} from 'framer-motion';
+import {AnimatePresence, motion, type MotionNodeAnimationOptions} from 'framer-motion';
 
 import {bulkDelete, bulkUpdate, mergeGroups} from 'sentry/actionCreators/group';
 import {
@@ -50,7 +50,7 @@ type IssueListActionsProps = {
   onActionTaken?: (itemIds: string[], data: IssueUpdateData) => void;
 };
 
-const animationProps: AnimationProps = {
+const animationProps: MotionNodeAnimationOptions = {
   initial: {translateY: 8, opacity: 0},
   animate: {translateY: 0, opacity: 1},
   exit: {translateY: -8, opacity: 0},
diff --git a/static/app/views/nav/collapsible.tsx b/static/app/views/nav/collapsible.tsx
diff --git a/static/app/views/onboarding/components/pageCorners.tsx b/static/app/views/onboarding/components/pageCorners.tsx
diff --git a/static/gsApp/components/features/illustrations/discoverBackground.tsx b/static/gsApp/components/features/illustrations/discoverBackground.tsx
