【GSAP】Timelineで複雑なオープニングアニメーションを実装

May 9, 2024July 21, 2024

URLをコピーしました！

Timelineとは

今回はGSAPの中でも必須のメソッドである「Timeline」を使用して、オープニングアニメーションを実装します。

Timelineを使用することで、「このアニメーションが終わった後は次にこのアニメーションを動かす」といったような、段階的・連続的なアニメーションの実装が可能になります。

今回はこのような実装をTimelineを使用して作成します。

↓再生ボタンをクリックしてください！

特徴としては、

画像が表示される
背景色が変化＆画像幅が縮小される
メインタイトルが表示
ヘッダー＆サブタイトルが表示

自作で制作すると大変そうですが、GSAPを使用すると少ない記述で実装が可能です。
（というか初学者の方は実装するイメージも湧かないと思います^^;）

この記事の後半にコピペで実装できるようにサンプルコードを用意しておりますので、ぜひ参考にしてください。
（コードだけ見たい方はそちらに飛んでいただくだけでOKです！）

別の記事でご紹介したtoやfromメソッドだけでは段階的な制御が難しいので、段階的なアニメーションを実装したい場合はTimelineメソッドを必ず使います。

また、GSAPの基本的な使い方（読み込み方法やtoメソッド等）はこちらの記事で紹介しております！先に見ていただくと理解がスムーズだと思います！

Timelineの基本的な使い方

基本的なGSAPを動かしたコードを用意しました。

こちらのコードはTimelineを使用していない状態です！

See the Pen GSAP（Timeline前コード） by teppei (@kawatetu) on CodePen.

現状は全てのアニメーションが同時に動いているのが確認できます。

かわてつ

再度アニメーションを確認したい場合は、Resultタブ右下の「Rerun」をクリックしてください！
このコードにTimelineを記述して段階的にしていきます！

上記のコードにTimelineの記述を追加して、段階的に動くようにします！

下記コードが、Timelineの記述を追加したコードです！

See the Pen GSAP（Timeline） by teppei (@kawatetu) on CodePen.

こちらを見ていただくと分かると思いますが、

「box1のアニメーションが終わったらbox2のアニメーションが動いて、、、」のような感じで、段階的に動いていることが確認できます！

JSの記述を参考に、Timelineメソッドの使用方法をざっくり説明すると、

「gsap.timeline()」の後に、動かしたいアニメーションを上から順番に記載していく。

という感じになります！

ただ、順番にするだけではなく、

「この部分は数秒遅らせて実装したい」

「このアニメーションとこのアニメーションは同時に開始するようにしたい」

などの開始の調整も可能です！

それらの使い方は、次のコード解説で詳しく説明しています！

Timelineでオープニングアニメーションを実装する（コピペOK）

それではこちらのオープニングアニメーションのソースコードを共有します！

サンプルコード

コピペで実装できるようにしております。

GSAPの読み込みや、reset.css等はしておいてくださいね！

また、今回はPC版のみを考慮したコーディングです。スマホでも体裁を整えたい場合は、レスポンシブ対応してください！（CSSの調整だけです。）

HTML

<header class="p-header">
  <div class="p-header__items">
    <h1>logo</h1>
    <a>お問い合わせ</a>
  </div>
</header>

<section class="p-fv">
  <div class="p-fv__back p-fv__back-left"></div>
  <div class="p-fv__back p-fv__back-right"></div>
  <div class="p-fv__mainContens">
    <img class="p-fv__img" src="https://dl.dropbox.com/scl/fi/lcd2vw10xj8p6letg64c0/gsap-img-supakyari.jpg?rlkey=bhpsx2ie2xtb4rwq34f3r2wo9&st=d2ukmeic&dl=0">
    <div class="p-fv__text-box">
      <h1 class="p-fv__title">スパキャリ</h1>
      <h2 class="p-fv__subtext">コーディングで「人生の選択肢」を広げる</h2>
    </div>
  </div>
</section>

CSS

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body{
    background-color: #3e3e3e;
    height: 100%;
}


