var first = ['Create','Cut','Reticulate'];
var second = ['you','clients','artists','us'];
var firstM = [], secondM = [], el;
var $first = $('.the-first');
var $second = $('.the-second');
var $container = $('#container');
// init static //
$first.text(first[0]);
$second.text(second[0]);
// create measurables //
for(var i = 0; i < first.length; i++){
el = $('<div class="measurable">' + first[i] + '</div>');
$container.append(el);
firstM.push(el.width());
}
for(var i = 0; i < second.length; i++){
el = $('<div class="measurable">' + second[i] + '</div>');
$container.append(el);
secondM.push(el.width());
}
// absolutize //
var positions = [];
$('#container > span').each(function(){
positions.push($(this).position());
});
$('#container > span').each(function(){
var pos = positions.shift();
$(this).css({
position: 'absolute',
left: pos.left,
top: pos.top
});
});
// remember initial sizes //
var firstInitialWidth = $first.width();
var secondInitialWidth = $second.width();
// loop the loop //
var activeWordsIndex = 0;
setInterval(function(){
activeWordsIndex++;
var firstIndex = activeWordsIndex % first.length;
var secondIndex = activeWordsIndex % second.length;
$first.text( first[firstIndex] );
$second.text( second[secondIndex] );
var firstLineOffset = (firstM[firstIndex] - firstInitialWidth) / 2;
var secondLineOffset = (secondM[secondIndex] - secondInitialWidth) / 2;
$('.static.first').css({
transform: 'translateX(' + firstLineOffset + 'px)'
});
$('.static.second').css({
transform: 'translateX(' + (-secondLineOffset) + 'px)'
});
$first.css({
transition: 'none',
transform: 'translate(' + (-firstLineOffset) + 'px, -30px)',
opacity: '0'
});
setTimeout(function(){
$first.css({
transition: 'all 1s ease',
transform: 'translate(' + (-firstLineOffset) + 'px, 0px)',
opacity: '1'
});
}, 50);
$second.css({
transition: 'none',
transform: 'translate(' + (-secondLineOffset) + 'px, 30px)',
opacity: '0'
});
setTimeout(function(){
$second.css({
transition: 'all 1s ease',
transform: 'translate(' + (-secondLineOffset) + 'px, 0px)',
opacity: '1'
});
}, 50);
}, 2000);
#ubercontainer {
border: 1px solid #eaeaea;
border-radius: 2px;
background-color: #ffefc6;
width: 500px;
margin: 20px auto;
padding: 30px 0;
}
#container {
position: relative;
text-align: center;
font-family: sans-serif;
font-size: 32px;
font-weight: 800;
color: #4a6b82;
height: 78px;
}
.measurable {
position: absolute;
visibility: hidden;
}
.static.first, .static.second {
transition: transform 1s ease;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="ubercontainer">
<div id="container">
<span class="the-first"></span>
<span class="static first">better websites </span><br />
<span class="static second">made for</span>
<span class="the-second"></span>
</div>
</div>