How to Style Typing Animation in Javascript

Question

I was wondering if there was any way to make the typing text come in as different font sizes. I have attached a jsfiddle that shows what I have done so far. Is there a way to assign a class to each sentence?

Thank you!

https://jsfiddle.net/te4fo7fh/embedded/result/

var tt_element = document.getElementById("tt_element");
var tt_text = "It would be great if this sentence came in 12pt fontsize.^with the typing effect being editable.^^And this one came in 30pt font size.";
var tt_array = tt_text.split("");
var tt_timer;
var tt_loop = true;
var tt_speed = 70;
var tt_delay = 3000;
var tt_br = "^";

function typeMyText() {
  if (tt_array.length > 0) {
    if (tt_array[0] == tt_br) {
      tt_element.innerHTML += "<br>";
      tt_array.shift();
    } else {
      tt_element.innerHTML += tt_array.shift();
    }
  } else {
    clearTimeout(tt_timer);
    if (tt_loop) {
      setTimeout(clearMyText, tt_delay);
    }
    return false;
  }
  tt_timer = setTimeout(typeMyText, tt_speed);
}

typeMyText();

#tt_element {
  padding-top: 20px;
	line-height:1.5em;
  font-size: 12pt;
  font-family: Georgia;
}

<section class="editable" contenteditable="true">
  <p id="tt_element" class="blue"></p>
</section>

Answer 1

I updated your example.

First of all you type the wished fontSize into your string like your breaks.

var tt_text = "It would be great if this sentence came in 12pt fontsize.^with the typing effect being editable.^^{30}And this one came in 30pt font size.";

After that you put every line into a single span.

var tt_line = document.createElement('span');
tt_element.appendChild(tt_line);

Once you've done that you still need to recognize the fontSize change:

if (tt_array[0] == '{') {
    var index = 0;
    var fontSize = '';
    tt_array.shift() // To skip {
    // Loop to get the size between the {}
    while (tt_array[index] !== '}') {
       fontSize += tt_array[index];
       tt_array.shift()
    }
    tt_array.shift() // To skip }
    tt_line.style.fontSize = fontSize+'px';
  }

See the fiddle here: https://jsfiddle.net/te4fo7fh/1/

Answer 2

You could replace tt_text by an array of objects, which embed style information (tt_text_with_style in my example).

var tt_element = document.getElementById("tt_element");
var tt_current_element;
var tt_array = [];
var tt_text_with_style = [
  {size: '12pt', lineHeight: '25pt', txt: 'It would be great if this sentence came in 12pt fontsize.^with the typing effect being editable.^^'},
  {size: '30pt', lineHeight: '35pt',  txt: 'And this one came in 30pt font size.'}];
var tt_timer;
var tt_loop = false;
var tt_speed = 7;
var tt_delay = 3000;
var tt_br = "^";
var i = 0;
var current_line


function styleMyText() {
  var style = 'font-size: ' + current_line.size + ';line-height: ' + current_line.lineHeight
  tt_current_element = document.createElement('span')
  tt_current_element.setAttribute('style', style)
  tt_element.appendChild(tt_current_element)
}

function clearMyText() {
  tt_element.innerHTML = ''
  tt_array = []
  i = 0;
  typeMyText()
}

function typeMyText() {
  if (tt_array.length === 0) {
    current_line = tt_text_with_style[i++]
    if (!current_line) {
      clearTimeout(tt_timer);
      if (tt_loop) {
        setTimeout(clearMyText, tt_delay);
      }
      return false  
    }
    current_style = current_line.size
    tt_array = current_line.txt.split('')
    styleMyText()
  }
  
  if (tt_array[0] == tt_br) {
    tt_current_element.innerHTML += "<br>";
    tt_array.shift();
  } else {
    tt_current_element.innerHTML += tt_array.shift();
  }

  tt_timer = setTimeout(typeMyText, tt_speed);
}



typeMyText();

#tt_element {
  padding-top: 20px;
  line-height:1.5em;
  font-size: 12pt;
  font-family: Georgia;
}

.blue ::selection {
  background: red;
}

<section class="editable" contenteditable="true">
  <p id="tt_element" class="blue"></p>
</section>

Answer 3

I think you have use Typed.js Which has many options to play with. Here is link for that : Type.js

Here is some example code with this js :

<script src="jquery.js"></script>
<script src="typed.js"></script>
<script>
  $(function(){
      $(".element").typed({
        strings: ["First sentence.", "Second sentence."],
        typeSpeed: 0
      });
  });
</script>
...

<div class="element"></div>

Add this for the animated blinking cursor.

.typed-cursor{
    opacity: 1;
    -webkit-animation: blink 0.7s infinite;
    -moz-animation: blink 0.7s infinite;
    animation: blink 0.7s infinite;
}
@keyframes blink{
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}
@-webkit-keyframes blink{
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}
@-moz-keyframes blink{
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}