From 3d83a1427feaec1e858953899870da06d35b4631 Mon Sep 17 00:00:00 2001
From: MAZE <remvze@proton.me>
Date: Sat, 6 Jul 2024 19:37:30 +0330
Subject: [PATCH] perf: improve the breathing cricle

---
 .../toolbox/breathing/exercise/exercise.tsx    | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/src/components/toolbox/breathing/exercise/exercise.tsx b/src/components/toolbox/breathing/exercise/exercise.tsx
index da06512..b3087ea 100644
--- a/src/components/toolbox/breathing/exercise/exercise.tsx
+++ b/src/components/toolbox/breathing/exercise/exercise.tsx
@@ -55,16 +55,22 @@ export function Exercise() {
   );
 
   const animationVariants = {
-    exhale: { scale: 1, transition: { duration: durations.exhale } },
+    exhale: {
+      transform: 'translate(-50%, -50%) scale(1)',
+      transition: { duration: durations.exhale },
+    },
     holdExhale: {
-      scale: 1,
+      transform: 'translate(-50%, -50%) scale(1)',
       transition: { duration: durations.holdExhale || 4 },
     },
     holdInhale: {
-      scale: 1.5,
+      transform: 'translate(-50%, -50%) scale(1.5)',
       transition: { duration: durations.holdInhale || 4 },
     },
-    inhale: { scale: 1.5, transition: { duration: durations.inhale } },
+    inhale: {
+      transform: 'translate(-50%, -50%) scale(1.5)',
+      transition: { duration: durations.inhale },
+    },
   };
 
   useEffect(() => {
@@ -97,11 +103,7 @@ export function Exercise() {
           animate={phase}
           className={styles.circle}
           key={selectedExercise}
-          transition={{ ease: 'linear' }}
           variants={animationVariants}
-          transformTemplate={(_, generatedString) =>
-            `translate(-50%, -50%) ${generatedString}`
-          }
         />
         <p className={styles.phase}>{getLabel(phase)}</p>
       </div>