JSFiddle - React, Tailwind, and code Playground

by thetron

HTML

<div class="controls">
    <a href="#" class="reset">Reset</a>
</div>
<div class="wrapper">
<div class="row">
<div class="hype" data-timing="6.5">
    <div class="loading">
        &hellip;
    </div>
    <div class="content">
        <div class="media">
            &nbsp;
        </div>
        <div class="caption">
            Lorem ispum dolor sit amet sit lorem ipsum dolor.
        </div>
    </div>
</div>

<div class="hype" data-timing="4">
    <div class="loading">
        &hellip;
    </div>
    <div class="content">
        <div class="media">
            &nbsp;
        </div>
        <div class="caption">
            Lorem ispum dolor sit amet sit lorem ipsum dolor.
        </div>
    </div>
</div>

<div class="hype" data-timing="2">
    <div class="loading">
        &hellip;
    </div>
    <div class="content">
        <div class="media">
            &nbsp;
        </div>
        <div class="caption">
            Lorem ispum dolor sit amet sit lorem ipsum dolor.
        </div>
    </div>
</div>

<div class="hype" data-timing="4.5">
    <div class="loading">
        &hellip;
    </div>
    <div class="content">
        <div class="media">
            &nbsp;
        </div>
        <div class="caption">
            Lorem ispum dolor sit amet sit lorem ipsum dolor.
        </div>
    </div>
</div>
    
<div class="hype"  data-timing="6.5">
    <div class="loading">
        &hellip;
    </div>
    <div class="content">
        <div class="media">
            &nbsp;
        </div>
        <div class="caption">
            Lorem ispum dolor sit amet sit lorem ipsum dolor.
        </div>
    </div>
</div>
</div>
<div class="row">
<div class="hype" data-timing="5">
    <div class="loading">
        &hellip;
    </div>
    <div class="content">
        <div class="media">
            &nbsp;
        </div>
        <div class="caption">
            Lorem ispum dolor sit amet sit lorem ipsum dolor.
        </div>
    </div>
</div>

<div class="hype"...

SCSS

body{
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 200;
}

*{
    box-sizing: border-box;
}

.controls{
    text-align: center;
    font-size: 16px;
    padding: 25px;
    width: 100%;
}

.wrapper{
    width: 1280px;
    overflow: hidden;
    margin: 0 auto;
}

.row{
    height: 116px;
    width: 100%;
    white-space: nowrap;
    margin-bottom: 18px;
    
    &:nth-child(even){
        margin-left: -132px;
        margin-right: -132px;
    }
}

.hype{
    display:inline-block;
    white-space: normal;
    margin-right: 16px;
    width: 240px;
    height: 116px;
    position: relative;
    -webkit-transform-style: preserve-3d;
    -webkit-perspective: 300px;
    
    .loading, .content{ -webkit-backface-visibility: hidden; transition: all 1.2s; }
    
    .loading{
        text-align: center;
        width: 240px;
        height: 116px;
        padding: 40px;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 100;
        background: #EEE;
    }
    
    .content{
        width: 240px;
        height: 116px;
        position: absolute;
        -webkit-transform: rotateX(180deg);
        top: 0;
        left: 0;
        background: #EEE;
        z-index: 100;
    }
    
    &.flipped{
        .content{ -webkit-transform: rotateX(0deg); }
        .loading{ -webkit-transform: rotateX(-180deg); }
    }
    
    .media{
        background: #CCC;
        width: 120px;
        height: 116px;
        display: block;
        float: left;
    }
    
    .caption{
        width: 120px;
        height: 116px;
        display: block;
        float: left;
        padding: 8px 10px;
    }
}

JavaScript

function reset(){
    $(".hype").removeClass("flipped");
    runAnimation();
}

function runAnimation(){
    $(".hype").each(function(){
       var hype = $(this); 
       var timing = parseFloat(hype.data('timing'));
        
        setTimeout(function(){
           hype.addClass("flipped"); 
        }, 1500 + (250*timing));
    });    
}

$(function(){
    runAnimation();
    $(".controls a").on("click", function(e){
       e.preventDefault();
       reset();
    });
});