ブログ

エンヴィデザインの取り組みやナレッジをお届けします。

GSAPの使い方の基本(入門編)

GSAP

株式会社ENVY DESIGN

フロントエンドエンジニア

WEBサイトで見かけるリッチで素敵なアニメーション。GSAPを使うと複雑なアニメーションも簡単かつ効率的に実装することができます。
GSAPがどういうものか、そしてGSAPはじめの一歩、基本的な使い方についてご紹介します。

GSAPとは?

GSAPとは、アニメーション実装に特化したJavaScriptライブラリです。GreenSock社が開発したこのライブラリは、高機能でありながら使いやすく豊富なプラグインも用意されています。

なぜGSAPがすごいのか?

  • パフォーマンスの良さ:GSAPはとても軽量!サイトに負担をかけずに使えます。大規模なアニメーションもスムーズに実行できるのが特徴です。
  • 使いやすさ:直感的で分かりやすく、数行のコードでも複雑なアニメーションを簡単に作成することができます。ドキュメントやチュートリアルが充実しているので学びやすいのもメリットです。
  • 豊富な機能:単純な移動やフェードイン・フェードアウトだけでなく、幅広いアニメーションを実現できます。

GSAPの導入方法

GSAPを使うための導入方法は5つあります。

  • CDN
  • ダウンロード
  • NPM
  • GitHub
  • CodePen

今回は一番手軽なCDNでの導入方法を使っていきます。
CDNは公式も推奨していて、読み込み速度も速くおすすめです。

CDNでダウンロード

公式のダウンロードページのInstall Helperのところにある「CDN」タブを開きコードをコピーします。
Installation | GSAP | Docs & Learning

※もし追加で使いたいプラグインがあればチェックを入れます。チェックメニュー一覧の下部にチェックを入れたプラグインのコードも追加されるのでそちらを使います。(下部にある1つめのコードは先ほどコピーしたものと同じgsapのCDNです)

コピーしたコードはHTMLのhead内かbody閉じタグの直前に貼り付けます。
body閉じタグ直前の場合は以下のように読み込みます。

  <!-- gsap読み込み -->   
  <script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script>
  <!-- JavaScript読み込み --> 
   <script src="/assets/js/script.js"></script>
 </body>
</html>

読み込む際はまずGSAPを読込んでから、記述していくJavaScriptのファイルを読み込みます。

これで準備はOKです!

GSAPの使い方

GSAPの基本的な書き方のTween構文はこのようになります。

gsap メソッド(‘動かしたい要素’, {アニメーションに関するパラメーター})

gsap.to('.box', {x:100})

例えばこのコードはクラス名boxという要素をtoメソッドで右方向(x)へ100px動かしています。

See the Pen GSAP-0 by tagamiki (@tagamiki) on CodePen.

メソッドの種類

要素をどのように動かすか。基本のメソッドは以下の4つです。

  • gsap.to() 元の状態から指定した状態へアニメーションさせる
  • gsap.from() 指定した状態から元の状態へアニメーションさせる
  • gsap.fromTo() 指定した開始状態から指定した終了状態へアニメーションさせる
  • gsap.set() アニメーションさせずに初期の状態をセットしておく時に使う

動かしたい要素(ターゲット)の指定方法について

クラス名、id名、セレクタ等で指定します。変数を使ったり配列を渡す事もできます。

<!-- クラス名で指定 -->
gsap.to('.box', {x:100})

<!-- id名で指定 -->
gsap.to('#box', {x:100})

<!-- セレクタで指定 -->
gsap.to('section > .box', {x:100})

<!-- 変数を使う -->
let box = document.querySelector(".box");
gsap.to(box, {x:100})

<!-- 配列を使う -->
let square = document.querySelector(".square");
let circle = document.querySelector(".circle");                                      
gsap.to([square, circle], {x:100})

アニメーションに関するパラメーターについて

{ }の中にCSSを変化させるプロパティや、イージングや時間差の指定等アニメーションの動作に関する特別なプロパティをまとめて書きます。

GSAPが用意しているGSAP特有のプロパティ一覧

CSSを変化させるプロパティ

基本的なCSSプロパティはほぼすべて変化させることができますが、以下はGSAPが用意した形式で記述できるプロパティの一覧です。

プロパティ CSSの場合
x: 100 transform: translateX(100px)
y: 100 transform: translateY(100px)
xPercent: 50 transform: translateX(50%)
yPercent: 50 transform: translateY(50%)
scale: 2 transform: scale(2)
scaleX: 2 transform: scaleX(2)
scaleY: 2 transform: scaleY(2)
rotation: 90 transform: rotate(90deg)
rotation: “1.25rad” Using Radians – no CSS alternative
skew: 30 transform: skew(30deg)
skewX: 30 transform: skewX(30deg)
skewY: “1.23rad” Using Radians – no CSS alternative
transformOrigin: “center 40%” transform-origin: center 40%
opacity: 0 adjust the elements opacity
autoAlpha: 0 shorthand for opacity & visibility

アニメーションの動作に関する特別なプロパティ

イージングや時間差等の指定ができます。

