PR
【Gatsby製ブログ】framer-motionの基本的な使い方
今やサイトにアニメーションで動きをつけるのは必須と言っても過言ではないでしょう。
Gatsby製のブログやサイトでも動きをつけることはできます。実際に私が運営しているブログでもアニメーションをつけています。
あまり凝ったアニメーションはつけていませんが、参考にご覧いただけたら、と思います。
この「大分ツーリング」というブログではframer-motionというReactのライブラリを使ってアニメーションをつけています。GatsbyはReactベースのCMSなので、このframer-motionを使うことができます。
このframer-motion、書き方はシンプルですが、メチャクチャ色々な種類のアニメーションを付けることができます。これをうまく使えばかなり凝ったアニメーションも可能でしょう。
正直言って「使いこなせている」と言うにはほど遠いですが、スキルアップと健忘録を兼ねてブログ記事にしていきたいと思います。
framer-motionの公式サイトはこちら。（外部リンク、英語です）
目次
framer-motionのインストール
インストールはとっても簡単。
いつものようにnpmやyarnを使ってインストールするだけです。
$ yarn add framer-motionframer-motionの基本的な使い方「とりあえず動かしてみよう」
まずは一番基本的なmotionをframer-motionからimportします。
import { motion } from "framer-motion"このmotionをdivタグやhタグにくっつけるだけで、アニメーションを適用することができます！
- <div>クマ参上！</div>
+ <motion.div>クマ参上！</motion.div> //←アニメーションをつけたいタグに「motion.」をつける。 ただ、当然これだけではアニメーションはつきません。
propsを指定して、自分の思い通りのアニメーションをつけていきます。
クマこれが、深掘りし始めるとキリがないほど複雑です。とりあえず、使いそうなアニメーションが実装できるように、ちょっとずつやっていきましょう。
一番単純にアニメーションをつけるのはanimateというpropsを指定してあげることです。
…
<motion.div
animate = {{x: 100}} //←コレ
>
クマ参上！
</motion.div>
…animateに配列で状態を指定してあげることで、その状態に向かってアニメーションが進んでいきます。
クマ単に動かすだけなら超簡単！
デフォルトの状態からanimateの状態に向かっていきます。
LINEスタンプもぜひご覧ください！
framer-motionの基本的な使い方「initialを指定してみよう」
animateの指定だけでしたら、デフォルトの状態から別の状態に動いてしまいます。
逆に「ある状態からデフォルトの状態に動かしたい」ということもあるでしょう。というか、こっちの方がよく使う気がします。
例えば、スクロールアニメーションなんかでよく使う「要素が下からフワッと現れる」アニメーションなんかがそうですね。「ちょっと下にあって、透明な状態から、デフォルトの位置に現れる」という風にアニメーションしてあげればOKです。
こういうときには、initialを指定してあげます。
<motion.div
initial = {{y: 20, opacity: 0}} //この初期状態から、
animate = {{y: 0, opacity: 1}} //この状態にアニメーションする
>
クマ参上！
</motion.div>initialは文字通り「初期状態」です。
今回は、この初期状態を{y: 20, opacity: 0}にしています。「y（縦）方向に+20px、透明度0の状態」ですね。
この初期状態から、animate（{y: 0, opacity: 1}、「y方向0px、透明度1の状態」つまりデフォルトの状態）に向かってアニメーションしていきます。
クマこれも慣れれば簡単！
おまけ「Error: “export ‘useId’ (imported as ‘React’) was not found in ‘react'”」というエラーが出た！
今回、この記事を書くためにテスト用のブログを立ち上げたのですが、
Error: “export ‘useId’ (imported as ‘React’) was not found in ‘react'”
というエラーが出て困りました。「Reactでmuiなどを使っていて上記のエラーが出た！」という報告もあります。
どうやら、reactとframer-motion（やmui）のバージョンによるエラーのようです。
他の、framer-motionが正しく動いている環境（…自分の他のプロジェクトですが）を参考にして、
- react → 18.2.0
- framer-motion → 7.9.0
で正常に作動しました。package.jsonの中reactとframer-motionのバージョン指定を
{
…
"dependencies": {
…
"framer-motion": "^7.9.0",
…
"react": "^18.2.0",
…と書き直して、プロジェクト中にある「node_modules」フォルダをまるっと消去したあと、もう一度、
$ yarn installして、プロジェクトに必要なパッケージをインストールし直してください。
クマframer-motionとreactのバージョンにはちょっと注意が必要、ということですね。スターターなんかを使うと、この辺のバージョン情報が古いことが多いです…。
まとめ
今回はframer-motionを使って基本的なアニメーションの実装方法を解説しました。
framer-motionはReactのライブラリなので、Gatsbyで作ったサイトはもちろん、Reactでも使えます。
構造はシンプルですができることはかなり多いので、健忘録を兼ねて、少しずつ解説していきます。
クマ次はもう少し実践的なアニメーションの実装方法を解説します！
Gatsbyを学習している方への私からのオススメ！
私が読んでよかったな、と思うGatsbyの学習をするのにオススメの本を紹介しておきます。
リンク
画も多くてとても読みやすく、ステップバイステップでGatsbyJSのサイトを作ることができます！
また、Gatsbyを学習する上で、Reactを同時に学習することもオススメします。
リンク
こちらも、まず構成や見た目がとても読みやすい本です。加えてReactに対しての専門的な知識を丁寧に学ぶことができます。ここでReactに対する基礎知識をしっかりしておくと、Gatsbyに対する見方が変わって、Webページをサクサク作ることができるようになります！
あと、色々と調べたのですが、Reactの学習ならUdemyもオススメです。必要な知識を１動画単位で購入できるので、学習に無駄がないです。Reactってあんまり学習できるプログラミングスクールみたいなのがないんですよね…。「React」と検索するだけで大量に動画がでてきます！
あわせて読みたい
【Gatsby製ブログ】framer-motionでスクロールしたらフワッと表示させる
Reactでアニメーションをつけるときにオススメのライブラリーがframer-motionです。 もちろんReactベースのGatsbyでも使うことができます。 私のGatsbyブログでもframer…
あわせて読みたい
【GatsbyJS製ブログ】画像の扱い方（gatsby-plugin-image使用例も）
Gatsbyのウリの一つとして「画像の最適化」があります。 上手く画像指定してあげれば自動的にwebp形式で適切なサイズの表示をしてくれます。 しかし、この画像の最適化…
あわせて読みたい
【GatsbyJS製ブログ】インストールからブログ立ち上げとGatsbyの構造
GatsbyJS（以下Gatsby）、ご存知でしょうか？Gatsbyは今流行りの静的サイトジェネレーター、といわれるブログやHPを作るためのReactベースのフレームワークです。 Gatsb…
