TweenMax Test

by Vince

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/TweenMax.min.js"></script>

<h1>Tricks</h1>

<ul>
	<li class="box"></li>
	<li class="box"></li>
	<li class="box"></li>
	<li class="box"></li>
	<li class="box"></li>
	<li class="box"></li>
</ul>
<img src="http://placehold.it/300/300/&text=Header" alt="" id="header">

CSS

#header {
	position: relative;
	display: block;
	margin: 1em auto 0;
}
ul {
	display: block;
}
li.box:first-child {margin-left: 0em;}
li.box {
	display: block;
	width: 40px;
	height: 40px;
	background-color: orange;
	float: left;
	margin-left: 1em;
	transform: scale(1) rotate(0deg)
	position: relative;
}

JavaScript

var target = document.getElementById('header');
var duration = 3;
var varsTo = {
	// left: 200,
	opacity: 1,
	backgroundColor: '#CCC',
	marginTop: '0em',
	padding: '1em',
	borderRadius: '50%',
	ease: Bounce.easeOut
};
var varsFrom = {
	// left: 200,
	opacity: 0,
	backgroundColor: '#CCC',
	marginTop: '1em',
	padding: '0em',
	borderRadius: '0%'
};
TweenMax.from(target, duration, varsFrom);
TweenMax.to(target, duration, varsTo);
var boxes = {
	target: '.box',
	duration: 3,
	animate: {
		from: {
			scale: 2.3,
			delay: 0.5
		},
		to: {
			scale: 1
		}
	},
	staggerAmount: 0.5
};
TweenMax.staggerFrom(boxes.target, boxes.duration, boxes.animate.from, boxes.staggerAmount);
// TweenMax.to(boxes.target, boxes.duration, boxes.animate.to);