Framer-motionを使って、簡単にフェードインフェードアウトを実装する

はじめに

あるとき、Next.jsでの開発をして見たいと感じ、ポートフォリオサイトのようなものを作っていました。
フロントエンド開発とかほとんどやったことのない自分がQiitaのアイコンとしても使っているアイコンをフェードインさせたらオシャレなんじゃねと、デザインセンスないながらも感じました。
そういう経緯からどうやるのか調べて見たところ、どうやらFramer-motionというライブラリがあるそうなので、使ってみました。

そもそもFramer-motionって？

React用のオープンソースアニメーションライブラリです。

使ってみる

まずはセットアップ

next.jsのセットアップは省きます。

まずインストールします。

• npmの場合

npm install framer-motion

• yarnの場合

yarn add framer-motion

framer-motionを使ったフェードインを実装していく

今回はアイコンと名前をフェードインさせるコードを書いてみました。

<AnimatePresence mode="wait">
                <div className="relative grid grid-cols-4">

                    <div className="main col-span-4 mx-auto my-10">
                        <motion.div
                            initial={{opacity: 0}}
                            animate={{opacity: 1}}
                            transition={{duration: 0.5, delay: 0.5}}
                            key="image-container"
                        >
                            <Image
                                src={`${BASE_PATH}/images/img.png`}
                                alt="icon"
                                width={500}
                                height={500}
                            />
                        </motion.div>

                        <motion.div
                            className="flex items-center justify-center my-5"
                            initial={{opacity: 0}}
                            animate={{opacity: 1}}
                            transition={{duration: 1, delay: 1}}
                            key="image-container"
                        >
                            <div className="name text-center text-9xl">
                                <h1>MAOZ</h1>
                            </div>
                        </motion.div>

</AnimatePresence>

使い方としてはAnimatePresenceで、アニメーションしたいコンポーネントを囲います。
`mode="wait"にすることで、アンマウント時にはアニメーションをさせないようにしています。

<AnimatePresence mode="wait">
</AnimatePresence>

そして、今回フェードインをさせたいもの(今回だとアイコン)を、motion.divで下のように指定します。
initialで初期状態(waitさせているのでアンマウント時）の設定をしていて、opacityを0にすることで透明にしています。
animateでマウント時の設定を行なっていて、opacityを1にすることで完全にアイコンが見える状態にしています。
transitionでどのようにanimationをさせるかを指定しています。duration:0.5にすることでinitialからanimateの状態に移るまでの感覚を0.5sとしています。delay:0.5で、マウントされてからどのくらいでアニメーションを遅延させるかを設定していて、0.5sとしています。

上のコードではkeyをつけていますがなくても動きます。
調べてみると別コンポーネントで定義する場合はつける必要があるそうです。

<motion.div
        initial={{opacity: 0}}
        animate={{opacity: 1}}
        transition={{duration: 0.5, delay: 0.5}}
>
    <Image
        src={`${BASE_PATH}/images/img.png`}
        alt="icon"
        width={500}
        height={500}
    />
</motion.div>

実装結果

結果こんな感じにフェードインします。

ぜひ使って見てください。