ホーム > Gatsby > How to Add Animation to Page Transitions in Gatsby
Gatsby

How to Add Animation to Page Transitions in Gatsby

Thank you for your continued support.
This article contains advertisements that help fund our operations.

Table Of Contents

  1. Procedure
  2. Summary
オススメ本

⇨ Click here for the table of contents for React articles

This article summarizes how to implement animation during page transitions in Gatsby.

Procedure

Package Installation

Official Page

Use gatsby-plugin-transition-link.

Also, install a component called AniLink that has additional configurations.

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

Add to gatsby-config.js

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

How to Use

Simply replace Link with AniLink (since you can use className and more, it's just about replacing that spot).

import AniLink from "gatsby-plugin-transition-link/AniLink"
<AniLink cover bg="white" duration={0.4} to={`/`}>
  Link
</AniLink>

Specify using the AniLink component like this.

Types

  • fade
  • paintDrip
  • swipe
  • cover

There are four types.

Additionally, you can adjust settings such as duration, color, and bg using props.

Definitely give it a try.

Summary

That's all.

I hope this can be helpful for someone.

For questions, corrections, etc., please feel free to point them out on Twitter or elsewhere!

Popular Articles

Deploying a PHP 7.4 + Laravel 6 Project to AWS EC2

Related Articles

Building an "Angry Face Scoring App" with React Native and Cloud Vision

Please Provide Feedback
We would appreciate your feedback on this article. Feel free to leave a comment on any relevant YouTube video or reach out through the contact form. Thank you!