<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script>
<body class="demoBody">
	<section class="codeSection">
		<h2> staggerTo </h2>
		<span class="block block4">1</span>
		<span class="block block4">2</span>
		<span class="block block4">3</span>
		<span class="block block4">4</span>
		<span class="block block4">5</span>
		<button class="block4Button"> start </button>
		<div>
			<code>
			<pre>
	var anim4;
	block4Button.addEventListener( 'click', function(){
			if( anim4 ){
				anim4.play( 0 );
			} else {
				anim4 = TweenMax.staggerTo( block4, 1, {
					top: '50px',
					opacity: 0,
					rotation: '90deg',
					scale: 0.1,

					repeat: true
				}, 0.2 );				
			}
	} );	
			</pre>
			</code>			
		</div>
	</section>  
</body>
.demoBody{
	max-width: 1000px;
	padding-left: 5em;
	padding-right: 5em;
	margin-left: auto;
	margin-right: auto;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
button{
	padding: 1em;
	border: solid 1px #ddd;
	border-radius: 3px;
	background: #e2e2e2;
	background: -moz-linear-gradient(top,  #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe 100%);
	background: -webkit-linear-gradient(top,  #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%);
	background: linear-gradient(to bottom,  #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2', endColorstr='#fefefe',GradientType=0 );
	outline: none;
}
button:hover,
button:focus{
	cursor: pointer;
	background: #fcfcfc;
	background: -moz-linear-gradient(top,  #fcfcfc 0%, #d1d1d1 49%, #dbdbdb 50%, #e2e2e2 100%);
	background: -webkit-linear-gradient(top,  #fcfcfc 0%,#d1d1d1 49%,#dbdbdb 50%,#e2e2e2 100%);
	background: linear-gradient(to bottom,  #fcfcfc 0%,#d1d1d1 49%,#dbdbdb 50%,#e2e2e2 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfcfc', endColorstr='#e2e2e2',GradientType=0 );
}

code{
	margin-top: 2em;
	margin-bottom: 2em;
	padding: 1em;
	display: block;
	border-radius: 5px;
	font-size: 0.75em;
	background-color: #ddd;
}
code pre{
	font-family: inherit;
}



/*===============================

=================================*/
.header{
	padding-top: 3em;
	padding-bottom: 3em;
	text-align: center;
}
.codeSection{
	margin-top: 1em;
	margin-bottom: 1em;
	padding: 1em;
	border: dotted 1px #ccc;
}
button{
	margin-top: 1em;
	margin-bottom: 1em;
}	
.block{
			width: 100px;
			height: 100px;
			background-color: #000;
			position: relative;
			top: 0;
		}
		span.block{
			width: 20px;
			height: 20px;
			margin-right: 5px;
			display: inline-block;
		}
var getByClass = function( cls, num ){
	if( typeof num == "number" ){
		classCollection = document.getElementsByClassName( cls )[num];
	} else {
		classCollection = document.getElementsByClassName( cls );
		classCollection.length == 1 ? classCollection = classCollection[0] : '';

	}
	return classCollection;
};	

block4 = getByClass( 'block4'),
		block4Button = getByClass( 'block4Button'),			
		block4ButtonReset = getByClass( 'block4ButtonReset')

	///////// 4
	var anim4;
	block4Button.addEventListener( 'click', function(){
			if( anim4 ){
				anim4.play( 0 );
			} else {
				anim4 = TweenMax.staggerTo( block4, 1, {
					top: '50px',
					opacity: 0,
					rotation: '90deg',
					scale: 0.1,

					repeat: -1
				}, 0.2 );				
			}
	} );
Rerun