Creating a typewriter effect with Vue Js

Question

Creating a typewriter effect with Vue Js

Hey there, I'm having some trouble with the code below while working on my Vue project. It seems to be functioning correctly, but for some reason it's not working in my Vue environment.

const text = document.getElementById("text");
const phrases = [
  "I'm John Doe",
  "I'm student",
  "I'm developer",
];
let currentPhraseIndex = 0;
let currentCharacterIndex = 0;
let currentPhrase = "";
let isDeleting = false;

function loop() {
  const currentPhraseText = phrases[currentPhraseIndex];

  if (!isDeleting) {
    currentPhrase += currentPhraseText[currentCharacterIndex];
    currentCharacterIndex++;
  } else {
    currentPhrase = currentPhrase.slice(0, -1);
    currentCharacterIndex--;
  }

  text.innerHTML = currentPhrase;

  if (currentCharacterIndex === currentPhraseText.length) {
    isDeleting = true;
  }

  if (currentCharacterIndex === 0) {
    currentPhrase = "";
    isDeleting = false;
    currentPhraseIndex++;
    if (currentPhraseIndex === phrases.length) {
      currentPhraseIndex = 0;
    }
  }

  const spedUp = Math.random() * (80 - 50) + 50;
  const normalSpeed = Math.random() * (300 - 200) + 200;
  const time = isDeleting ? spedUp : normalSpeed;
  setTimeout(loop, time);
}

loop();

<h2 id="text"></h2>

Despite the code appearing to function correctly, it's not behaving as expected within my Vue Js setup. Here are the issues I encountered:

https://i.stack.imgur.com/DnlLU.png

If you have any suggestions for optimizing this code specifically for use with Vue, I'd appreciate your feedback. Thanks!

javascript vue.js vuejs3

Answer 1

Answer №1

Make sure to define variables in the data property and functions in methods, or utilize the composition API to make variables reactive:

const { ref, reactive, onMounted } = Vue
const app = Vue.createApp({
  setup() {
    const opt = reactive({
      currentPhraseIndex: 0, 
      currentCharacterIndex: 0, 
      currentPhrase: "", 
      isDeleting: false
    })
    const phrases = reactive([
      "I'm John Doe",
      "I'm student",
      "I'm developer"
    ])
    const text = ref('')
    const loop = () => {
      const currentPhraseText = phrases[opt.currentPhraseIndex];
      if (!opt.isDeleting) {
        opt.currentPhrase += currentPhraseText[opt.currentCharacterIndex];
        opt.currentCharacterIndex++;
      } else {
        opt.currentPhrase = opt.currentPhrase.slice(0, -1);
        opt.currentCharacterIndex--;
      }
      text.value = opt.currentPhrase;
      if (opt.currentCharacterIndex === currentPhraseText.length) {
        opt.isDeleting = true;
      }
      if (opt.currentCharacterIndex === 0) {
        opt.currentPhrase = "";
        opt.isDeleting = false;
        opt.currentPhraseIndex++;
        if (opt.currentPhraseIndex === opt.phrases?.length) {
          opt.currentPhraseIndex = 0;
        }
      }
      const spedUp = Math.random() * (80 - 50) + 50;
      const normalSpeed = Math.random() * (300 - 200) + 200;
      const time = opt.isDeleting ? spedUp : normalSpeed;
      setTimeout(loop, time);
    }
    onMounted(() => {
      loop()
    })
    return {
      text
    }
  }
})
app.mount('#demo')

<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<div id="demo">
  <h2>{{ text }}</h2>
</div>

Answer 2

Make sure to define variables in the data property and functions in methods, or utilize the composition API to make variables reactive:

const { ref, reactive, onMounted } = Vue
const app = Vue.createApp({
  setup() {
    const opt = reactive({
      currentPhraseIndex: 0, 
      currentCharacterIndex: 0, 
      currentPhrase: "", 
      isDeleting: false
    })
    const phrases = reactive([
      "I'm John Doe",
      "I'm student",
      "I'm developer"
    ])
    const text = ref('')
    const loop = () => {
      const currentPhraseText = phrases[opt.currentPhraseIndex];
      if (!opt.isDeleting) {
        opt.currentPhrase += currentPhraseText[opt.currentCharacterIndex];
        opt.currentCharacterIndex++;
      } else {
        opt.currentPhrase = opt.currentPhrase.slice(0, -1);
        opt.currentCharacterIndex--;
      }
      text.value = opt.currentPhrase;
      if (opt.currentCharacterIndex === currentPhraseText.length) {
        opt.isDeleting = true;
      }
      if (opt.currentCharacterIndex === 0) {
        opt.currentPhrase = "";
        opt.isDeleting = false;
        opt.currentPhraseIndex++;
        if (opt.currentPhraseIndex === opt.phrases?.length) {
          opt.currentPhraseIndex = 0;
        }
      }
      const spedUp = Math.random() * (80 - 50) + 50;
      const normalSpeed = Math.random() * (300 - 200) + 200;
      const time = opt.isDeleting ? spedUp : normalSpeed;
      setTimeout(loop, time);
    }
    onMounted(() => {
      loop()
    })
    return {
      text
    }
  }
})
app.mount('#demo')

