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でも使えます。
構造はシンプルですができることはかなり多いので、健忘録を兼ねて、少しずつ解説していきます。
クマ次はもう少し実践的なアニメーションの実装方法を解説します！
ちょっと一息…
最近本格的にCSSの勉強を始めました。
WordPressでもGatsbyJSでも必要な基本的な知識「CSS」…これが奥深い。
クマもちろんCSSに関する基本的な知識はあるのですが、引き出しは多くしておきたいものです。
ワンランク上のホームページ、ブログ作成を目指して、特に「これはよかった」というオススメのCSS学習教材の紹介をしていきます。
動画編
Webデザインのオンラインスクールなどは沢山ありますが、数万円〜数十万円するので、なかなかハードルが高いですよね。
そこでオススメなのはUdemy。
このブログでもちょくちょく紹介させてもらっていますが、一つの講座買い切り、というのがありがたいです。
しかも、種類もかなり豊富！GatsbyJSの講座まである、というのは他ではなかなかないです。
そのなかでもオススメのCSSに関する講座を紹介しておきます。
クマCSSの講座とかは沢山あるので、「これよさそう！」と思ったものを探すのも楽しいかもしれません。
書籍編
CSSを実践的に書いていくなら、書籍も便利です。
本を片手にコーディング、というのは効率もいいですよね。
こちらもオススメの本を紹介しておきます。
クマCSSの基本ができている人が「次のステップに行きたいなぁ…」というときにオススメです。
あわせて読みたい
【Gatsby製ブログ】framer-motionでスクロールしたらフワッと表示させる
Reactでアニメーションをつけるときにオススメのライブラリーがframer-motionです。 もちろんReactベースのGatsbyでも使うことができます。 私のGatsbyブログでもframer…
あわせて読みたい
【GatsbyJS製ブログ】画像の扱い方（gatsby-plugin-image使用例も）
Gatsbyのウリの一つとして「画像の最適化」があります。 上手く画像指定してあげれば自動的にwebp形式で適切なサイズの表示をしてくれます。 しかし、この画像の最適化…
あわせて読みたい
【GatsbyJS製ブログ】インストールからブログ立ち上げとGatsbyの構造
GatsbyJS（以下Gatsby）、ご存知でしょうか？Gatsbyは今流行りの静的サイトジェネレーター、といわれるブログやHPを作るためのReactベースのフレームワークです。 Gatsb…
