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="hide">hide</button>
        <button type="button" class="show">show</button>
    
    </section>

    <section class="mast">

      
        <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>
            <figure class="back"></figure>
        </div>
        <div...

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');
console.log($cols.length);
var show = function(){
    TweenMax.staggerTo($cols, .5, {
        css : {
            opacity : 1
        }
    }, .1) // set to 0.1 to see last one first first
}

var hide = function(){
    TweenMax.staggerTo($cols, .5, {
        css : {
            opacity : 0
        }
    }, .1) // set to 0.1 to see last one first first
}

$('.show').on('click', show);
$('.hide').on('click', hide);