<link rel="stylesheet" href="http://satohmsys.info/files/demo/tweenmax/site/css/style.css">
<main class="main">
		<section class="content wrap">
			<section class="content_tabs section ">
				<nav class="content_tabs_tab">
					<ul>
						<li class="active tab" data-tab="1">tab1</li>
						<li class="tab" data-tab="2">tab2</li>
						<li class="tab" data-tab="3">tab3</li>
					</ul>
				</nav>
				<div class="content_tabs_content">
					<article class="active tabContent" data-tab="1">
						<header>
							<h3>tab1</h3>
						</header>
						<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi necessitatibus perferendis, numquam modi sint id nihil tenetur temporibus, labore cum quae, minus ut reiciendis itaque dicta aperiam eum voluptatibus minima.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi necessitatibus perferendis, numquam modi sint id nihil tenetur temporibus, labore cum quae, minus ut reiciendis itaque dicta aperiam eum voluptatibus minima.</div>
					</article>
					<article class="tabContent" data-tab="2">
						<header>
							<h3>tab2</h3>
						</header>
						<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta aspernatur praesentium fugiat, at neque quia magnam itaque libero facere accusamus atque nihil tempore vel consectetur aliquam quisquam. Ducimus, maiores, fugit.</div>
					</article>
					<article class="tabContent" data-tab="3">
						<header>
							<h3>tab3</h3>
						</header>
						<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit illum, natus velit id eos blanditiis exercitationem hic molestiae fugit placeat, iure ullam ea voluptates odit perferendis nesciunt dignissimos dolores, officia.</div>			
					</article>	
				</div>
			</section>
			
		</section>
	</main>

	<script type="text/javascript" src="http://satohmsys.info/files/demo/tweenmax/site/js/tweenmax/minified/TweenMax.min.js"></script>
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;
};

/**
* animation
*/
var $loading = getByClass( 'loading' ),
$loading_icons = getByClass( 'loading_square_child' ),
$tabs = getByClass( 'tab' ),
$tabContents = getByClass( 'tabContent' ),
$button = getByClass( 'header_navButton' ),
$nav = getByClass( 'nav' ),
$nav_close = getByClass( 'nav_close' ),
$accordion = getByClass( 'content_accordion_child' ),
$accordion_tab = getByClass( 'content_accordion_child_index' ),
$scrollTop = getByClass( 'scrollTop' ),
$TimelineMax = new TimelineMax();

//////タブ切り替え
Array.prototype.forEach.call( $tabs, function( e, index ){

	e.addEventListener( 'click', function( e ){
		e.stopPropagation();

		var $target = e.target;
		var $clickedTab = $target.getAttribute( 'data-tab' );

		checkActiveTab( $target.parentNode.childNodes,$target );

		/// reset
		$TimelineMax.to( $tabContents, 0.25, {
				rotationX: 90,
				opacity: 0,
				display: 'none',
				ease: Expo.easeOut,
				onComplete: function(){
					contentsChange( this.target, $clickedTab );
				}
			});
		/// activation (ここだと下に続くコンテンツがちらつく。)
		// Array.prototype.forEach.call( $tabContents, function( e, index ){			
		// 	$tabContent_single = e;
		// 	$tabContent_num = $tabContent_single.getAttribute( 'data-tab' );
		
		// 	if( $clickedTab == $tabContent_num ){				
		// 		$TimelineMax.fromTo( $tabContent_single, 0.5,{
		// 			display: 'block',					
		// 		},
		// 		{
		// 			rotationX: 0,
		// 			opacity: 1
		// 		})
		// 		.set( $tabContent_single, {
		// 			className: '+=active'
		// 		});
		// 	}else {
		// 		$tabContent_single.classList.remove("active")
		// 	}	
		// });
	});


	/**
	* タブに対応するコンテンツの切り替え
	* @param $contents {array like} タブコンテンツの配列
	* @param $clickedTab {object} クリックしたタブのobject	
	*/
	function contentsChange( $contents, $clickedTab ){
		Array.prototype.forEach.call( $tabContents, function( e, index ){			
			$tabContent_single = e;
			$tabContent_num = $tabContent_single.getAttribute( 'data-tab' );
		
			if( $clickedTab == $tabContent_num ){				
				$TimelineMax.fromTo( $tabContent_single, 0.5,{
					display: 'block',					
				},
				{
					rotationX: 0,
					opacity: 1
				})
				.set( $tabContent_single, {
					className: '+=active'
				});
			}else {
				$tabContent_single.classList.remove("active")
			}	
		});		
	}

	/**
	* クリックしたタブのアクティベート
	* @param $tabs {array} 兄弟タブの配列
	* @param $clickedTab {object} クリックしたタブのobject
	*/
	function checkActiveTab( $tabs, $clickedTab ){
		Array.prototype.forEach.call( $tabs, function( $tab ){
			if( /active/.test( $tab.classList ) ){
				$tab.classList.remove( "active" )
			}
			$clickedTab.classList.add( "active" );
		} );
	}
});
Rerun