body {
margin: 20px;
font-family: 'Lato';
font-weight: 300;
text-align: center;
}
.box {
width: 100px;
height: 100px;
display: inline-block;
border: 2px solid black;
margin: 10px;
position: relative;
top: 0px;
}
.a {
background: orange;
}
.b {
background: red;
}
.c {
background: yellow;
}
button {
background: wheat;
border: 1px solid black;
font-family: 'Lato';
border-radius: 5px;
padding: 8px;
margin: 20px 0;
outline: none;
cursor: pointer;
}
var theBoxes = document.querySelectorAll(".box");
var boxA = document.querySelector(".a");
var boxB = document.querySelector(".b");
var boxC = document.querySelector(".c");
var startButton = document.querySelector(".start");
var animateAll = KUTE.allFromTo(
theBoxes,
{ borderTopLeftRadius:'0%' },
{ borderTopLeftRadius:'100%' },
{ offset: 1000 }
);
var animateA = KUTE.fromTo(
boxA,
{ borderTopRightRadius:'0%' },
{ borderTopRightRadius:'100%' }
);
var animateB = KUTE.fromTo(
boxB,
{ borderBottomLeftRadius:'0%' },
{ borderBottomLeftRadius:'100%' }
);
var animateC = KUTE.fromTo(
boxC,
{ borderBottomRightRadius:'0%' },
{ borderBottomRightRadius:'100%' }
);
startButton.addEventListener(
"click",
function() {
animateAll.start();
animateA.start();
animateB.start();
animateC.start();
},
false
);