<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script>
<body class="demoBody">
	<section class="codeSection">
		<h2>TweenMax.to</h2>
		<div class="block block1"></div>
		<button class="blockButton">animation</button>
		<div>
			<code><pre>
	blockButton.addEventListener( 'click', function(){
		TweenMax.to( '.block1', 1, {
			x: "100px",
			delay: 0.3,
			ease: Elastic.easeOut.config(1, 0.3),
			onComplete: function(){
				//実行処理後に呼ばれる関数
			},
			onStart: function(){
				//実行開始時に呼ばれる関数
			},
			onUpdate: function(){
				//実行中に呼ばれる関数
			}
		});
	} );
			</pre></code>
			
		</div>
	</section>
.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;
};


window.addEventListener('DOMContentLoaded', function(){
	var block1 = getByClass( 'block1');
	var blockButton = getByClass( 'blockButton' );
	// 1 
	blockButton.addEventListener( 'click', function(){
		TweenMax.to( block1, 1, {
			x: "100px",
			delay: 0.3,
			ease: Elastic.easeOut.config(1, 0.3),
			onComplete: function(){
				//実行処理後に呼ばれる関数
			},
			onStart: function(){
				//実行開始時に呼ばれる関数
			},
			onUpdate: function(){
				//実行中に呼ばれる関数
			}
		});
	} ); 
});
Rerun