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/
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>