Reactアニメーションおすすめライブラリ

実務でReactのアニメーションを使うことがあったのでメモ。
キャラクターのページ(コンポーネント)がユーザーの画面(ビューポート)に表示された時に、
キャラクターが横からスライドしてくるアニメーションを作りました。

使用するライブラリは、react-awesome-revealです。
https://react-awesome-reveal.morello.dev/

Reactのバージョンは ^18.2.0 です。

1.react-awesome-revealをインストール

npm install react-awesome-reveal @emotion/react

※react-awesome-reavealをインストールする時に、
　上記のように @emotion/react もコマンドで打ち込みます

2.実装例1

右からキャラクターがスライドしてくるという実装です。

CharacterPage.jsx

import { Fade } from "react-awesome-reveal";
import { keyframes } from "@emotion/react";

const customFrontRightAnimation = keyframes`
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(50%);
  }
`;

<Fade
    direction="left"
    duration="1500"
    delay="0"
    triggerOnce={true}
    keyframes={customFrontRightAnimation}
  >
    <img src={character} alt="" className="absolute" />
  </Fade>

keyframe`
//　from~to や 0%~100&で
//　アニメーションさせたいcssを書いていく
`

3.実装例2

TopPage.jsx

import { Roll } from "react-awesome-reveal";
import { Fade } from "react-awesome-reveal";
import { keyframes } from "@emotion/react";

const TopPage = () => {

  const rollRightAnime = keyframes`
    from {
      transform: translateX(100%) rotate(45deg);
    }
    to {
      transform: translateX(0) rotate(0deg);
    }
  `;
  const rollLeftAnime = keyframes`
    from {
      transform: translate(-200%, 200%) rotate(-90deg);
    }
    to {
      transform: translateX(0%) rotate(0deg);
    }
  `;

  return (
    <section id="TopPage" className="flex column w-full">
      <Fade direction="right" duration="3000" delay="200" triggerOnce={true}>
        <div className="topHeader">
          一部省略
        </div>
      </Fade>

      <div className="flex align-center relative column gap-50 w-full h-full">
        <div className="imageShadow shadow01 relative fit-content">
          <Roll
            direction="right"
            duration="2000"
            delay="0"
            triggerOnce={true}
            keyframes={rollRightAnime}
          >
            <div className="imageShadow-2 shadow02 absolute fit-content">
              <Roll
                direction="right"
                duration="4000"
                delay="0"
                triggerOnce={true}
                keyframes={rollLeftAnime}
              >
                <img src={TopVisual} alt="#" className="TopVisual" />
              </Roll>
            </div>
          </Roll>
          <div>
            <img
              src={Top}
              alt="#"
              className="Top absolute left bottom"
            />
          </div>
        </div>
        <Fade direction="left" duration="3000" delay="200" triggerOnce={true}>
          <span className="scrollText">
            <p className="uppercase">Scroll down</p>
          </span>
        </Fade>
      </div>
    </section>
  );
};

export default TopPage;