Smoothly changing text with JavaScript

Question

I\'m making a landing page where a phrase is constantly changing with select words. For instance,

Design better websites
made for clients.

Answer 1

Writing a solution like this you will quickly come to realize you will have to abandon the idea of dynamic line breaks if your words differ in length by a reasonable amount.

That small detail aside, you can easily achieve the effect you're after using a standard pyramid of jQuery animate callback hell:

var target = $('#target');
var change = function(str) {
  var tmp = $('
' + str + '
');
  tmp.css({
      display: "inline-block",
      position: "absolute"
    })
    .appendTo('body')
    .hide();
  var targetWidth = tmp.outerWidth();
  tmp.remove();
  target.animate({
    opacity: 0
  }, 200, function() {
    target.animate({
      width: targetWidth
    }, 300, function() {
      target.empty()
        .html(str)
        .css({
          display: "initial"
        })
        .animate({
          opacity: 1
        }, 200);
    });
  });
}
var samples = [
  "some sample",
  "another example",
  "just"
];
var i = 0;
setInterval(function() {
  change(samples[++i % samples.length]);
}, 1400);

.container {
  margin: 0 auto;
  text-align: center;
}
#target {
  display: inline-block;
  vertical-align: bottom;
  white-space: no-wrap;
  height: 1em;
}

  
This is  text
  
in a longer sentence