JSFiddle - React, Tailwind, and code Playground

by geekambassador

HTML

<script src="http://www.snorkl.tv/dev/libs/greensock/TweenMax.min.js"></script>
<script src="http://www.snorkl.tv/dev/libs/greensock/plugins/ColorPropsPlugin.min.js"></script>
    <section class="buttons">
        <button type="button" class="fun">fun!</button>
        <button type="button" class="fun-reverse">!nuf</button>
    </section>

    <section class="mast">

        <!-- div.col.col-$*16>figure.front+figure.back -->
        <div class="col col-1">
            <figure class="front"></figure>
            <figure class="back"></figure>
        </div>
        <div class="col col-2">
            <figure class="front"></figure>
            <figure class="back"></figure>
        </div>
        <div class="col col-3">
            <figure class="front"></figure>
            <figure class="back"></figure>
        </div>
        <div class="col col-4">
            <figure class="front"></figure>
            <figure class="back"></figure>
        </div>
        <div class="col col-5">
            <figure class="front"></figure>
            <figure class="back"></figure>
        </div>
        <div class="col col-6">
            <figure class="front"></figure>
            <figure class="back"></figure>
        </div>
        <div class="col col-7">
            <figure class="front"></figure>
            <figure class="back"></figure>
        </div>
        <div class="col col-8">
            <figure class="front"></figure>
            <figure class="back"></figure>
        </div>
        <div class="col col-9">
            <figure class="front"></figure>
            <figure class="back"></figure>
        </div>
        <div class="col col-10">
            <figure class="front"></figure>
            <figure class="back"></figure>
        </div>
        <div class="col col-11">
            <figure class="front"></figure>
            <figure class="back"></figure>
        </div>
        <div class="col col-12">
            <figure class="front"></figure>
           ...

CSS

/* line 7, ../sass/style.scss */
figure {
  margin: 0; }

/* line 11, ../sass/style.scss */
body {
  background-color: #222; }

/* line 15, ../sass/style.scss */
.mast {
  width: 960px;
  height: 960px;
  margin: auto;
  -webkit-perspective: 900px;
  -moz-perspective: 900px;
  -ms-perspective: 900px;
  -o-perspective: 900px;
  perspective: 900px;
  cursor: pointer; }
  /* line 33, ../sass/style.scss */
  .mast .col {
    width: 6.25%;
    height: 100%;
    float: left;
    position: relative;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform-style: preserve-3d;
    pointer-events: none; }
  /* line 46, ../sass/style.scss */
  .mast .front,
  .mast .back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden; }
  /* line 53, ../sass/style.scss */
  .mast .front {
    background-image: url("http://f.cl.ly/items/1w2I0U382k0m1I3e3U2I/earth.jpg"); }
  /* line 57, ../sass/style.scss */
  .mast .back {
    background-image: url("http://f.cl.ly/items/110t1y2N2K3g2h2u2O3E/mars.jpg");
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    transform: rotateY(180deg); }
  /* line 68, ../sass/style.scss */
  .mast .col-1 .front {
    background-position: 0% 0; }
  /* line 71, ../sass/style.scss */
  .mast .col-1 .back {
    background-position: 100% 0; }
  /* line 68, ../sass/style.scss */
  .mast .col-2 .front {
    background-position: 6.66667% 0; }
  /* line 71, ../sass/style.scss */
  .mast .col-2 .back {
    background-position: 93.33333% 0; }
  /* line 68, ../sass/style.scss */
  .mast .col-3 .front {
    background-position: 13.33333% 0; }
  /* line 71,...

JavaScript

var $cols = $('.col');

var fun = new TimelineLite({
    paused : true,
});

    
//fun.timeScale = .5;



    
var delay = -2

fun.append(
        TweenMax.staggerTo( $cols, 1, {
            css : {
            opacity : 0
            }
        }, 0.1 )
    )
    
console.log(fun.duration()); //2.5
    
fun.append(
        TweenMax.staggerTo( $cols, 1, {
            css : {
                opacity : 1
            }
        }, 0.1), delay
    )

console.log(fun.getChildren().length);

$('.fun').on( 'click', function(){
    fun.play();
} );
$('.fun-reverse').on( 'click', function(){
    fun.reverse();
} );