ISSEN 
はじめに
この記事の概要
こんにちは、株式会社TOKOSのスギタです！
今回はGreenSock社のGreenSock Animation Platform(GSAP)を使い、Timelineを使い今風なオープニングアニメーションを作成しようと思います。GSAPに基本的な使い方は下記の記事を参考にしてください!!!
対象読者
- web制作でアニメーションの実装をしたい方
今回の完成予定
今回はファーストビューで行うオープニングアニメーションを意識して作りました。
一つずつのアニメーションがつながって、一つのアニメーションになります。
実装自体もかなり簡単になるので是非参考にしてみてください。
GSAPの導入
GSAPを利用するには、オフィシャルサイトからダウンロードするか、CDNサイトでも提供されているので、そのURLを読み込みます。
今回はCDNを利用していきたいと思います。CDNは公式を参照してください。
コードの紹介
コードの紹介になります。
HTML
<body>
<header>
<nav>
<h3 id="logo"> TOKOS</h3>
</nav>
</header>
<section>
<div class="fv">
<img src="./image/mountain.jpg" class="menu" alt="山">
<h1 class="title">CREATE PLAY ENJOY</h1>
</div>
</section>
<div class="bg--left"></div>
<div class="bg--right"></div>
</body>CSS
/* reset.cssは省略 */
header nav {
height: 100px;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
}
#logo {
font-size: 32px;
font-weight: 800;
}
section {
width: 100%;
height: 80vh;
display: flex;
justify-content: center;
align-items: center;
}
.fv {
height: 60%;
width: 100%;
position: relative;
}
.fv img {
width: 100%;
height: 100%;
object-fit: cover;
}
.fv h1 {
position: absolute;
left: 10%;
top: 60%;
font-size: 32px;
color: #fff;
font-weight: 700;
}
.bg--left {
position: absolute;
top: 0;
left: 0;
background-color: #333;
z-index: -1;
width: 50%;
height: 100%;
}
.bg--right {
position: absolute;
top: 0;
right: 0;
background-color: #333;
z-index: -1;
width: 50%;
height: 100%;
}HTML&CSSは特に言うことは有りません。強いて言うなら、行いたいアニメーションを意識しながら書いていくことです。
アニメーションの中で背景を画面外から画面内に動いてくるアニメーションがあるので、class名bg–leftと–rightという要素を作成しております。
JavaScript
const fv = document.querySelector(".fv"); //.fvの取得
const bgLeft = document.querySelector(".bg--left"); //.bgの取得
const bgRight = document.querySelector(".bg--right"); //.bgの取得
const logo = document.querySelector("#logo"); //#logoの取得
const menu = document.querySelector(".menu"); //.menuの取得
const title = document.querySelector(".title"); //.titleの取得JavaScriptですが、querySelectorで予め要素の取得しておきます。
const tl = gsap.timeline();またgsap.timeline();を変数tlに格納して使用しています。
//ここからtimelineの記述
tl.fromTo(
//画像の高さ0%から80%に変える
fv, //変数fvに対して
{
height: "0%",
},
{
height: "80%",
duration: 1, //アニメーション時間
ease: "power3.inOut", //イージングの指定
}
)
.fromTo(
//画像の横幅を100%から80%に変える
fv,
{
width: "100%",
},
{
width: "80%",
duration: 1, //アニメーション時間
ease: "power3.in", //イージングの指定
}
)
.fromTo(
//左半分の背景を上から下へスライド
bgLeft,
{
y: "-100%",
},
{
y: "0%",
duration: 1.5, //アニメーション時間
ease: "power2.inOut", //イージングの指定
},
"-=1" //前のアニメーションが終わる時に対して1s早く始める
)
.fromTo(
//右半分の背景を下から上へスライド
bgRight,
{
y: "100%",
},
{
y: "0%",
duration: 1.5, //アニメーション時間
ease: "power2.inOut", //イージングの指定
},
"-=1.5" //前のアニメーションが終わる時に対して1.5s早く始める
)
.fromTo(
//ロゴを右から左へ出現
logo,
{
opacity: 0,
x: 30,
},
{
opacity: 1,
x: 0,
duration: 0.5, //アニメーション時間
},
"-=0.5" //前のアニメーションが終わる時に対して0.5s早く始める
)
.fromTo(
//テクストを左から右へ出現
title,
{
opacity: 0,
x: -30,
},
{
opacity: 1,
x: 0,
duration: 0.5, //アニメーション時間
},
"-=0.5" //前のアニメーションが終わる時に対して0.5s早く始める
);ここからtimelineの記述に入ります。
timelineでの記述は上から処理されていきますので、上から、画像の縦幅を大きくする=>画像の幅を小さくする=>背景を上から下に動かすのと背景を下から上に動かす=>ロゴとテキストの出現のような順番になります。
またfromToメソッドを使用しているためfromTo(対象とするclass等,{初期状態の指定},{アニメーションの完了状態});となるように指定していきます。{アニメーションの完了状態}に対し、アニメーションの時間やイージングを当てる記述をしていく記述になります。イージングに関しては下記参照してください。
また、流れるようの連続するアニメーションを行う際は、イージングを変えるだけで印象もかなり変わってきます。
公式ドキュメントより直感的にイージングを選択できることもGSAPの良いところだと思います。
Easesの中から好きに選びコピーするだけで変えることが出来ます。(下記画像参照)
またcustomで自分で作成することも可能です。
イージングの種類によっては、CustomEaseというプラグインが無いと動作しないので注意して下さい。
また前のアニメーションが終わる前にアニメーションを開始したい場合はfromTo(対象とするclass等,{初期状態の指定},{アニメーションの完了状態},”時間の指定”);のようにすると指定した時間分前のアニメーションが終わる前にアニメーションをスタートすることが可能になります。
最後に
やはりgsapのtimelineを使えるようにアニメーションの幅が広がるなと感じました。連続するアニメーションの中に時間の指定をするだけでアニメーションが複雑に交差していくのでインパクトを与えられるような気がします。
かなり簡単に複雑なアニメーションが実装可能になるのでgsapはかなり重宝しています。
