Use new design tokens for panel animations

Author: gggritso

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"