AnimIt － demo2

lifecycle, curve

by b1ncer

HTML

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

CSS

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

JavaScript

var cubeEl = document.getElementById('cube');

var animation = AnimIt({
	from: 0,
	to: innerWidth - 100,
	curve: AnimIt.outBounce,
	duration: 1000,
	onUpdate: function(value) {
		cubeEl.style.left = value+'px';
	},
	onComplete: function() {
		cubeEl.style.backgroundColor = 'red';
	}
});

animation();