Rotating Text Animation

HTML

<h1 class="intro">Getting the most out of <em>Talented
    <div class="change-text"><span class="active">Animators</span><span>Designers</span><span>Directors</span><span>Coders</span></div></em></h1>

CSS

body {
    background: #2d2d2d;
    font-family: Chaparral Pro;
}
h1.intro {
    margin-top: 100px;
    margin-bottom: 0;
    font-weight: 200;
    font-size: 26px;
    font-size: 1.625rem;
    line-height: 1.3;
    font-style: italic;
    color: white;
    text-align: center;
}
@media all and (min-width: 64em) {
    h1.intro {
        font-size: 30px;
        font-size: 1.875rem;
    }
}
h1.intro em {
    font-style: normal;
    font-weight: 700;
    display: block;
    font-size: 28px;
    font-size: 1.75rem;
    margin-bottom: 15px;
    color: white;
}
@media all and (min-width: 64em) {
    h1.intro em {
        font-size: 40px;
        font-size: 2.5rem;
    }
}
h1.intro em .change-text {
    width: 130px;
    height: 28px;
    display: inline-block;
    position: relative;
    border-bottom: 1px solid rgba(255, 255, 255, 0.6);
    margin-bottom: -8px;
}
@media all and (min-width: 41.625em) {
    h1.intro em .change-text {
        height: 26px;
        width: 127px;
        margin-bottom: -6px;
    }
}
@media all and (min-width: 50em) {
    h1.intro em .change-text {
        height: 28px;
        width: 127px;
        margin-bottom: -6px;
    }
}
@media all and (min-width: 64em) {
    h1.intro em .change-text {
        width: 190px;
        height: 34px;
        margin-bottom: -6px;
    }
}
h1.intro em .change-text:before {
    content:'';
    background: white;
    position: absolute;
    right: -20px;
    bottom: -1px;
    height: 41px;
    width: 20px;
    display: none;
}
h1.intro em .change-text span {
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
    text-align: left;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    line-height: 1;
    clip: rect(0px, 0px, 198px, 0px);
}
h1.intro em .change-text span:after {
    content:'';
    background: white;
    position: absolute;
    right: -40px;
    bottom: -1px;
    height: 41px;
    width: 10px;
    display:...

JavaScript

// text rotator
textRotator = function (element) {
    var words = $(element),
        total = words.length - 1,
        position = 0,
        current = null,
        timer = null;
    $(element).first().addClass('active');
    var autoSlide = function () {
        words.removeClass('active');
        if (position === total) {
            position = 0;
        } else {
            position = position + 1;
        }
        //console.log(position);
        words.eq(position).addClass('active');
    };
    timer = setInterval(autoSlide, 3000);
};
$(document).ready(function () {
    textRotator('.change-text span');
});