Can we change speed for specific text?

Question

From the code below, can we change the typing animation for the second index of strings ('an aspiring developer!') ?

document.querySelectorAll('.home-name-text').forEach(function(el) {
  new Typed(el, {
    strings: ['Ricko Wijaya,', 'an aspiring developer!'],
    loop: true,
    typeSpeed: 100,
    backSpeed: 80,
    startDelay: 100,
    backDelay: 1500,

  })
})

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<span class="home-name-text"></span>

Answer 1

You may use the preStringTyped attribute, of the config object that you pass to the Typed constructor, to change the speed of typing when the index of the string to be typed is 1 (that's the index of "an aspiring developer!" of your strings array).

The idea is simple, as preStringTyped is invoked "before each string is typed" you can, at that moment, change/update the typeSpeed property of the Typed object.

We will be able to do that thanks to the parameters that preStringTyped accepts:

• arrayPos: the position (index) of the string to be typed (as we saw "Before each string is typed" is at the index 1).
• self: is the actual Typed object. We can use that parameter to update the typeSpeed property.

Basically, what we will do is when the arrayPos is 1 we increase the speed (as you requested), otherwise we set it to 100 (as your original code). You can play around that and change the values per your requirements.

To illustrate here's a live demo:

/** the default speed */
const defaultSpeed = 100;

document.querySelectorAll('.home-name-text').forEach(el => new Typed(el, {
  strings: ['Ricko Wijaya,', 'an aspiring developer!'],
  loop: true,
  typeSpeed: defaultSpeed,
  backSpeed: 80,
  startDelay: 100,
  backDelay: 1500,
  /** before each string gets typed, we set the "typeSpeed" to "20" when the string index is "1" otherwise we set it to "100" (the "defaultSpeed" variable) */
  preStringTyped: (arrayPos, self) => self.typeSpeed = arrayPos == 1 ? 20 : defaultSpeed
}));

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>

<span class="home-name-text"></span>

The above solution works as needed, but personally, I would like to make things even more dynamic. The idea here is to have a separate object that has a key-value pairs structure where the keys are the indexes of the desired string that is found in the strings array and the values are the speeds to use for the string at that index.

Here's a demo to illustrate:

/** 
 * an objkect that hold the speeds for each string index that should have a custom speed
 *    - the key: is an integer that is the index of the desired string in the strings array.
 *    - the value: the custom speed to use for the string at that index
 */
const speedsPerIndex = {
    1: 10,
    2: 300
  },
  /** a default speed to be used initially and when the index of the current string cannot be found in "speedsPerIndex" object */
  defaultSpeed = 100;

document.querySelectorAll('.home-name-text').forEach(el => new Typed(el, {
  strings: ['Will use the default speed (100)', 'Fastest F#@! Boy!', 'Am too slow...'],
  loop: true,
  typeSpeed: defaultSpeed,
  backSpeed: 80,
  startDelay: 100,
  backDelay: 1500,
  /** "typeSpeed" will be dynamic based on the values found in the "speedsPerIndex" object or it will simply default to "defaultSpeed" variable's value */
  preStringTyped: (arrayPos, self) => self.typeSpeed = speedsPerIndex[arrayPos] || defaultSpeed
}));

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>

<span class="home-name-text"></span>

You are not limited to change the typeSpeed property only, you can change any other attribute you'd need to.