最近は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で
サンプルアニメーションをチェックしてみてくださいね！