TweenMax JavaScript基本動作

ドキュメント

boxを動かす複数

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>HTML 5 complete</title>
<!--[if IE]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
  article, aside, dialog, figure, footer, header,
  hgroup, menu, nav, section { display: block; }
</style>


<style>
#container {
    max-width: 980px;
}

#container > div {
    height: 150px;
    width: 150px;
    text-align: center;
    vertical-align: center;
    margin: 20px;
    float: left;
    color : white;
    font-size: 17px;
    line-height: 100px;
}


.box1 {
    background-color: blue;
}

.box2 {
    background-color: RoyalBlue;
}

.box3 {
    background-color: DarkBlue;
}

.box4 {
    background-color: blue;
}

.box5 {
    background-color: RoyalBlue;
}

.box6 {
    background-color: orange;
}

.box7 {
    background-color: mediumvioletred;
}

.box8 {
    background-color: palevioletred;
}
	
.box9 {
    background-color: aqua;
}
	
.box10 {
    background-color: gray;
}
</style>




<div id="container">
    <div class="box1">1</div>
    <div class="box2">2</div>
    <div class="box3">3</div>
    <div class="box4">4</div>
    <div class="box5">5</div>
    <div class="box6">6 (　ﾟーﾟ)触って</div>
	<div class="box7">7</div>
	<div class="box8">8</div>
	<div class="box9">9</div>
	<div class="box10">10</div>


<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<script>
(function(){
'use strict';
console.log('test');

TweenMax.from('.box1', 1 , {
    scale: 0.5,
    delay: 1
});
	
TweenMax.to('.box2', 3, {
    y: 300,
    ease: Power2.easeOut, 
    repeat: 1
});
	
TweenMax.to('.box3', 1, {
    x: 200
});

	
TweenMax.to('.box4', 1, {
    x: -200,
    rotationY: 360
});

	
TweenMax.to('.box5', 2, {
    y: -300,
    ease: Power2.easeOut, 
});

	
TweenMax.to('.box7', 2, {
    y: 500,
	x: 200,
    ease: Power2.easeOut, 
});

	
TweenMax.to('.box8', 2, {
    y: 550,
	x: 250,
    ease: Power2.easeOut, 
});

	
const elm = document.querySelector('.box9');
(new TimelineMax())
  .to(elm, 1, { x:  250, backgroundColor: 'blue', opacity: 0.8 })
  .to(elm, 2, { y: -400, backgroundColor: 'RoyalBlue',  opacity: 1  })
  .to(elm, 1, { x:    0, backgroundColor: 'DarkBlue',   opacity: 0.8 })
  .to(elm, 2, { y:    0, backgroundColor: 'green', opacity: 1  });
	

TweenMax.fromTo('.box10', 2, {
  width: '100%',
  x: 300
}, {
  width: '5%',
  x: 0
});	

	
})();
</script>

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(".box6").hover(function(){
    TweenMax.to('.box6', 1, {
        x: 6000
    });
});
</script>

</body>
</html>

DEMO

@see