Gatsbyウェブサイトのページ遷移時にエフェクトを追加する

Gatsbyのウェブサイトを触っているとわかりますが、ページの読み込みが非常に早いです。そのため、逆に表示されるのがいきなりすぎて、ちょっと戸惑うことがあったりします。

そんなときに、ちょっとしたエフェクトを追加することで、ページの遷移をスムーズに行うことができます。

まずはいつも通り簡単に実装できるようにプラグインを使っていきます。今回使うのは、gatsby-plugin-transition-linkと呼ばれるものです。ただし、現状ではリンクにしか使えず、ボタンとかでは使えないので注意が必要です。

npm install gatsby-plugin-transition-link gsap

gsapはアニメーション用のライブラリで、これをインストールするとAniLinkが利用できるようになり、fade, swipe, cover, paintDripがすぐに使えるようになります。

ところがインストールしようとしたら、このプラグインではreact@^16.8.5が指定されているので、エラーが出てしまいました。

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: gatsby-jsturorial-site@1.0.0
npm ERR! Found: react@17.0.2
npm ERR! node_modules/react
npm ERR!   react@"^17.0.1" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.8.5" from gatsby-plugin-transition-link@1.20.5
npm ERR! node_modules/gatsby-plugin-transition-link
npm ERR!   gatsby-plugin-transition-link@"*" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! See /Users/nishimatsu/.npm/eresolve-report.txt for a full report.
npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/nishimatsu/.npm/_logs/2021-10-23T15_27_20_449Z-debug.log

このようなことが起きた場合には、エラーに書いてあるように--legacy-peer-depsか--forceオプションを使いましょう。

さて、インストールが完了したら、gatsby-config.jsにプラグインを追加しておきます。

  plugins: [
    ...中略...
   "gatsby-plugin-transition-link",
 ]

まずはこれで、それぞれの遷移方法を試してみましょう。使い方は簡単で、AniLinkをインポートして、現在の<Link>や<a>タグを<AniLink>に入れ替えるだけです。

import * as React from 'react'
import Layout from '../components/tutorial/layout'
import AniLink from "gatsby-plugin-transition-link/AniLink"
import tw, {styled} from "twin.macro"

const LinkDiv = styled.div`
 ${tw`underline text-blue-600`}
`

const TransitionPage = () => {
 return (
   <Layout pageTitle="About Page">
     <LinkDiv>
       <AniLink paintDrip to="/">
           paintDripでトップページに飛びます。
       </AniLink>
     </LinkDiv>
     <LinkDiv>
       <AniLink fade to="/" duration={10}>
         fadeでトップページに飛びます。
       </AniLink>
     </LinkDiv>
     <LinkDiv>
       <AniLink swipe to="/">
         swipeでトップページに飛びます。
       </AniLink>
     </LinkDiv>
     <LinkDiv>
       <AniLink cover to="/">
         coverでトップページに飛びます。
       </AniLink>
     </LinkDiv>
   </Layout>
 )
}

export default TransitionPage

遷移方法を変えるにはAniLinkの後に遷移方法を指定するだけです。これだけでページ遷移にエフェクトがつくようになりました。

…ただしfadeはなぜか、何も起こっていないように見えます。公式のサンプルページでも同じように何も起きないので、僕の問題ではなさそうです。

もちろん簡単なカスタマイズもすることができます。

Gatsby Plugin Transition Link

詳しくは上のリンク先に書かれていますが、基本的な項目としては以下のようなものがあります。

//遷移の早さ(秒数)
duration={1}

//遷移する方向
direction="up"

//PaintDripの色 colorかhexのどちらでも可能
color="rebeccapurple"
hex="#663399"

//Coverの色　画像も指定可能です。
bg="#663399"

coverで背景画像をつけてみましょう。例えば、ブランドロゴを表示してもいいかもしれませんね。

import image from "../images/cat.jpg"

...中略...

<LinkDiv>
  <AniLink cover bg={`url(${image}) center/cover`} duration={5} to="/">
    coverでトップページに飛びます。
  </AniLink>
</LinkDiv>

imageで表示したい画像を指定して、bgに設定しています。

猫の画像が右から表示されて、左に消えていきました。

実装結果

好かれるマーケティング研究室

まとめ

プラグインを利用することで簡単にページ遷移のエフェクトを追加できました。

エフェクトは自分で作成することもできますが、ちょっとしたエフェクトだけならこれだけでも十分でしょう。

自分でエフェクトを作成する場合は、こちらを参考にするとわかりやすいです。

Per-Link Gatsby page transitions with TransitionLink

ここまで読んでいただけたなら、”スキ”ボタンを押していただけると励みになります！(*´ー｀*)ﾜｸﾜｸ