feat(dashboards): Use Motion design tokens for animation

static/app/components/core/principles/motion/motion.mdx

@@ -59,6 +59,21 @@ const theme = useTheme();
 theme.motion.smooth.moderate;
 ```
 
+If you need to use the tokens with [Framer Motion](https://motion.dev) you can access the Bézier curve control points values and durations directly.
+
+```jsx
+const theme = useTheme();
+
+<motion.div
+  animate={{opacity: 0}}
+  transition={{
+    type: 'tween',
+    ease: theme.motionControlPoints.enter,
+    duration: theme.motionDurations.slow,
+  }}
+></motion.div>;
+```
+
 ## Easing
 
 The easing curve of an animation drastically changes our perception of it. These easing tokens have been chosen to provide snappy, natural motion to interactions.

static/app/components/slideOverPanel.tsx

@@ -1,6 +1,6 @@
 import {useEffect} from 'react';
 import isPropValid from '@emotion/is-prop-valid';
-import {css} from '@emotion/react';
+import {css, useTheme} from '@emotion/react';
 import styled from '@emotion/styled';
 import {motion, type Transition} from 'framer-motion';
 
@@ -49,6 +49,8 @@ function SlideOverPanel({
   panelWidth,
   ref,
 }: SlideOverPanelProps) {
+  const theme = useTheme();
+
   useEffect(() => {
     if (!collapsed && onOpen) {
       onOpen();
@@ -69,9 +71,9 @@ function SlideOverPanel({
       exit={collapsedStyle}
       slidePosition={slidePosition}
       transition={{
-        type: 'spring',
-        stiffness: 1000,
-        damping: 50,
+        type: 'tween',
+        ease: theme.motionControlPoints.enter,
+        duration: theme.motionDurations.slow,
         ...transitionProps,
       }}
       role="complementary"

static/app/utils/theme/theme.tsx

@@ -252,20 +252,42 @@ const generateTokens = (colors: Colors) => ({
   },
 });
 
-const generateMotion = () => {
+type Curve = 'smooth' | 'snap' | 'enter' | 'exit';
+type ControlPoints = [number, number, number, number];
+
+const BEZIER_CONTROL_POINTS: Record<Curve, ControlPoints> = {
+  smooth: [0.72, 0, 0.16, 1],
+  snap: [0.8, -0.4, 0.5, 1],
+  enter: [0.24, 1, 0.32, 1],
+  exit: [0.64, 0, 0.8, 0],
+};
+
+function formatBezierCurve(points: ControlPoints): string {
+  return `cubic-bezier(${points.join(', ')})`;
+}
+
+type AnimationDuration = 'fast' | 'moderate' | 'slow';
+
+const MOTION_DURATIONS: Record<AnimationDuration, number> = {
+  fast: 0.12,
+  moderate: 0.16,
+  slow: 0.24,
+};
+
+const withDuration = (easing: string) => {
   return {
-    smooth: withDuration('cubic-bezier(0.72, 0, 0.16, 1)'),
-    snap: withDuration('cubic-bezier(0.8, -0.4, 0.5, 1)'),
-    enter: withDuration('cubic-bezier(0.24, 1, 0.32, 1)'),
-    exit: withDuration('cubic-bezier(0.64, 0, 0.8, 0)'),
+    fast: `${MOTION_DURATIONS.fast}s ${easing}`,
+    moderate: `${MOTION_DURATIONS.moderate}s ${easing}`,
+    slow: `${MOTION_DURATIONS.slow}s ${easing}`,
   };
 };
 
-const withDuration = (easing: string) => {
+const generateMotion = () => {
   return {
-    fast: `120ms ${easing}`,
-    moderate: `160ms ${easing}`,
-    slow: `240ms ${easing}`,
+    smooth: withDuration(formatBezierCurve(BEZIER_CONTROL_POINTS.smooth)),
+    snap: withDuration(formatBezierCurve(BEZIER_CONTROL_POINTS.snap)),
+    enter: withDuration(formatBezierCurve(BEZIER_CONTROL_POINTS.enter)),
+    exit: withDuration(formatBezierCurve(BEZIER_CONTROL_POINTS.exit)),
   };
 };
 
@@ -1152,6 +1174,8 @@ const commonTheme = {
 
   space,
   motion: generateMotion(),
+  motionControlPoints: BEZIER_CONTROL_POINTS,
+  motionDurations: MOTION_DURATIONS,
 
   // Icons
   iconSizes,

static/app/views/dashboards/widgetBuilder/components/newWidgetBuilder.tsx

@@ -25,7 +25,6 @@ import {
   type DashboardFilters,
   type Widget,
 } from 'sentry/views/dashboards/types';
-import {animationTransitionSettings} from 'sentry/views/dashboards/widgetBuilder/components/common/animationSettings';
 import {
   DEFAULT_WIDGET_DRAG_POSITIONING,
   DRAGGABLE_PREVIEW_HEIGHT_PX,
@@ -43,6 +42,7 @@ import {
   useWidgetBuilderContext,
   WidgetBuilderProvider,
 } from 'sentry/views/dashboards/widgetBuilder/contexts/widgetBuilderContext';
+import {useWidgetBuilderTransitionSettings} from 'sentry/views/dashboards/widgetBuilder/hooks/useWidgetBuilderAnimationSettings';
 import {DashboardsMEPProvider} from 'sentry/views/dashboards/widgetCard/dashboardsMEPContext';
 import {TraceItemAttributeProvider} from 'sentry/views/explore/contexts/traceItemAttributeContext';
 import {isLogsEnabled} from 'sentry/views/explore/logs/isLogsEnabled';
@@ -269,6 +269,7 @@ export function WidgetPreviewContainer({
   const organization = useOrganization();
   const location = useLocation();
   const theme = useTheme();
+  const transitionSettings = useWidgetBuilderTransitionSettings();
   const isSmallScreen = useMedia(`(max-width: ${theme.breakpoints.sm})`);
   // if small screen and draggable, enable dragging
   const isDragEnabled = isSmallScreen && isDraggable;
@@ -334,7 +335,7 @@ export function WidgetPreviewContainer({
     initial: {opacity: 0, x: '100%', y: 0},
     animate: {opacity: 1, x: 0, y: 0},
     exit: {opacity: 0, x: '100%', y: 0},
-    transition: animationTransitionSettings,
+    transition: transitionSettings,
   };
 
   return (

static/app/views/dashboards/widgetBuilder/components/widgetBuilderSlideout.tsx

@@ -27,7 +27,6 @@ import {
   type DashboardFilters,
   type Widget,
 } from 'sentry/views/dashboards/types';
-import {animationTransitionSettings} from 'sentry/views/dashboards/widgetBuilder/components/common/animationSettings';
 import WidgetBuilderDatasetSelector from 'sentry/views/dashboards/widgetBuilder/components/datasetSelector';
 import WidgetBuilderFilterBar from 'sentry/views/dashboards/widgetBuilder/components/filtersBar';
 import WidgetBuilderGroupBySelector from 'sentry/views/dashboards/widgetBuilder/components/groupBySelector';
@@ -49,6 +48,7 @@ import useDashboardWidgetSource from 'sentry/views/dashboards/widgetBuilder/hook
 import {useDisableTransactionWidget} from 'sentry/views/dashboards/widgetBuilder/hooks/useDisableTransactionWidget';
 import useIsEditingWidget from 'sentry/views/dashboards/widgetBuilder/hooks/useIsEditingWidget';
 import {useSegmentSpanWidgetState} from 'sentry/views/dashboards/widgetBuilder/hooks/useSegmentSpanWidgetState';
+import {useWidgetBuilderTransitionSettings} from 'sentry/views/dashboards/widgetBuilder/hooks/useWidgetBuilderAnimationSettings';
 import {convertBuilderStateToWidget} from 'sentry/views/dashboards/widgetBuilder/utils/convertBuilderStateToWidget';
 import {convertWidgetToBuilderStateParams} from 'sentry/views/dashboards/widgetBuilder/utils/convertWidgetToBuilderStateParams';
 import {getTopNConvertedDefaultWidgets} from 'sentry/views/dashboards/widgetLibrary/data';
@@ -90,6 +90,7 @@ function WidgetBuilderSlideout({
   const [error, setError] = useState<Record<string, any>>({});
   const theme = useTheme();
   const isEditing = useIsEditingWidget();
+  const transitionSettings = useWidgetBuilderTransitionSettings();
   const source = useDashboardWidgetSource();
   const {cacheBuilderState} = useCacheBuilderState();
   const {setSegmentSpanBuilderState} = useSegmentSpanWidgetState();
@@ -208,7 +209,7 @@ function WidgetBuilderSlideout({
       collapsed={!isOpen}
       slidePosition="left"
       data-test-id="widget-slideout"
-      transitionProps={animationTransitionSettings}
+      transitionProps={transitionSettings}
     >
       <SlideoutHeaderWrapper>
         <Breadcrumbs crumbs={breadcrumbs} />

static/app/views/dashboards/widgetBuilder/hooks/useWidgetBuilderAnimationSettings.tsx

@@ -0,0 +1,12 @@
+import {useTheme} from '@emotion/react';
+import type {Transition} from 'framer-motion';
+
+export function useWidgetBuilderTransitionSettings(): Transition {
+  const theme = useTheme();
+
+  return {
+    type: 'tween',
+    ease: theme.motionControlPoints.snap,
+    duration: 0.5, // TODO: Introduce a slower value
+  };
+}