hax/moodist
1
0
Fork 0
mirror of https://github.com/remvze/moodist.git synced 2025-12-17 00:44:14 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

perf: improve the breathing cricle

Browse source
This commit is contained in:
MAZE 2024-07-06 19:37:30 +03:30
parent ddf929f4c0
commit 3d83a1427f
1 changed files with 10 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
src/components/toolbox/breathing/exercise/exercise.tsx
View file

@ -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>