AnimIt - demo4

Promise

by b1ncer

HTML

<script src="https://npmcdn.com/[email protected]/dist/anim-it.js"></script>
<div id="cube" class="cube"></div>
<div id="cube2" class="cube2"></div>
<button id="button">toggle</button>

CSS

.cube {
	width: 40px;
	height: 40px;
	position: absolute;
	background-color: gray;
	border-radius: 20%;
	margin: 40px;
}

.cube2 {
	width: 40px;
	height: 40px;
	top: 100px;
	position: absolute;
	background-color: green;
	border-radius: 20%;
	margin: 40px;
}

JavaScript

var cubeEl = document.getElementById('cube');
var cube2El = document.getElementById('cube2');
var button = document.getElementById('button');

var animation = AnimIt({
	target: cubeEl.style,
	setter: {
		transform: AnimIt.Extra.TweenCSSTransform.default({
			to: {
				translate: [innerWidth - 200, 0, 0],
				rotate: [0, 0, Math.PI * 10]
			},
			curve: AnimIt.outBack
		})
	},
	duration: 1000
});

var animation2 = AnimIt({
	target: cube2El.style,
	setter: {
		transform: AnimIt.Extra.TweenCSSTransform.default({
			to: {
				translate: [innerWidth - 200, 0, 0],
				rotate: [0, 0, Math.PI * 10]
			},
			curve: AnimIt.outBack
		})
	},
	duration: 1000,
	delay: 100
});

var flag = false;

button.addEventListener('click', function() {
	flag = !flag;
	if (flag) {
		animation().then(animation2);	
	} else {
		Promise.all([animation(), animation2()]).then(function() {
			console.log('complete');
		});
	}
});