⇨ React 記事の目次はこちら

Gatsby のページ遷移時にアニメーションを実装する方法についてまとめました。

手順

パッケージのインストール

公式ページ

gatsby-plugin-transition-link

を使います。

AniLink というもう少し設定がされているコンポーネントもインストールします。

npm i gatsby-plugin-transition-link
npm i gsap

gatsby-config.js に追記する

    plugins: [
      //略
      `gatsby-plugin-transition-link`
    ]

使い方

Link だった場所を AniLink にするだけで使えます（className なども使えるので、本当にその場所を置換するだけになります）

import AniLink from "gatsby-plugin-transition-link/AniLink"

<AniLink cover bg="white" duration={0.4} to={`/`}>
  リンク
</AniLink>

こんな感じで AniLink コンポーネントを使って指定します。

種類

• fade
• paintDrip
• swipe
• cover

の４種類があります。

また、props で duration や color、bg などを使って調整することが可能です。

ぜひ試してみてください。

まとめ

以上です。

誰かの参考になれば幸いです。

質問、誤記などあれば Twitter などでご指摘よろしくおねがいします！

人気記事

PHP7.4 ＋ Laravel6 のプロジェクトを AWS EC2 にデプロイする

関連記事

【ReactNative+CloudVision】「怒り顔採点アプリ」を作った