Gatsbyのページ遷移にアニメーションを追加する方法

いつもご利用ありがとうございます。このブログは、広告費によって運営されています。

オススメ本

Web技術を勉強するなら、かなりオススメの雑誌です。毎月新しい発見があります。ついに最終号・・・、みなさん買いましょう！！

読んで損することはない名著。命名で悩むことが多い人はこの本がオススメです。

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

手順

gatsby-plugin-transition-link

を使います。

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

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

    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 コンポーネントを使って指定します。

の４種類があります。

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

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

以上です。

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

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