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" id="box1">box 1</div>
    <div class="box" id="box2">box 2</div>
    <div class="box" id="box3">box 3</div>
    <div class="box" id="box4">box 4</div>
    <div class="box" id="box5">box 5</div>
</div>

CSS

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

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

body{
    background-color:#6f6f6f;
}

JavaScript

//borderRadius demo
var box1 = $('#box1'),
    box2 = $('#box2'),
    box3 = $('#box3'),
    box4 = $('#box4'),
    box5 = $('#box5'),
    tl = new TimelineLite();

    tl.to(box1, 1, {css:{borderRadius:25}})
      .to(box2, 1, {css:{borderRadius:"10px 50px"}})
       .to(box3, 1, {css:{borderRadius:"0px 50px 0px 10px"}})
      //box4 tween doesn't appear to do anything in Safari
       .to(box4, 1, {css:{borderRadius:"25%"}})
      //the following 2 tweens run real funky in Chrome. 
      //In safari, the first tween seems to be ignored
       .to(box5, 1, {css:{borderRadius:"100%"}})
       .to(box5, 1, {css:{borderRadius:24}})