<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<div id="demo">
  <h2>{{ text }}</h2>
</div>

Answer 3

Answer №2

I have discovered the solution to get it functioning properly. The updated code below has been successfully implemented using Vue.js 3.

<script setup>
import { ref } from "vue";

const phrases = [
  "I am John Doe.",
  "I am student.",
  "I am developer.",
];

const currentPhraseIndex = ref(0);
const currentCharacterIndex = ref(0);
const currentPhrase = ref("");
const isDeleting = ref(false);

function loop() {
  const currentPhraseText = phrases[currentPhraseIndex.value];

  if (!isDeleting.value) {
    currentPhrase.value += currentPhraseText[currentCharacterIndex.value];
    currentCharacterIndex.value++;
  } else {
    currentPhrase.value = currentPhrase.value.slice(0, -1);
    currentCharacterIndex.value--;
  }

  if (currentCharacterIndex.value === currentPhraseText.length) {
    isDeleting.value = true;
  }

  if (currentCharacterIndex.value === 0) {
    currentPhrase.value = "";
    isDeleting.value = false;
    currentPhraseIndex.value++;
    if (currentPhraseIndex.value === phrases.length) {
      currentPhraseIndex.value = 0;
    }
  }

  const spedUp = Math.random() * (80 - 50) + 50;
  const normalSpeed = Math.random() * (300 - 200) + 200;
  const time = isDeleting.value ? spedUp : normalSpeed;
  setTimeout(loop, time);
}

loop();
</script>

<template>
    <div>
      <h1 id="title">{{ currentPhrase }}</h1>
    </div>
</template>

Answer 4

I have discovered the solution to get it functioning properly. The updated code below has been successfully implemented using Vue.js 3.

<script setup>
import { ref } from "vue";

const phrases = [
  "I am John Doe.",
  "I am student.",
  "I am developer.",
];

const currentPhraseIndex = ref(0);
const currentCharacterIndex = ref(0);
const currentPhrase = ref("");
const isDeleting = ref(false);

function loop() {
  const currentPhraseText = phrases[currentPhraseIndex.value];

  if (!isDeleting.value) {
    currentPhrase.value += currentPhraseText[currentCharacterIndex.value];
    currentCharacterIndex.value++;
  } else {
    currentPhrase.value = currentPhrase.value.slice(0, -1);
    currentCharacterIndex.value--;
  }

  if (currentCharacterIndex.value === currentPhraseText.length) {
    isDeleting.value = true;
  }

  if (currentCharacterIndex.value === 0) {
    currentPhrase.value = "";
    isDeleting.value = false;
    currentPhraseIndex.value++;
    if (currentPhraseIndex.value === phrases.length) {
      currentPhraseIndex.value = 0;
    }
  }

  const spedUp = Math.random() * (80 - 50) + 50;
  const normalSpeed = Math.random() * (300 - 200) + 200;
  const time = isDeleting.value ? spedUp : normalSpeed;
  setTimeout(loop, time);
}

loop();
</script>

<template>
    <div>
      <h1 id="title">{{ currentPhrase }}</h1>
    </div>
</template>

Answer 5

Answer №3

Make sure to include the following line

if (opt.currentCharacterIndex === currentPhraseText.length) {
  opt.isDeleting = true;
  opt.currentPhraseIndex = 0; //  <===== don't forget this part 
}

Answer 6

Make sure to include the following line

if (opt.currentCharacterIndex === currentPhraseText.length) {
  opt.isDeleting = true;
  opt.currentPhraseIndex = 0; //  <===== don't forget this part 
}

Creating a typewriter effect with Vue Js

Answer №1

Answer №2

Answer №3

Similar questions

Cannon-js: Experience dynamic body bouncing on the y axis as it reacts to force applied on the x and z axes

A method for consolidating multiple enum declarations in a single TypeScript file and exporting them under a single statement to avoid direct exposure of individual enums

Organize based on 2 factors, with emphasis on 1

Preventing Past Dates from Being Selected in JQuery Date Picker

Upload an array of choices to the server by utilizing ng-model

Managing iframes in React using reference methods

Encountering an issue: Unable to initiate a local server when running `npm start`

JavaScript prototypal inheritance concept

Struggling to reset the jscrollpane scroller

Exploring the source code of NPM public and private packages within the node_modules directory

Combine multiple jQuery click functions into a single function

In order to set a condition for the mat date picker to display a text box in Angular if the selected date is for someone under 18 years old

Top method for filling an array with strings

If a specific class is identified, add a border to the div when clicked using JavaScript

How to update MongoDB documents with referenced objects using Mongoose?

The issue with the $(window).width() property not functioning correctly in Internet Explorer

Building a WordPress calculator form that retains user input without requiring a resubmit and incorporates custom field values

What could be causing the malfunction of my Nextjs Route Interception Modal?

Creating custom directives in Vue2 is just like adding a functionality similar to v

What is the most efficient method for storing text in my web application?