フロントの技術強化のためのGSAPアニメーションを基礎から紹介します。
GSAPとは
GSAP（GreenSock Animation Platform）
GSAP（GreenSock Animation Platform）は、高速・軽量のHTML5アニメーションライブラリで、アニメーションライブラリのデファクトスタンダードといえる程多くのサイトで利用されています。
主なモジュールとして、トゥイーンを実現するTweenMaxと、タイムラインを制御すTimelineMaxの2種があります。また、TweenMaxと、TimelineMaxのそれぞれの簡易版の2種があります。
準備
今回は以下のディレクトリ構成で進めます。
GSAPの読み込みはCDNを使用します。
記事作成時点のバージョンは3.2.6です。
・index.html
・/styles/style.css
・/scripts/main.js
各シートを読み込んで準備しましょう。
今回の制作物
まずは基本的なアニメーションを作成します。
Tweenmax.to
Tweenmax.toは指定したプロパティーに向かって要素がアニメーションします。
赤い丸→青に変わりながら１秒かけて右と下に150px移動
緑の四角→丸のアニメーション終了後（１秒後）左と上に150px移動しながら２倍のサイズになりバウンスする
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="styles/style.css" />
<title>Document</title>
</head>
<body>
<div class="circle"></div>
<div class="square"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/gsap.min.js"></script>//GSAPの読み込み
<script src="scripts/main.js"></script> //JSシートの読み込み
</body>
</html>
body{ //要素を画面中心に配置
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.circle{ //赤い丸
background-color: orangered;
height: 150px;
width: 150px;
border-radius: 50%;
}
.square{ //緑の四角
width: 150px;
height: 150px;
background-color: green;
}
実行結果
ここからjsを記述します。
TweenMax.to('.circle', 1, { x:150, y:150, backgroundColor: 'blue' });
//赤丸（class=".circle"）をx軸,y軸へ150px移動と色を青に指定
TweenMax.to('.square', 3, { x: -150, y:-150, scale: 2, delay: 1, ease:
Back.easeOut });
//四角（class=".square"）をx軸y軸へ150px移動と1秒後に２倍に拡大してeaseOutでバウンスする
基本の記述は
tweenmax.to( '取得したい要素' , { アニメーションのプロパティ });
です。プロパティは改行しても動きますのでお好みで選んでください。
個人的には１ライナーで書いたほうが見やすいかなと思います。
次回はTween.fromとJqueryとの連携です。