5年振りくらいにコーディングを再開したら、意外と楽しくなってきているきょうPです。
今回はWEBサイト上で簡単にアニメーションを実装できるJSライブラリ「GSAP」について紹介したいと思います。
Javascriptという単語を聞くだけ拒絶反応を出してしまう人も多いかと思います。（同じく自分もそのうちの一人ですｗ）
JSを触れない、知識がほとんどない、今までチャレンジしようと思ったけどついつい後回しにしちゃっていた😥
という人にGSAPの魅力と、意外と直感的にコーディングできるんだ！とこの記事を読んで感じてもらえると嬉しいです！
特に、デザイナーでWEBサイトのデザインに動きを追加してかっこいい海外みたいなサイトに憧れがある人は、是非この機会にGSAPを勉強して、技術的な理解を深めた上で、デザインの表現の幅を広げるチャンスにしてもらえればと思います😉
GSAPとは
GSAP（GreenSock Animation Platform）とは、GreenSockというアメリカの会社が提供しているサービスの名称になります。
WEBサイトやアプリにリッチで滑らかなアニメーションを実装することが可能で、 世界中のWEB開発者に愛用されている有名なJSライブラリになります。
GSAPを使って作成されたWEBサイト事例
メリット・デメリット
メリット
- パフォーマンス：非常に高速で、複雑なアニメーションもスムーズに動作。
- 柔軟性：さまざまなアニメーション効果を簡単に実装可能。
- 互換性：ほとんどのブラウザで一貫して動作。
- 基本無料：エンドユーザーへの課金が伴わない、一部機能を除き無料で利用可能。
デメリット
- 商用ライセンスの費用：エンドユーザーに料金を課す場合は有料。
- 追加機能のための料金 ：一部機能のアニメーションは有料。
- 学習コスト：複雑なアニメーションを伴う場合はJSの知識は必須。（※自分は困った時、GhatGPTに質問しまくってますｗ）
- 依存性： ライブラリのアップデートや互換性の問題に対処する必要がある。
※無料、有料プランに関する利用規約については、Pricing | GSAPを参照。
GSAPを利用する際の導入の流れ
1. GSAPのライブラリを取得
CDNから読み込む
CDNを使用して簡単にGSAPをプロジェクトに追加できます。
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.2/gsap.min.js"></script>
これをHTMLファイルの<head>タグまたは<body>タグ内に追加します。
2. HTML、CSSファイルの設定
HTMLファイルの準備
まず、アニメーションさせたい要素をHTMLファイルに追加します。
<!DOCTYPE html>
<html lang="jp">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GSAP Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="box"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.2/gsap.min.js"></script>
<script src="main.js"></script>
</body>
</html>
CSSファイルの準備
id=”box”に対してのCSSを記述。
/* styles.css */
#box {
width: 100px;
height: 100px;
background-color: red;
}
3. JavaScriptファイルの設定
トゥイーン（Tween）の使用
GSAPのtoメソッドを使って、アニメーションのプロパティを設定します。
// main.js
gsap.to("#box", {
duration: 2, //アニメーション時間(2秒)
x: 300, //X軸に対して300px移動
y: 200, //Y軸に対して200px移動
rotation: 360, //360度回転
backgroundColor: "blue" //青色に変化
});
4. 動作のチェック
htmlが読み込まれるとアニメーションが発生する。
オープニングアニメーションを作ってみよう！
では、応用編として、WEBサイトに訪れた際によく見かけるオープニングアニメーションを試しに作成してみましょう💡
先に完成した動きを見た方がイメージが湧きやすいと思うので共有しておきます▼
CodePenの方でも確認できます▼
https://codepen.io/icyvzaxt-the-builder/pen/eYayQNb
HTMLの設定
まず、ベースとなるHTMLは以下の通り▼
Headerと中央に「Opening」のテキストを含むシンプルなレイアウトになります。
<!DOCTYPE html>
<html lang="jp">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GSAP Example</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/destyle.css@1.0.15/destyle.css" />
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header class="header">
<nav class="nav">
<h1 class="h1">LOGO/h1>
<ul class="nav__list">
<li class="nav__list-item">MENU1/li>
<li class="nav__list-item">MENU2/li>
<li class="nav__list-item">MENU3/li>
<li class="nav__list-item">MENU4/li>
<li class="nav__list-item">MENU5/li>
<li class="nav__list-item">MENU6/li>
</nav>
</header>
<main class="main">
<div class="main_bg1">/div>
<div class="main_bg2">/div>
<div class="main_bg3">/div>
<div class="main__wrap">
<h2 class="h2">Opening/h2>
<p class="txt">This is a demo animation created using GSAP./p>
</div>
</main>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.2/gsap.min.js">/script>
<script src="main.js">/script>
</body>
</html>
CSSの設定
次に、アニメーション対象となる要素のスタイルを定義します。
body {
background-color: #fff;
overflow: hidden;
}
.header {
position: absolute;
width: 100%;
margin: auto;
padding: 20px;
z-index: 1;
}
.nav {
display: flex;
align-items: center;
justify-content: space-between;
padding-bottom: 20px;
border-bottom: 1px solid #000;
}
.h1 {
font-size: 32px;
font-weight: bold;
}
.nav__list {
display: flex;
}
.nav__list-item {
margin-left: 32px;
}
.main {
position: relative;
width: 100%;
height: 100vh;
display: flex;
flex-wrap: wrap;
}
.main_bg1 {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
height: auto;
width: 0px;
background: blue;
}
.main_bg2 {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
height: auto;
width: 0px;
background: white;
}
.main__wrap {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
height: 180px;
}
.h2 {
text-align: center;
width: 100%;
font-size: 100px;
}
.txt {
text-align: center;
width: 100%;
font-size: 20px;
margin-top: 40px;
}
JavaScriptでGSAPアニメーションを設定
最後に、GSAPを使ってアニメーションを設定します。以下のmain.jsファイルを作成し、各アニメーションを定義します。
//アニメーションさせたい要素のclassを取得
const jsBody = "body";
const jsBg1 = ".main_bg1";
const jsBg2 = ".main_bg2";
const jsHeader = ".header";
const jsH2 = ".h2";
const jsTxt = ".txt";
//事前にアニメーション発火前の状態をセットする
gsap.set([jsBody], { backgroundColor: "black" });
gsap.set([jsBg1], { width: 0, });
gsap.set([jsBg2], { width: 0, });
gsap.set([jsHeader], { opacity: 0, y: -30, });
gsap.set([jsH2], { opacity: 0, scale: 1.2, filter: 'blur(10px)', });
gsap.set([jsTxt], { opacity: 0, y: 30, });
//gsap.timeline();を使用して、順にアニメーションを発火
const tl = gsap.timeline();
//1.中央から左右へ白と青の背景が伸びていく
tl.to( jsBg1, { width: "100%", duration: 1, delay: 1, } )
tl.to( jsBg2, { width: "100%", duration: 1, delay: 0.2, }, "-=1" //手前のtl.toの1秒前に実行する )
//2.Openingのテキストがフワッと現れる
tl.to( jsH2, { opacity: 1, scale: 1, filter: 'blur(0px)', duration: 1, delay: 0.8, }, "-=1" //手前のtl.toの1秒前に実行する )
//3.テキストが下から現れる
tl.to( jsTxt, { opacity: 1, y: 0, duration: .8, ease: "power4.inOut", } )
//4.headerが画面上部から現れる
tl.to( jsHeader, { opacity: 1, y: 0, } )
アニメーションの流れ
1.背景アニメーション：
青と白の背景が中央から左右に広がるアニメーションを設定します。
2.テキストアニメーション：h2要素（”Opening”のテキスト）がスケールとぼかしエフェクトでフェードインします。
3.サブテキストアニメーション：p要素（説明文）が下からスムーズにフェードインします。
4.ヘッダーアニメーション：
ヘッダーが画面上部から現れます。
まとめ
昔から海外見たいなかっこいいアニメーションを使ったWEBサイトを見かけては、どうやって実装してるんだろう…と呆然としていましたが、意外と身近に便利なライブラリーが転がっていて、使ってみると意外と直感的にコードを書いたり、勉強も苦にならずにGSAPを利用できているので、Javascriptが苦手な人も気軽るに始められるのかなと思います！
しかも、今の時代GhatGPTなどのAIを上手く活用しながら、困ったときはアドバイスをもらえたり、改善点をすぐに見つけてくれたり、便利な世の中になったことで敷居はかなり低いのかなと思います。
今回GSAPを学んで、コーディングに目覚めそうになっているので、次回も、もしかするとコーディング関連の記事を作成するかもしれませんｗ（デザイン関連の記事もちゃんと書きます😅）
では、またの機会に～😎
