fix(dashboards): Improve performance of Widget Builder animations (#102427)

Peeled from #102415. Changes the
Widget Builder (and Slideout Panel) animations to use `transform`. This
forces Framer Motion to use GPU-accelerated animations rather than
`requestAnimationFrame`. This noticeably improves performance when the
main thread is busy (e.g., in the Widget Builder, all the time) and
reduces jitter.

Author: gggritso

static/app/components/slideOverPanel.tsx

@@ -6,20 +6,20 @@ import {motion, type Transition} from 'framer-motion';
 
 import {space} from 'sentry/styles/space';
 
-const PANEL_WIDTH = '50vw';
+const RIGHT_SIDE_PANEL_WIDTH = '50vw';
 const LEFT_SIDE_PANEL_WIDTH = '40vw';
 const PANEL_HEIGHT = '50vh';
 
 const OPEN_STYLES = {
-  bottom: {opacity: 1, x: 0, y: 0},
-  right: {opacity: 1, x: 0, y: 0},
-  left: {opacity: 1, x: 0, y: 0},
+  bottom: {transform: 'translateX(0) translateY(0)', opacity: 1},
+  right: {transform: 'translateX(0) translateY(0)', opacity: 1},
+  left: {transform: 'translateX(0) translateY(0)', opacity: 1},
 };
 
 const COLLAPSED_STYLES = {
-  bottom: {opacity: 0, x: 0, y: PANEL_HEIGHT},
-  right: {opacity: 0, x: PANEL_WIDTH, y: 0},
-  left: {opacity: 0, x: '-100%', y: 0},
+  bottom: {transform: `translateX(0) translateY(${PANEL_HEIGHT})`, opacity: 0},
+  right: {transform: `translateX(${RIGHT_SIDE_PANEL_WIDTH}) translateY(0)`, opacity: 0},
+  left: {transform: `translateX(-${LEFT_SIDE_PANEL_WIDTH}) translateY(0)`, opacity: 0},
 };
 
 type SlideOverPanelProps = {
@@ -130,7 +130,7 @@ const _SlideOverPanel = styled(motion.div, {
           ? css`
               position: fixed;
 
-              width: ${p.panelWidth ?? PANEL_WIDTH};
+              width: ${p.panelWidth ?? RIGHT_SIDE_PANEL_WIDTH};
               height: 100%;
 
               top: 0;

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

@@ -323,9 +323,9 @@ export function WidgetPreviewContainer({
   };
 
   const animatedProps: MotionNodeAnimationOptions = {
-    initial: {opacity: 0, x: '100%', y: 0},
-    animate: {opacity: 1, x: 0, y: 0},
-    exit: {opacity: 0, x: '100%', y: 0},
+    initial: {opacity: 0, transform: 'translateX(100%) translateY(0)'},
+    animate: {opacity: 1, transform: 'translateX(0) translateY(0)'},
+    exit: {opacity: 0, transform: 'translateX(100%) translateY(0)'},
     transition: animationTransitionSettings,
   };