JSFiddle - React, Tailwind, and code Playground

by khamer

HTML

<script src="https://raw.githubusercontent.com/julianshapiro/velocity/master/velocity.min.js"></script>
<h1>
    <span style="opacity: 1;">Lorem.</span>
    <span>Vero?</span>
    <span>Fugit.</span>
    <span>Esse.</span>
    <span>Reprehenderit!</span>
    Secure your
</h1>

SCSS

h1 {
    text-align: right;
    position: relative;
    padding: 2em 50% 2em 0;
    
    span {
        opacity: 0;
        position: absolute;
        left: 50%;
        margin-left: .25em;
        padding-left: .25em;
        text-align: left;
    }
}

JavaScript

$(function() {
    var rotateH1 = function() {
        var $heading = $(this);
        var $current = $heading.find('span:first-child');
        var $next    = $current.next();
        
        $current.velocity({opacity: 0}, 500);
        $next.velocity({opacity: 1}, 500);
        $heading.append($current);
    };
    
    setInterval(function() {
        $('h1').each(rotateH1);
    }, 2000);
});