GreenSockの使い方を学ぶ
概要
本エントリーではgsapの基本的な使い方をデモを交えながら説明します。
GreenSockとは
通称gsap(green sock animation platform)、内包されているライブラリからTweenMaxやTimelineMaxなど呼ばれるアニメーションライブラリです。
煩雑になりやすいアニメーションを簡素に書くことができ、なおかつ軽快な動きでモダンブラウザやie11にも対応しています。
そのほかにもアニメーションの指定をjavascriptで管理する特徴があります。
※後述しますが、Classの付け外しも可能なので、CSSのみのアニメーションと組み合わせることも可能です。
基本となるのは[TweenMax,TimelineMax]の二つのライブラリで、liteと付くのはそれぞれの軽量版になります。
gsap
┣Tweenlite
┣TweenMax
┣TimeliteMax
┣TimelineMax
環境構築
ディレクトリ構成
App/
┣index.html
┣styles.css
┣index.js
┣package.json
手軽に環境構築が出来るparcelを使用します。
parcel-bundlerのインストール
cd App
yarn add -D parcel-bundler
package.jsonにscriptsを追加します。
{
"scripts": {
"dev": "parcel index.html"
},
"devDependencies": {
"parcel-bundler": "^1.12.3"
},
}
index.htmlを追加し、styles.cssとindex.jsを読み込みます。
<!DOCTYPE html>
<html lang='ja'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<meta http-equiv='X-UA-Compatible' content='ie=edge'>
<link rel='stylesheet' href='./styles.css'>
<title>Document</title>
</head>
<body>
<h1>Hi</h1>
<script src='./index.js'></script>
</body>
</html>
npm scriptを実行します。
yarn dev
記載されたURLにアクセスすることで、index.htmlが表示されたら成功です。
gsapのインストール
parcelではimportを解釈して不足しているモジュールをインストールしてくれます。
インストールが確認できたらgaspが正常に動作するか確認しましょう。
import { TweenMax, TimelineMax, Elastic } from 'gsap'
TweenMax.to("h1", 1, {x: 100})
いかがでしょうか。h1の"Hi"テキストがx方向に移動したら成功です。
ここまでのDemoはこちらです。
clickイベントを使って要素を動かす。
このチャプターでは上記のGIFのような、クリックした位置に要素を移動させるアニメーションを作成します。
始めにindex.htmlに#boxを追加します。
<body>
<div id="box"></div>
<script src="src/index.js">
</script>
</body>
デフォルトのCSSをリセットするためbodyにmargin:0；を設定します。
body {
margin: 0;
}
続いてindex.jsにアニメーションを設定していきます。
import { TweenMax, TimelineMax, Elastic } from "gsap";
//TweenMax.set([obj1, obj2, obj3], {x:100, y:50, opacity:0});
TweenMax.set("#box", {
backgroundColor: "green",
width: "50px",
height: "50px",
xPercent: "-50",
yPercent: "-50"
});
document.addEventListener("click", event => {
//TweenMax.to([obj1, obj2, obj3], 1, {x:100});
TweenMax.to("#box", 0.5, { x: event.x, y: event.y });
});
コードの説明です。
TweenMax.set
TweenMax.setは指定した要素の初期値を設定します。
第一引数に対象要素、第二引数にプロパティを渡すことができます。
プロパティ名にハイフンは使えないので、キャメルケースで記述します。
TweenMax.to
clickイベントを取得しTweenMax.toで指定した要素の動きを設定します。
第一引数にObject、第二引数にアニメーション完了までの時間(1/sec),第三引数にプロパティを渡すことができます。
上記の例ではクリックした位置のx,y軸の値を取得しTweenMax.toに設定することで、ポインターを追尾するような処理を実行しています。
ここまでのDemoはこちらです。