diff --git a/src/content/TextAnimations/TrueFocus/TrueFocus.vue b/src/content/TextAnimations/TrueFocus/TrueFocus.vue index f1de0b6..3ef0096 100644 --- a/src/content/TextAnimations/TrueFocus/TrueFocus.vue +++ b/src/content/TextAnimations/TrueFocus/TrueFocus.vue @@ -31,26 +31,6 @@ const focusRect = ref({ x: 0, y: 0, width: 0, height: 0 }); let interval: number | null = null; -watch( - [() => props.manualMode, () => props.animationDuration, () => props.pauseBetweenAnimations, () => words.value], - () => { - if (interval) { - clearInterval(interval); - interval = null; - } - - if (!props.manualMode) { - interval = setInterval( - () => { - currentIndex.value = (currentIndex.value + 1) % words.value.length; - }, - (props.animationDuration + props.pauseBetweenAnimations) * 1000 - ); - } - }, - { immediate: true } -); - watch( [currentIndex, () => words.value.length], async () => { @@ -105,6 +85,26 @@ onMounted(async () => { height: activeRect.height }; } + + watch( + [() => props.manualMode, () => props.animationDuration, () => props.pauseBetweenAnimations, () => words.value], + () => { + if (interval) { + clearInterval(interval); + interval = null; + } + + if (!props.manualMode) { + interval = setInterval( + () => { + currentIndex.value = (currentIndex.value + 1) % words.value.length; + }, + (props.animationDuration + props.pauseBetweenAnimations) * 1000 + ); + } + }, + { immediate: true } + ); }); onUnmounted(() => {