ホームページ制作 | 立川八王子多摩 89Design Works

GSAPで簡単アニメーション！

GSAP（ジーサップ）はGreenSock社が開発をしている、JavaScriptのアニメーションライブラリです。
軽量・高機能な上に、あまりJavaScriptの知識がなくてもアニメーションを作成できてしまう優れもの。
今回はこのサイトでも使用している、GSAPを使ったオーソドックスなアニメーションを解説します。

１．導入

公式
https://greensock.com/

導入はCDNで読み込ませる方法とnpm / yarnでインストールする方法がありますが、手っ取り早いのはCDNで読み込ませる方法です。

CDN（headタグ内にペースト）

<script src = "https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js" ></script>

npm または yarn（コマンドラインでインストール）

> npm install gsap

> yarn add gsap

// JavaScript記述の前にモジュールをimport
import { gsap } from "gsap";

２．アニメーション作成

GSAPの準備ができたので、簡単なアニメーションを作ってみます。

html

<div class="wrapper">
  <div class="square"></div>
  <div class="circle"></div>
</div>

css

.wrapper{
  width: 100%;
  position: relative;
}

.square{
  width: 50px;
  height: 50px;
  background: #ff0000;
  position: absolute;
  top:50px;
  left: 50px;
}

.circle{
  width: 50px;
  height: 50px;
  background: #0022ff;
  position: absolute;
  top: 150px;
  left: 50px;
  border-radius: 50%;
}

JavaScript

// 要素を取得して変数に格納
const square = document.querySelector(".square");
const circle = document.querySelector(".circle");

// 四角のアニメーション
gsap.to(square, {
    x:300,
    duration:2,
    repeat:-1
});

// 円のアニメーション
gsap.from(circle, {
    x:300,
    y:100,
    width:100,
    height:100,
    duration:3,
    repeat:-1,
    borderRadius:0
})

JavaScript解説

const square = document.querySelector(".square");
const circle = document.querySelector(".circle");

document.querySelectorはドキュメントからその要素を取得するメソッドです。
(“.square”)で指定したクラスのついた要素を取得し、それを変数squareに格納しています。

gsap.to(square, {
    x:300,
    duration:2,
    repeat:-1
});

GSAPの基本構文は gsap.to(“動かす要素”, { プロパティ：設定値}); です。
上記はsquare（squareクラスの付いた要素）をX軸（横方向）300pxの位置に2秒かけて移動する指定です。repeat:-1は無限ループを意味します。

gsap.from(circle, {
    x:300,
    y:100,
    width:100,
    height:100,
    duration:3,
    repeat:-1,
    borderRadius:0
})

こちらは、gsap.from() メソッドになっていて、toは設定した値に向かってアニメーションするのに対し、fromは設定した値から戻るアニメーションになります。上記は幅100px高さ100pxの正方形がX軸（横方向）300pxの位置、Y軸（縦方向）100pxの位置から3秒かけて、CSSで設定した値の円の形と位置に戻っていくアニメーションです。