JSFiddle - React, Tailwind, and code Playground

by geekambassador

HTML

<script src="http://www.snorkl.tv/dev/libs/testing/TweenMax.min.js"></script>
<div class="box"></div>
<div class="box photo"></div>

CSS

.box{
    position:relative;
    width:200px;
    height:200px;
    background-color:red;
    margin: 100px auto 0px auto;
    
   
    
}


.photo{
    background: url(http://www.snorkl.tv/images/photo.png) no-repeat;
}

JavaScript

var box = $('.box');

var tl = new TimelineLite();
//safari: no boxShadow
tl.to(box, 1, {css:{boxShadow:"2px 2px 10px black"}}, "first")
  .to(box, 4, {css:{borderRadius:"100px 100px 100px 100px"}})
    //chrome: odd jump (more pronounced in safari)
  .to(box, 4, {css:{borderRadius:"0px 100px 0px 50px"}})
  .to(box, 1, {css:{boxShadow:"0px"}})
    //chrome: flicker
  .to(box, 4, {css:{rotationX:180, rotationY:180}})
  .to(box, 1, {css:{rotationX:0}})