【React】Reactでスクロール時に下からふわっとフェードインするアニメーションを実装する

この記事について

Webアプリ開発に慣れ親しんだ方であれば，ポートフォリオなどの静的なWebページを作成する際にもReactを使うことがあるかと思います．そのような静的なWebページによくある，スクロール時に下からふわっとフェードインするやつをReactで実装します．

完成イメージ

小要素にフェードインアニメーションを付与するReactコンポーネントを作成します．

完成イメージ

// <Example /> がフェードインするようになる
<FadeInUpWrapper>
  <Example />
</FadeInUpWrapper>

この記事に書いた通りの方法で，自分のポートフォリオにもフェードインアニメーションを実装しています．

実装手順

ライブラリのインストール

# npm
$ npm install animate.css react-intersection-observer
# yarn
$ yarn add animate.css react-intersection-observer
# pnpm
$ pnpm add animate.css react-intersection-observer

• animate.css
  アニメーションを提供するCSSライブラリ
• react-intersection-observer
  スクロールイベントを検知するライブラリ

コンポーネントの作成

FadeInUpWrapper.tsx

'use client';

import 'animate.css';
import {useInView} from 'react-intersection-observer';

type Props = {
  children: React.ReactNode;
  className?: string;
};

export const FadeInUpWrapper = ({children, className}: Props) => {
  const {ref, inView} = useInView({
    rootMargin: '-50px',　// 要素が表示されて50pxすぎたら
    triggerOnce: true,
  });

  return (
    <div ref={ref} className={className}>
      {inView && (
        <div className="animate__animated animate__fadeInUp">{children}</div>
      )}
    </div>
  );
};

上記をimportしてもらえれば，任意の要素にフェードインアニメーションを付与することができます．

おわりに

animate.cssでは他にも様々なアニメーションが提供されているので，classNameを変更するだけであらゆるアニメーションを実装することができます．間違い・改善点等があれば指摘していただけますと幸いです．