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>
       ...

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 43, ../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;
    -webkit-transition: all 800ms;
    -moz-transition: all 800ms;
    -o-transition: all 800ms;
    transition: all 800ms;
    pointer-events: none;
    -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    -moz-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    -o-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275); }
  /* line 62, ../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 71, ../sass/style.scss */
  .mast .front {
    background-image: url("http://f.cl.ly/items/1w2I0U382k0m1I3e3U2I/earth.jpg"); }
  /* line 75, ../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 84, ../sass/style.scss */
  .mast .col-1 {
    -webkit-transition-delay:...

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);