body {
margin: 20px auto;
font-family: "Lato";
font-weight: 300;
width: 600px;
font-size: 1.3em;
}
.container {
perspective: 100px;
height: 300px;
}
button {
background: orange;
border: none;
color: white;
font-family: 'Lato';
padding: 10px 15px;
cursor: pointer;
outline: none;
margin: 10px;
font-weight: 300;
}
var polyA = new mojs.Shape({
parent: ".container",
shape: "polygon",
className: 'yay',
fill: "red",
stroke: "black",
isShowStart: true,
points: 4,
left: 100,
x: {
0: 500
},
strokeWidth: {
5: 2
},
duration: 2000,
easing: 'elastic.in'
}).then({
strokeWidth: 5,
points: {
4: 3
},
angle: {
0: 720
},
scale: {
1: 2
},
fill: {
'red': 'yellow'
},
duration: 1000,
delay: 200,
easing: 'elastic.out'
});
document.querySelector(".play").addEventListener("click", function() {
polyA.play();
});