.p-header {
  position: fixed;
  z-index: 1;
  height: 60px;
  width: 100%;
}

.p-header__items {
  display: flex;
  justify-content: space-between;
  line-height: 60px;
  margin: 0 auto;
  max-width: 80%;
}

.p-header h1{
  color: #3e3e3e;
  font-size: 24px;
  font-weight: bold;
}

.p-header a{
  color: #3e3e3e;
}



.p-fv {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.p-fv__mainContens {
    overflow: hidden;
    padding-top: 40%;
    width: 100%;
    position: relative;
}

.p-fv__img {
    display: block;
    object-fit: cover;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.p-fv__text-box {
  position: absolute;
  top: 10%;
}

.p-fv__title{
    font-size: 64px;
    color: #fff;
    text-shadow: 1px 2px 3px #808080;
}

.p-fv__subtext {
  font-size: 24px;
  color: #fff;
  margin-left: 30px;
  text-shadow: 1px 2px 3px #808080;
}


.p-fv__back {
    background-color: #fff;
    width: 50%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.p-fv__back-right {
  top: 0;
  right: 0;
  left: unset;
}

gsap.timeline()
  .fromTo('.p-fv__img', 1, { height: '0%' }, { height: '100%', ease: Power4.easeInOut })
  .fromTo('.p-fv__mainContens', 1.2, { width: '100%' }, { width: '80%', ease: Power4.easeInOut })
  .fromTo('.p-fv__back-left', 1.2, { y: '100%' }, { y: '0%', ease: Power2.easeInOut }, '-=1.2')
  .fromTo('.p-fv__back-right', 1.2, { y: '-100%' }, { y: '0%', ease: Power2.easeInOut }, '-=1.2')
  .fromTo('.p-fv__title', 0.5, { autoAlpha: 0, x: 0 }, { autoAlpha: 1, x: 30 }, '-=0.5')
  .fromTo('.p-fv__subtext', 0.5, { autoAlpha: 0, y: '30'}, { autoAlpha: 1, y: 0})
  .fromTo('.p-header', 0.5, { autoAlpha: 0, y: '-60' }, { autoAlpha: 1, y: 0 } , "<");

コード解説

上記のJSコードの解説のみします。

JSコードに記載しているfromToが理解できていない方は、こちらの記事を先に読まれた方がスムーズに理解できると思います！

あわせて読みたい

それでは、上記JSコードの解説をしていきます！

1行目
timelineメソッド使用しますの宣言

2行目
画像を中央から上下に広がるように表示したいので、「height:0」から「height:100%」に動くようにすることで実装しています。
「ease: Power4.easeInOut」については、「アニメーションの動き方」を指定していて、easeInOutは「はじめはゆっくり加速し、最後は減速する」といった動き方になります。
詳しくは「GSAP イージング」と検索してみてください！

また、クラス名の後の「1」という数字は「何秒かけてアニメーションを動かすか」の指定になります。「3」と書けば3秒かけてアニメーションが動きます。3行目以降も全て同様の意味です！

3行目
メインコンテンツの横幅を100%から80%に縮小するようにアニメーションをかけています。

4,5行目
背景色のアニメーションです。左半分の背景色は下から（y: ‘100%’）、右半分の背景色は上から（y: ‘-100%’）流れるように表示されます。

また、最後の「’-=1.2’」に関しては、直前のTween（それぞれ1行上のfromToですね）のアニメーション終了の1.2秒前にアニメーションを開始するように指定しています。

6,7行目
メインのタイトルは左に30px移動するように表示され、サブタイトルは下から30pxの位置から初期位置まで浮き上がるように表示されます。

8行目
ヘッダーが上から下へアニメーションが動くように指定しています。

また、今回はサブタイトル（7行目）とヘッダーは同時にアニメーションが動いていると思います。
8行目最後の「”<“」がポイントで、「”<“」は「直前のアニメーションと同じタイミングで開始する」という意味になります。
この記述だけで直前のアニメーションと同時に開始することができます。