TweenMax sample

TweenMax.to

	blockButton.addEventListener( 'click', function(){
		TweenMax.to( '.block1', 1, {
			left: "100px",
			delay: 0.3,
			ease: 'linear',
			onComplete: function(){
				//実行処理後に呼ばれる関数
			},
			onStart: function(){
				//実行開始時に呼ばれる関数
			},
			onUpdate: function(){
				//実行中に呼ばれる関数
			}
		});
	} );
			

restart

			var anim;
			var block2Button = document.getElementsByClassName( 'block2Button');	
			block2Button[0].addEventListener( 'click',function(){
				if( anim ){
					anim.restart();
				} else {
					anim = TweenMax.to( block2, 5,
						{
							left: '100px',
							delay: 0.2,
							ease: 'linear',
							onComplete: function(){
								//実行処理後に呼ばれる関数
							},
							onStart: function(){
								//実行開始時に呼ばれる関数
							},
							onUpdate: function(){
								//実行中に呼ばれる関数
							}
						}
					);					
				}
			})
			

time scale

	//////// 2 
	var anim2;
	block2_1Button.addEventListener( 'click',function(){
		if( anim ){
			anim2.restart();
		} else {
			anim2 = TweenMax.to( block2_1, 3,{
				x: '100%',
				delay: 0.2,
				ease: Power1.easeOut
			});					
		}
	});	
	block2_1Button2.addEventListener( 'click',function(){
		anim2.timeScale( 0.1 )
	});			
			

startAt

	///////2-2
	block2_2Button.addEventListener( 'click', function(){
		TweenMax.to( block2_2, 4, {
			left: '200px',
			startAt: {
				left: 0
			},
			delay: 0.5,
			ease: 'Power4',
		})
	} );
			

TweenMax.fromTo

	///////2-3
	block2_3Button.addEventListener( 'click', function(){
		TweenMax.fromTo( block2_3, 4, 
			{left: '0px'},
			{left: '200px'}
		)
	} );
			

repeat or pause

block3ButtonPlay.addEventListener( 'click',function(){
	anim = TweenMax.to( block3, 1,
		{
			left: '100px',
			delay: 0.2,
			ease: 'SlowMo',
			repeat: -1, 
			yoyo: true, 
			onComplete: function(){
				//実行処理後に呼ばれる関数
			},
			onStart: function(){
				//実行開始時に呼ばれる関数
			},
			onUpdate: function(){
				//実行中に呼ばれる関数
			}
		}
	);					
});
block3ButtonPause.addEventListener( 'click', function( e ){
		anim.pause();
});
			

staggerTo

1 2 3 4 5
	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 );				
			}
	} );	
			

staggerTo with startAt

	block7Button.addEventListener( 'click', function(){
		TweenMax.staggerTo( block7, 2, {
			startAt:{
				scale:0.5
			}, 
			left: '20px',
			scale: 1.5,
			opacity: 0, 

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

progress

	var anim5;
	block5Button.addEventListener( 'click', function(){
		TweenMax.to( block5, 10, {
			left: '300px',
			startAt: {
				left: 0
			},
			delay: 0.55,
			onUpdate: function(){
				progress = this.progress(),
				bar = document.getElementsByClassName( 'progressBar' )[0],
				animationTime = document.getElementsByClassName( 'animationTime' )[0];				
				bar.setAttribute( 'value', progress * 300 );
			}
		})
	});
			

timeline animation


	var anim5;
	block5Button.addEventListener( 'click', function(){
		TweenMax.to( block5, 10, {
			x: '300px',
			startAt: {
				x: 0
			},
			ease: 'SlowMo', 
			delay: 0.55,
			onUpdate: function(){
				progress = this.progress();
				bar = document.getElementsByClassName( 'progressBar' )[0];
				bar.setAttribute( 'value', progress * 300 );
			}
		})
	});
			

timeline multiple animation

block8Button.addEventListener( 'click', function(){
		var tl = new TimelineMax();
		tl.staggerTo( block8, 1, {
			startAt: {
				left: '-10px',
				rotation: '-90deg'
			},
			scale: 2,
			opacity: 0,
			rotation: 0,
			top: '-50%',
			left: '0px'
		}, 0.4 )
		.fromTo( block8, 1,
			{
				left: '999px'
			},
			{
				left: 0,
				opacity: 1
			}
		)
		.staggerTo( block8, 1, {
			left: '-999px',
			ease: Power1.easeInOut,
			delay: 1,
			onComplete: function( e ){
				this.target.style.opacity = 0;
			}
		}, 0.5 )
		.to( getByClass( 'block8-1'), 2, {
			startAt: {
				width: '500px',
				opacity: 0,
				left: 0
			},
			width: '20px',
			rotation: '0',
			opacity: 0.7,
			backgroundColor: 'red',
			onUpdate: function(){
				// in callback!!
				tl.fromTo( this.target, 2,
					{
						backgroundColor: 'blue'
					},
					{
						backgroundColor: 'black',
						repeat: -1,
						yoyo: true						
					}
				);
			}
		} )
		.staggerTo( [getByClass('block8-2'), getByClass('block8-3'), getByClass('block8-4')], 1, {
			opacity: 1,
			left: 0,
			borderRadius: '100%',

			ease: Bounce.easeOut,
			yoyo: true
		},0.5 ).
		to( getByClass('block8-4'), 1, {
			startAt: {
				left: 'auto'
			},
			right: '-300px',
			ease: Elastic.easeIn,
			repeat: 2,
			yoyo: true
			})
		.to( block8, 0.5, {
			scale: 1,

			delay: 2,
			onComplete: function(){
				var callbackTl = new TimelineMax();
				callbackTl.staggerTo( this.target, 0.5, {
					borderRadius: '10%'
				}, 0.5)
				.to( getByClass( 'block8-4'), 1, {
					scale: 2.5, 
					backgroundColor: 'red',

					ease: Elastic.easeOut,
					repeat: -1,
					yoyo: true
				})
			}
		});

	} ); 
			

heart

	block9Button.addEventListener( 'click', function(){
		TweenMax.to( block9, 1, {
			scale: 2,
			color: 'red',

			ease: Elastic.easeOut,
			repeat: -1,
			yoyo: true
		});
	} );