Word by word fade in animation javascript/jquery

Question

I'm looking for a way to show this animation BUT with different duration between each word and breaking the line(You can see it in YouTube video)

https://youtu.be/KwELYWNpMyE

I've also took some further steps but no success.

https://jsfiddle.net/5zo9sh8b/19/

Answer 1

Implement the text to time function, as you wish. It is a simple code, but you can improve it.

var $el = $(".example:first"), text = $.trim($el.text()),
    words = text.split(" "), html = "";

for (var i = 0; i < words.length; i++) {
    html += "<span style=\"display:none\">" + words[i] + ((i+1) === words.length ? "" : " ") + "</span>";
}
elements = $el.html(html).children();

function text_to_time(text){
    // implement your function
    times = [100, 100, 100, 100, 100, 1000, 1500, 1500, 2000, 2000];
  return times[text.length];
}

function next_word(i, _elements){
    element = _elements[i];
  element = $(element);
  
  element.fadeIn(500, function() {
      i = i + 1;
    if (_elements.length > i){
        time = text_to_time($(_elements[i]).text());
        setTimeout(function() {
            next_word(i, _elements);
      }, time);
    }
  });
}

setTimeout(function() {
  next_word(0, elements);
}, 1000);

.example{
  font-size:5vw;
  font-weight:700;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div class="example">
    Ohne uns wäre es einfach
</div>