【Javascript】GSAPを使ってアニメーション実装をもっと自由に！
GSAPとはアニメーション実装に特化したJavascriptライブラリです。GreenSock社が開発したライブラリで、高機能かつプラグインも豊富に用意されている優れものです。
もちろん、ちょっとしたアニメーションであればCSSやjQueryでも実装は可能です。しかし、スクロールと連動したインタラクティブなものであったり、時間差や連続性のあるアニメーションを作ろうとすると、この2つでは難しい・あるいは不可能な場合が出てきます。
そういった複雑なアニメーションの実装を容易にしてくれるのが、GSAPの魅力です。今回は、導入からごくシンプルなアニメーションの実装までやってみたいと思います。下の動画が完成イメージの動きになります。
基本文法などはこちらの記事からも詳しくご覧いただけます！（別ページへ移動します）
導入準備
何はともあれ、まずはライブラリを読み込みましょう。ここでは、ライブラリ本体のデータと、スクロールイベントを検知してくれるプラグイン「ScrollTrigger」のデータを読み込みます。
公式サイトからデータをダウンロードして、以下のように記述してください（パスは各々の環境で書き換えてください。）
<!-- gsap：ライブラリ本体とプラグイン -->
<script src="assets/js/libs/gsap.min.js"></script>
<script src="assets/js/libs/ScrollTrigger.min.js"></script>サンプルコード
以下のコードをコピペすれば、すぐにアニメーションを確認できる筈です。HTMLとCSSの説明はここでは割愛し、GSAPの記述について詳しく見ていきます。
<header class="l-header">
<h1 class="l-header__title">GSAP Animation</h1>
</header>
<main class="l-main">
<section class="l-section p-circle">
<div class="p-circle__main"></div>
</section>
<section class="l-section p-text">
<div class="p-text__content">
<div class="p-text__para">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores minima, deleniti reprehenderit, aliquid necessitatibus delectus accusantium numquam ea dicta sint, unde pariatur! Totam reiciendis maxime harum officiis laudantium veritatis vel?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores minima, deleniti reprehenderit, aliquid necessitatibus delectus accusantium numquam ea dicta sint, unde pariatur! Totam reiciendis maxime harum officiis laudantium veritatis vel?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores minima, deleniti reprehenderit, aliquid necessitatibus delectus accusantium numquam ea dicta sint, unde pariatur! Totam reiciendis maxime harum officiis laudantium veritatis vel?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores minima, deleniti reprehenderit, aliquid necessitatibus delectus accusantium numquam ea dicta sint, unde pariatur! Totam reiciendis maxime harum officiis laudantium veritatis vel?</p>
</div>
</div>
</section>
</main>.l-main {
width: 900px;
margin-left: auto;
margin-right: auto;
padding: 200px 0;
}
.l-section {
margin-top: 200px;
}
.l-header {
display: -ms-grid;
display: grid;
place-items: center;
width: 100vw;
height: 100vh;
color: #fff;
background-color: #222;
font-size: 2rem;
text-align: center;
}
.p-circle__main {
width: 200px;
height: 200px;
margin: 0 auto;
background-color: #222;
border-radius: 50%;
}
.p-text__para p {
margin-top: 32px;
}// スクロールトリガーの導入
gsap.registerPlugin(ScrollTrigger);
// Circle
circle = ".p-circle__main";
gsap.set(circle, {
scale: 0,
y: 20
});
gsap.to(circle, {
scale: 1,
y: 0,
duration: 0.32,
// スクロール
scrollTrigger: {
trigger: '.p-circle',
start: 'top center',
}
});
// Text
text = ".p-text__para p"
gsap.set(text, {
autoAlpha: 0,
x: -20,
rotate: 4
})
gsap.to(text, {
autoAlpha: 1,
x: 0,
rotate: 0,
duration: 0.8,
scrollTrigger: {
trigger: '.p-text', //アニメーションが始まる目印の要素
start: 'top center', //アニメーションが始まる位置
},
stagger: {
from: "start",//アニメーションの順番
amount: 0.24 //0.24秒ズラしてアニメーション
}
})Javascriptの解説
上から順番に見ていきましょう。まずは冒頭の行についてです。
// スクロールトリガーの導入
gsap.registerPlugin(ScrollTrigger);この宣言によって、先に言及したプラグイン「ScrollTrigger」が利用できるようになります。HTML側でファイルを読み込んでいるだけでは不充分ですので、注意しましょう。
プラグインの利用宣言ができたら、いよいよアニメーションに関する記述を書いていきます。GSAPにおいては、「アニメーション始動前の要素がどんな状態か設定」→「具体的なアニメーションの内容を記述」という順番で記述を進めます。というわけで、まずは要素の初期状態を設定しましょう。
// アニメーションの対象
circle = ".p-circle__main";
// アニメーション前の状態をセッティング
gsap.set(circle, {
scale: 0,
y: 20
});「gsap.set(要素, {…})」という形式で書きます。ここでは「scaleが0、yに20px動いている状態」という意味になります。続けて、ここからどうアニメーションさせるか書きましょう。
// 具体的なアニメーションの内容
gsap.to(circle, {
scale: 1,
y: 0,
duration: 0.32,
});「gsap.to(要素, {…})」という形式で書きます。「scale」「y」に加え、「duration」でアニメーション完了までの秒数も設定できます。イメージとしては、「scaleが0から1の状態へ、yが20pxから0pxの位置へ、0.32秒かけてアニメーションする」という感じです。
これでアニメーション自体は設定できましたが、以下のように「ScrollTrigger」を加えてアニメーションの始動タイミングも決められます。「トリガーとなる要素（.p-circle）」と「開始位置（top center）」を書きます。
scrollTrigger: {
trigger: '.p-circle', //アニメーションが始まる目印の要素
start: 'top center', //アニメーションが始まる位置
}ここまでの記述で、トリガーとなる要素が画面内の所定位置に来たタイミングで、自分が定義したアニメーションを始動させることができるようになりました。
同じ要領で他の要素のアニメーションも設定します。
// Text
// アニメーションの対象
text = ".p-text__para p"
// アニメーション前の状態をセッティング
gsap.set(text, {
autoAlpha: 0,
x: -20,
rotate: 4
})
gsap.to(text, {
autoAlpha: 1,
x: 0,
rotate: 0,
duration: 0.8,
// スクロールトリガー
scrollTrigger: {
trigger: '.p-text', //アニメーションが始まる目印の要素
start: 'top center', //アニメーションが始まる位置
}
})大まかな流れは最初のものと同じですが、少し違うのが「同じセレクタの要素を時間差でアニメーションさせる」という点です。その際には「stagger」を追記して順番と秒差を設定してあげましょう。
stagger: {
from: "start",//アニメーションの順番。
amount: 0.24 //0.24秒ズラしてアニメーション
}これにより、「HTMLの記述順に則って、0.24秒ズレてアニメーションが始動する」ようになりました。「from」の値次第で面白い演出が実装できるので、色々試してみると良いでしょう。公式にサンプルがありますので、確認してみてください。
終わりに
GSAPを利用してシンプルなアニメーションを実装してみました。ここで利用した以外にも、「背景色」「傾斜」など、指定できるアニメーションのプロパティは数多くあります。詳しくは公式のドキュメントを参照してください。
今回の内容で、ごくごく基本的な機能は使えるようになりました。次回は、GSAPの最大の特徴でもある「timeline」機能を利用し、より複雑なアニメーションの実装に挑戦してみたいと思います。
