LAB 2021.12.20

スクラブアニメーション(GSAP)

Written by takemoto

INDEX

説明

スクラブアニメーションは、スクロール量 / 位置に応じてアニメーションを変化させる動きのことです。

今回はGSAP（GreenSock Animation Platform）というJavaScriptのアニメーション実装のライブラリと、

スクロール連動のアニメーションを作成できるGSAPのプラグインのScrollTriggerを使用して実装します。

使用するライブラリ

■ GSAP

GitHub : https://github.com/greensock/GSAP

公式サイト : https://greensock.com/gsap/

■ GSAP ScrollTrigger Plugin

使用方法 : https://greensock.com/docs/v3/Installation?checked=core,scrollTrigger

公式サイト : https://greensock.com/scrolltrigger

手順

手順1

HTMLを作成します。

<div class="scroll-line">
  <div class="inner"></div>
</div>

<div class="top-mv">
  <p class="text">Scrub Animation</p>
</div>

<section class="top-end">
  <p class="text -left">HELLO</p>
  <p class="text -right">EVO Lab</p>
</section>

手順2

CSSを設定します。

ScrollTriggerを使用してスクロールと同時にis-activeを追加する要素には、

アニメーション終了後のスタイルも指定します。

body {
  background-color: #333;
  color: #00d6c4;
  font-family: "Teko", sans-serif;
}

.scroll-line {
  position: fixed;
  bottom: 0;
  z-index: 2;
  width: 100%;
  height: 15px;
  background: #fff;
  .inner {
    content: "";
    top: 0;
    left: 0;
    width: 0;
    height: 15px;
    background: #46e678;
  }
}

.top-mv {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 110vh;
  .text {
    text-align: center;
    text-shadow: 3px 3px 15px rgba(44, 47, 47, 0.4);
    font-weight: bold;
    font-size: 60px;
  }
}

.top-end {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: #fff;
  transition: background-color 0.7s ease-out;
  .text {
    font-weight: bold;
    font-size: 12vw;
  }
  &.is-active {
    background: #a216ff;
    color: #fff;
  }
}

手順3

① scrub: true, にすることでアニメーションがスクロールに同期します

② scrollLine.fromToのfromToはアニメーションが開始してから終わるまでの設定ができます。

③ toggleClass: "is-active",を指定することで、スクロールでclass名の追加/削除が可能です。

④ scrub: 1.5, scrubに値を指定することで、アニメーションする時間の長さを指定できます。

// ページ下部のインジゲーター
const scrollLine = gsap.timeline({
  scrollTrigger: {
    trigger: "body",
    start: "top top",
    end: "bottom bottom",
    scrub: true,    // 　①
  },
});
scrollLine.fromTo(".scroll-line .inner", {    // 　②
  width: 0
 }, {
  width: "100%"
});

//  最後に両端から入ってくるテキスト
ScrollTrigger.create({
  trigger: ".top-end",
  start: "top 50%",
  toggleClass: "is-active",    // 　③
});
const topEnd = gsap.timeline({
  scrollTrigger: {
    trigger: ".top-end",
    start: "top bottom",
    end: "center center",
    scrub: 1.5,
  },
});
topEnd.fromTo(".top-end .-left",{
    xPercent: -100
  },{
    xPercent: 0
  }).fromTo(".top-end .-right",{
    xPercent: 100
  },{
    xPercent: 0
  },
  "<"
);