Показать предложение с анимацией

Question

Я хотел бы показать предложение с анимацией, например, this site (где самое современное машинное обучение означает больше продаж.).

Тело html выглядит следующим образом. Кажется, что это может измениться:

Where state-of-the-art machine learning means more 
<span class="js-animate-words" style="width: 281px; height: 64px; display: inline-block;"> 
    <span class="js-animate-words__label js-animate-words__label--in">sales.</span> 
    <span class="js-animate-words__label">discovery.</span> 
    <span class="js-animate-words__label">relevance.</span> 
</span> 

CSS-это:

.js-animate-words { 
    position:relative; 
} 
.js-animate-words__label--in { 
    opacity:1; 
    transform:scale(1); 
} 
.js-animate-words__label--out { 
    opacity:0; 
    transform:scale(0.8); 
} 
.js-animate-words__label { 
    left:0; 
    opacity:0; 
    position:absolute; 
    transform:scale(1.2); 
    transition:all 0.8s ease; 
    white-space:nowrap; 
} 

Однако, я не могу найти то, что JavaScript библиотеки они используют. Поэтому JSBin не работает.

Кто-нибудь знает, как это исправить?

Кроме того, что делать, если я хочу зарезервировать той же длины для слов, которые меняются? Например, я хочу показать

(sometimes:) 
Where state-of-the-art machine learning means more sales. 
(sometimes:) 
Where state-of-the-art data mining means more sales. 

Answer 1

Я нашел в своем app.min.js, где они меняют класс. Похоже, они делают простые вычисления ширины и высоты с функцией setTimeout. Вот код, который обрабатывает это:

$(function() { 
    var t, e, o = $(".js-animate-words"), n = 0, i = 3500, s = function() { 
     var e = 0 
      , n = 0; 
     t.each(function() { 
      var t = $(this); 
      t.width() > e && (e = t.width()), 
      t.outerHeight() > n && (n = t.outerHeight()) 
     }), 
     o.css({ 
      width: e, 
      height: n 
     }); 
     var i = o.offset() 
      , s = $(window).width() - 20 
      , r = i.left + e; 
     r > s ? o.css({ 
      display: "block" 
     }) : o.css({ 
      display: "inline-block" 
     }), 
     o.parent("h1").css({ 
      position: "relative", 
      top: "1px" 
     }), 
     setTimeout(function() { 
      o.parent("h1").css({ 
       position: "relative", 
       top: "" 
      }) 
     }, 1e3) 
    } 
    , r = function() { 
     t.removeClass("js-animate-words__label--in"), 
     t.eq(n).addClass("js-animate-words__label--in"), 
     "" !== e && t.eq(e).addClass("js-animate-words__label--out"), 
     setTimeout(function() { 
      n < t.length - 1 ? n++ : n = 0, 
      e = n - 1 >= 0 ? n - 1 : t.length - 1, 
      r() 
     }, i) 
    } 
    , a = function() { 
     for (var e = o.text().split(","), n = e.length, i = "", a = 0; n > a; a++) 
      i += '<span class="js-animate-words__label">' + e[a].trim() + "</span>"; 
     o.html(i), 
     t = $(".js-animate-words__label"), 
     t.on("webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend", function(t) { 
      $(this).hasClass("js-animate-words__label--out") && $(this).removeClass("js-animate-words__label--out") 
     }), 
     s(), 
     $(window).on("resize", s), 
     r() 
    } 
    ; 
    o.length && a() 
})