【GSAP】Timelineを使ったオープニングアニメーション
はじめに
この記事の概要
こんにちは、株式会社TOKOSのスギタです！
今回はGreenSock社のGreenSock Animation Platform(GSAP)のTimelineを使って今風なオープニングアニメーションを作成しようと思います。
GSAPの基本的な使い方は下記の記事を参考にしてください。
【初学者向け】GSAP Timelineを使ってみた!!!
GSAPのTimelineを使用して、複数のアニメーションを連続実行する方法を解説します。delayを使わずにアニメーションを連結できる便利な機能です。
対象読者
- Web制作でアニメーションの実装をしたい方
今回の完成予定
今回はファーストビューで行うオープニングアニメーションを意識して作りました。
1つずつのアニメーションがつながって、一つのアニメーションになります。
実装自体もかなり簡単になるので是非参考にしてみてください。
GSAPの導入
GSAPを利用するには、オフィシャルサイトからダウンロードするか、CDNサイトでも提供されているので、そのURLを読み込みます。
今回はCDNを利用していきたいと思います。
CDNは公式を参照してください。
Homepage
Supported by Webflow. Animate Anything - A wildly robust JavaScript animation library built for professionals.
greensock.comコードの紹介
コードの紹介になります。
<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>/* 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とbg--rightという要素を作成しております。
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等, {初期状態の指定}, {アニメーションの完了状態})となるように指定していきます。
{アニメーションの完了状態}に対し、アニメーションの時間やイージングを指定していく形になります。
イージングに関しては下記参照してください。
Easing | GSAP | Docs & Learning
"slow", "rough", and "expoScale" eases are not in the core - they are packaged together in an EasePack file in order to minimize file size. "CustomEase", "CustomBounce", and "CustomWiggle" are packaged independently as well (not in the core).
greensock.comまた、流れるような連続するアニメーションを行う際は、イージングを変えるだけで印象もかなり変わってきます。
公式ドキュメントより直感的にイージングを選択できることもGSAPの良いところだと思います。
「Eases」の中から好きに選びコピーするだけで変えることが出来ます。
（下記画像参照）
また「custom」で自分で作成することも可能です。
また前のアニメーションが終わる前にアニメーションを開始したい場合はfromTo(対象とするclass等, {初期状態の指定}, {アニメーションの完了状態}, "時間の指定")のようにすると指定した時間分前のアニメーションが終わる前にアニメーションをスタートすることが可能になります。
最後に
やはりGSAPのtimelineを使えるようになるとアニメーションの幅が広がるなと感じました。
連続するアニメーションの中に時間の指定をするだけでアニメーションが複雑に交差していくのでインパクトを与えられるような気がします。
かなり簡単に複雑なアニメーションが実装可能になるのでGSAPはかなり重宝しています。
この記事を書いた人
