refactor: remove usages of framer-motion

apps/client/src/views/timer/Timer.tsx

@@ -1,4 +1,3 @@
-import { AnimatePresence } from 'framer-motion';
 import {
   CustomFields,
   MessageState,
@@ -11,6 +10,7 @@ import {
 
 import { FitText } from '../../common/components/fit-text/FitText';
 import MultiPartProgressBar from '../../common/components/multi-part-progress-bar/MultiPartProgressBar';
+import TitleCard from '../../common/components/title-card/TitleCard';
 import ViewLogo from '../../common/components/view-logo/ViewLogo';
 import ViewParamsEditor from '../../common/components/view-params-editor/ViewParamsEditor';
 import { useWindowTitle } from '../../common/hooks/useWindowTitle';
@@ -21,7 +21,6 @@ import SuperscriptTime from '../../features/viewers/common/superscript-time/Supe
 import { getFormattedTimer, getTimerByType } from '../../features/viewers/common/viewUtils';
 import { useTranslation } from '../../translation/TranslationProvider';
 
-import { MotionTitleCard, titleVariants } from './timer.animations';
 import { getTimerOptions, useTimerOptions } from './timer.options';
 import {
   getCardData,
@@ -189,37 +188,8 @@ export default function Timer(props: TimerProps) {
 
       {!hideCards && (
         <>
-          <AnimatePresence>
-            {showNow && (
-              <MotionTitleCard
-                className='event now'
-                key='now'
-                variants={titleVariants}
-                initial='hidden'
-                animate='visible'
-                exit='exit'
-                label='now'
-                title={nowMain}
-                secondary={nowSecondary}
-              />
-            )}
-          </AnimatePresence>
-
-          <AnimatePresence>
-            {showNext && (
-              <MotionTitleCard
-                className='event next'
-                key='next'
-                variants={titleVariants}
-                initial='hidden'
-                animate='visible'
-                exit='exit'
-                label='next'
-                title={nextMain}
-                secondary={nextSecondary}
-              />
-            )}
-          </AnimatePresence>
+          {showNow && <TitleCard className='event now' label='now' title={nowMain} secondary={nowSecondary} />}
+          {showNext && <TitleCard className='event next' label='next' title={nextMain} secondary={nextSecondary} />}
         </>
       )}
     </div>

apps/client/src/views/timer/timer.animations.ts

@@ -1,20 +0,0 @@
-import { motion } from 'framer-motion';
-
-import TitleCard from '../../common/components/title-card/TitleCard';
-
-export const titleVariants = {
-  hidden: {
-    x: -2500,
-  },
-  visible: {
-    x: 0,
-    transition: {
-      duration: 1,
-    },
-  },
-  exit: {
-    x: -2500,
-  },
-};
-
-export const MotionTitleCard = motion(TitleCard);