hax/moodist
1
0
Fork 0
mirror of https://github.com/remvze/moodist.git synced 2025-12-17 08:54:13 +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 = { const animationVariants = {
exhale: { scale: 1, transition: { duration: durations.exhale } }, exhale: {
transform: 'translate(-50%, -50%) scale(1)',
transition: { duration: durations.exhale },
},
holdExhale: { holdExhale: {
scale: 1, transform: 'translate(-50%, -50%) scale(1)',
transition: { duration: durations.holdExhale || 4 }, transition: { duration: durations.holdExhale || 4 },
}, },
holdInhale: { holdInhale: {
scale: 1.5, transform: 'translate(-50%, -50%) scale(1.5)',
transition: { duration: durations.holdInhale || 4 }, 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(() => { useEffect(() => {
@ -97,11 +103,7 @@ export function Exercise() {
animate={phase} animate={phase}
className={styles.circle} className={styles.circle}
key={selectedExercise} key={selectedExercise}
transition={{ ease: 'linear' }}
variants={animationVariants} variants={animationVariants}
transformTemplate={(_, generatedString) =>
`translate(-50%, -50%) ${generatedString}`
}
/> />
<p className={styles.phase}>{getLabel(phase)}</p> <p className={styles.phase}>{getLabel(phase)}</p>
</div> </div>