Estoy buscando una manera de mostrar esta animación PERO con una duración diferente entre cada palabra y rompiendo la línea (Puedes verlo en el video de YouTube)
https://youtu.be/KwELYWNpMyETambién he dado algunos pasos más, pero sin éxito.
https://jsfiddle.net/5zo9sh8b/19/Implemente la función de texto a tiempo, como desee. Es un código simple, pero se puede mejorar.
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>