[SplitText][ScrambleText] - "Decode" animation with white space

[dotmot]

Hello, 

Does anyone know how to handle spaces when scrambling split text?
When a string contains a space the same amount of spaces is missing in the end of the animation.

This animation is the same as this previous one but i did not account for spaces

 

See the Pen wvOrqOy by Dotmot (@Dotmot) on CodePen.

[Rodrigo]

Hi,

 

Sorry for the delay 🙏

 

What exactly is the issue here? The fact that the last letter is not being animated? If so just remove the empty space from the array:

const split_message = [
  "W",
  "e",
  "l",
  "c",
  "o",
  "m",
  "e",
  "B",
  "a",
  "c",
  "k"
];

For SplitText spaces are not characters and therefore are not accounted for in the instance's chars array, so the arrays lengths don't match, one has 12 elements (split_message) and the other has 11 (split_text.chars)

console.log(msg.innerText, msg.innerText.length); // ゼヅヌヂハネヅ ウオシズ 12
console.log(split_text.chars); // 11
console.log(split_message.length); // 12 - with the space in the array

Here is a fork of your demo:

See the Pen pvjBdWv by GreenSock (@GreenSock) on CodePen.

 

Hopefully this helps

Happy Tweening!