プロパティ 説明
delay アニメーションを開始するまでの遅延時間(秒)
duration アニメーションの継続時間(秒)デフォルト: 0.5
repeat アニメーションを何回繰り返すか
yoyo true の場合、繰り返しごとにトゥイーンは反対方向に実行されます。(ヨーヨーのように) デフォルト: false
stagger 複数のターゲットが指定されている場合の各ターゲットのアニメーションの開始間の時間(秒単位)
ease アニメーション中の変化率。デフォルト: 「power1.out」
onComplete アニメーションが完了したときに実行される関数
delayとduration
  • delayは動きが始まるまでにかかる時間。delay:1なら1秒後にスタート
  • durationは動きにかかる時間。duration:1なら1秒かけて動く

1つめdelay無し。2つめdelay:1指定

See the Pen GSAP-1 by tagamiki (@tagamiki) on CodePen.

1つめduration無し。2つめduration:1指定

See the Pen GSAP-1 by tagamiki (@tagamiki) on CodePen.

autoAlpha

autoAlphaはCSSのopacityとvisiblity: hidden;を組み合わせた感じのプロパティです。
CSSでopacity:0;にすると見た目は消えていますが、要素は残っているのでvisiblity: hidden;も一緒に指定したりすると思うのですが、autoAlphaを0にすると透明度も0になり要素も消えます。

stgger

複数のターゲット(同じクラス名や同じセレクタ)を順番にずらしてアニメーションを適用する事ができます。
例えばクラス名boxという要素が複数ある場合、以下の例のようにstggerがなければ同時に動きだし、stggerがあると指定した秒数ごとにずらして動き出します。

stgger無し

See the Pen GSAP-5 by tagamiki (@tagamiki) on CodePen.

stgger:0.5の場合

See the Pen GSAP-5 by tagamiki (@tagamiki) on CodePen.

数値に単位を付ける場合

数値に単位を付けたい時は’’で囲みます

//単位無し
gsap.to('.box', {x:100})

//単位有り
gsap.to('.box', {x:'100px'})
gsap.to('.box', {x:'100%'})
gsap.to('.box', {x:'100vw'})
動く数値をランダムに
gsap.to('.box', {x:'random(0,300,100)',delay:0.5})
GSAP特有のプロパティ以外のCSSについて

表一覧にあるプロパティ以外にも基本的にほぼ全てのcssのプロパティを指定して変化させることができます。
その場合は例えばbackground-colorを指定したい時はハイフンを取って次の文字を大文字にするキャメルケースで「backgroundColor」と指定します。
値の部分は”で囲みます。

gsap.to('.box', 
  {backgroundColor:'#DDCA60',delay:0.5,duration:2}
 )

See the Pen GSAP-3 by tagamiki (@tagamiki) on CodePen.

メモ

ほとんどのcssプロパティはGSAPでも使えますが、transforms と opacityはパフォーマンスが良くブラウザの負荷が少ないので、transforms と opacityで対応できるものはそちらを選びましょう。
例えばfilter や boxShadowとかは負荷が高くリフローを起こしやすいのであまり使わない方が良さそうです。

イージングについて

イージングは、アニメーションの動き方を制御するための機能です。簡単に言えば、イージングはアニメーションの速さや動きの変化をコントロールします。

例えばボールを投げる時、ボールは最初は速く動き始め、途中で少しずつ減速し、最後にゆっくり止まります。これは自然な動きですが、イージングを使うことでアニメーションでも同じような効果を簡単に作り出すことができます。

GSAPには多くのイージングタイプがあり、それぞれ異なる動き方を提供します。
以下はいくつかの例です。

  • ease-in 最初が遅い。終わりにかけて速度が増していく
  • ease-out 最後が遅い。終わりにかけて減速していく
  • ease-inOut 最初も最後も遅く、真ん中が速くなっている動き

GSAPの公式サイトでデモを確認する事ができるので、色々試してみてください。

https://gsap.com/docs/v3/Eases

よく使われるイージングタイプの「power1」から「power4」のイージングは、数字が大きくなるにつれて、アニメーションの加速と減速の変化が大きくなります。

右側をクリックすると「in」「inOut」「out」も選択できます。
右下にコードが出るのでコピーして使えます。

ちなみにeaseの値をカスタムする事もでき、CustomEase.jsというプラグインを使ってカスタム可能になります。

メモ

easeはデフォルトで値(power1.out)が入っているのでscrollTriggerというプラグインを使う時にはease:’none’の指定をしないと挙動がおかしくなるので注意ポイントです

入門編まとめ

今回の記事では、入門編としてGSAPの基本的な導入方法と使い方について解説しました。GSAPを使うことで、ウェブサイトやアプリケーションに動きのあるインタラクティブな要素を簡単に追加できます。

今回触れていないTimelineを使ったアニメーションの連携や、ScrollTriggerrを使ったスクロール連動アニメーションについても別記事で詳しく説明していきます。

GSAPぜひ使ってみてくださいね。

株式会社ENVY DESIGN

フロントエンドエンジニア

株式会社ENVY DESIGNフロントエンドエンジニア。コーディングとCMS構築を主に担当。フリーランス出身、色々なサイト制作に携わった経験を元に、実装中の気付きや技術的な情報を発信してきます。

よくある質問

オンラインでの集客を強化し、
ビジネスを成長へと導きます。

資料ダウンロード

Web制作に関する資料と会社紹介をダウンロードできます。

お問い合わせ・ご相談

Webサイト制作後や制作後の運用などでお悩みの方はお気軽にご相談ください。

お電話でのお問い合わせ

お電話でのお問い合わせをご希望の方は、こちらからお気軽にご連絡ください。

平日9:30-18:30

03-6883-8292