AnimIt - demo3

TweenCSSTransform

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({
	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,
	delay: 1000
});

animation();