Gatsby

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

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

⇨ 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

の4種類があります。

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

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

まとめ

以上です。

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

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

人気記事

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

関連記事

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