barba.jsとgsapを使ってページ遷移のアニメーションを作成する方法

gsap

barba.jsとgsapを使ってページ遷移のアニメーションを作成する方法を紹介します。

barba.jsとgsapを使ってページ遷移のアニメーションを作成する方法

barba.js公式サイト: https://barba.js.org/docs/getstarted/install/

インストール

gsapとbarba.jsをインストールします。
barba.jsはnpmなど経由の場合、以下の通りです。

# npm
npm install @barba/core

# yarn
yarn add @barba/core

cdn経由の場合、以下のどちらかを読み込みます。

<!-- unpkg -->
<script src="https://unpkg.com/@barba/core"></script>

<!-- jsdelivr -->
<script src="https://cdn.jsdelivr.net/npm/@barba/core"></script>

HTML

HTMLを準備じます。
aboutのページ

    <div data-barba="wrapper" id="wrap">

        <div data-barba="container" data-barba-namespace="about" id="section">
            <h1>About</h1>
            <div id="btc"><a href="">Home</a></div>
      </div>
    </div>

Homeのページ

    <div data-barba="wrapper" id="wrap">

        <div data-barba="container" data-barba-namespace="about" id="section">
            <h1>Home</h1>
            <div id="btc"><a href="">About</a></div>
      </div>
    </div>

href属性は適宜設定します。
barba.jsを使うためには、htmlのwrapperの設定をする必要があります。
そして、コンテンツを表示したい部分をcontainerと設定する必要があります。
そのcontainerには、namespaceも設定しておきます。
これで、最低限のhtmlの設定が完了です。

JavaScript

// barba ベース
barba.init({
  transitions: [{
    name: 'opacityTransition',
    sync:true,
    leave(data) {
      return gsap.to(data.current.container, {autoAlpha: 0, duration: 0.5})
    },
    enter(data) {
      return gsap.from(data.next.container, {autoAlpha: 0, duration: 1, delay: 1})
    }
  }]
})

barba.init()コマンドで初期化します。
transitionsで、いろいろなトランジションを設定することができます。
leaveやenterの他にもlyfecycleフックがいろいろあるので、詳しくはドキュメントを参照します。

あとは適宜cssを整えればアニメーションがページの遷移時にアニメーションができます。

ブロックをアニメーションさせる

HTML

    <div data-barba="wrapper" id="wrap">
      <div id="block" class="block0"></div>
      <div id="block" class="block1"></div>
      <div id="block" class="block2"></div>
      <div id="block" class="block3"></div>

      <div data-barba="container" data-barba-namespace="about" id="section">
        <h1>About</h1>
        <div id="btn">
          <a href="/index.html"
            >Home</a
          >
        </div>

        <div id="imgPlaceHolder">
          <img src="https://source.unsplash.com/random" alt="" id="img" />
        </div>
        <div id="imgPlaceHolder">
          <img src="https://source.unsplash.com/random" alt="" id="img" />
        </div>
        <div id="imgPlaceHolder">
          <img src="https://source.unsplash.com/random" alt="" id="img" />
        </div>
        <div id="imgPlaceHolder">
          <img src="https://source.unsplash.com/random" alt="" id="img" />
        </div>
      </div>
    </div>

まずはhtmlを設定します。基本の形に、イメージを挿入しています。

CSS

CSSのフェードイン・アウトのアニメーションで大事なポイントは以下の３つです。

  • 子要素にtransform: translateの設定
  • 子要素にdisplay: inline-blockの設定
  • 親要素にoverflow: hiddenの設定

translateはXでもYでも好きな方向に100%以上を設定することで、inline要素なので隠れます。

#block {
  z-index: 99;
  position: absolute;
  top: 0%;
  width: 25%;
  height: 100%;
  background-color: rgba(0,0,0,0.5);
  transform: translateY(100%);

  &.block0 {
    left: 0%;
  }
  &.block1 {
    left: 25%;
  }
  &.block2 {
    left: 50%;
  }
  &.block3 {
    left: 75%;
  }
}

#imgPlaceHolder {
  width: 40%;
  height: 50%;
  position: relative;
  overflow: hidden;
  z-index: 99;
  display: inline-flex;
  margin: 2.5%;
  & #img {
    width: 100%;
    height: 100%;
    position: relative;
    display: inline-block;
  }
}

JavaScript

// blockアニメーション
let TL = gsap.timeline({ease: 'sine.in'})

barba.init({
  transitions: [{
    name: 'blockTransition',
    async leave(data) {
      await TL
      .to('#img', {y: '110%'})
      .to('#block',{y: '0%', duration: .5, stagger: .25})
    },
    async enter(data) {
      gsap.set('#img', {y: '110%'})
      await TL
      .to('#block', {y: '100%', duration: 0.2, stagger: 0.25, delay: 1})
      .to('#img', {y: '0%'})
    }
  }]
})

leaveとenterはasyncを使うことができます。
leaveのときは、画像から消えて、enterのときは後で画像を表示させています。
enterのとき画像はset()メソッドでtranslateを使ってずらし、to()メソッドで元に戻します。

gsap

Posted by devsakaso