JSFiddle - React, Tailwind, and code Playground

by geekambassador

HTML

<script src="http://www.snorkl.tv/dev/libs/testing/TweenMax.min.js"></script>
<div class="wrapper">
    <div class="box">GSAP JS</div>
    <div class="box">CAN</div>
    <div class="box">NOW</div>
    <div class="box">ANIMATE</div>
    <div class="box">3D</div>
    <div class="box">STUFF</div>
</div>

CSS

.box{
    position:relative;
    width:250px;
    height:50px;
    background-color:#000;
    line-height:50px;
    font-weight:bold;
    color:white;
    font-size:40px;
    padding:12px;
    font-family:Helvetica, Arial, sans-serif;
    margin-top:1px;
    visibility:hidden;
}

.wrapper{
    position:relative;
    width:274px;
    margin:60px;
}

body{
    background-color:#161616;
}

JavaScript

var box = $('.box');
var wrapper = $('.wrapper');

var tl = new TimelineMax({repeat: 6, yoyo: true, repeatDelay:1})

  
tl.set(box, {
    css: {
        borderRadius: 8,           
        boxShadow: "0px 0px 6px #90e500",
        rotationY: 0, 
        transformOrigin:"0px",
         
                
    }
});


tl.staggerTo(box, 1, {css:{rotationY:360, autoAlpha:1}}, .2, "begin");
tl.from(wrapper, tl.duration(), {css:{left:250}}, "begin")