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: 20px 10px;
opacity: 0.1;
}
.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: 5px;
outline: none;
cursor: pointer;
}
var theBoxes = document.querySelectorAll(".box");
var opacityButton = document.querySelector(".opacity");
var rotateButton = document.querySelector(".rotate");
var chainButton = document.querySelector(".chain");
var loopButton = document.querySelector(".loop");
var animateOpacity = KUTE.allFromTo(
theBoxes,
{ opacity: 1 },
{ opacity: 0.1 },
{ offset: 100, duration: 800 }
);
var animateRotation = KUTE.allFromTo(
theBoxes,
{ rotate: 0 },
{ rotate: 360 },
{ offset: 250, duration: 800 }
);
opacityButton.addEventListener(
"click",
function() {
animateOpacity.start();
},
false
);
rotateButton.addEventListener(
"click",
function() {
animateRotation.start();
},
false
);
chainButton.addEventListener(
"click",
function() {
animateOpacity.chain(animateRotation);
animateOpacity.start();
},
false
);
loopButton.addEventListener(
"click",
function() {
animateOpacity.chain(animateRotation);
animateRotation.chain(animateOpacity);
animateOpacity.start();
},
false
);