最近はReactの勢いがすごいですね。
そんなReactでアニメーションを導入するとき、多くの開発者はFramer Motionの記事を目にすると思います。
今回はFramer Motionのメリット・デメリットを筆者の開発体験を元にまとめてみます。

メリット

シンプルで簡単

Framer Motionを使うと、ピュアなCSSよりも簡単にアニメーションを導入できます。
例えば、以下のようなアニメーションも簡単に導入できます。

export default function Example(props) {
    return (
        <div>
            <motion.div
                style={{
                    width: 150,
                    height: 150,
                    borderRadius: 30,
                    backgroundColor: "#fff",
                    cursor: "pointer",
                }}
                whileTap={{ rotate: 90, scale: 0.75 }}
            />
        </div>
    )
}

ピュアなCSSで実現しようとすると、keyframesを調整しないといけなかったりとなかなか大変だと思います、、
というように、tsxファイルにちょこっとコードを書くだけでアニメーションができるのでとても便利です。

幅広いオプションと柔軟性

Framer Motionには様々なオプションが用意されています。

例えば、

イージング
アニメーション期間
タップ時のアニメーション
ホバー時のアニメーション
初回レンダー時アニメーションのオン/オフ
CSSでのアニメーション制御のオン/オフ

など多くのオプションがあり、自分好みにカスタマイズできます。

これらのオプションを使って、実際にアニメーションを作ってみました。

ソースコードはFramer Motion Examplesにてチェックしてみてください！
これ以外のアニメーションも紹介していますよ。

アニメーション付きページ遷移

この記事では詳しく説明しませんが、Framer MotionのAnimation Presenceを使えば、
アニメーション付きのページ遷移をラクに実装できます。
詳しいことに関しては、下記の記事などを参照してみてください。

デメリット

SSR非対応

Framer MotionはJavaScriptライブラリです。そのため、Framer MotionのアニメーションコンポーネントはReact Server Component内では使えません。（motion.divなど）
SSR非対応ということは、SEO面で不利になったり、Adsenseの審査が通らなかったりします。
なぜなら、JavaScriptが読み込まれた後にレンダリングされるからです。
Next.jsはデフォルトがSSRなので、開発の際には注意が必要です。

パッケージサイズが大きい

Framer Motionのパッケージサイズは2.3MBもあります。
同じようなアニメーションライブラリである react-springは僅か55.1KBです。
ビルドサイズやパフォーマンスに少なからず影響することを知っておきましょう。
ただ、Framer MotionはLazy Loadingをサポートしているので
パフォーマンス改善の余地はあります。

結論

Framer Motionが適している状況としては、

Google Adsenseを導入しない
SEOをそこまで気にしない（＝ブログには向かない）
SSRにこだわらない

といったところでしょうか。

もし、Framer Motionに興味がある方はFramer Motion Examplesで
サンプルアニメーションをチェックしてみてくださいね！