【Gatsby製ブログ】framer-motionの基本的な使い方

PR

今やサイトにアニメーションで動きをつけるのは必須と言っても過言ではないでしょう。

Gatsby製のブログやサイトでも動きをつけることはできます。実際に私が運営しているブログでもアニメーションをつけています。

あまり凝ったアニメーションはつけていませんが、参考にご覧いただけたら、と思います。

この「大分ツーリング」というブログではframer-motionというReactのライブラリを使ってアニメーションをつけています。GatsbyはReactベースのCMSなので、このframer-motionを使うことができます。

このframer-motion、書き方はシンプルですが、メチャクチャ色々な種類のアニメーションを付けることができます。これをうまく使えばかなり凝ったアニメーションも可能でしょう。

正直言って「使いこなせている」と言うにはほど遠いですが、スキルアップと健忘録を兼ねてブログ記事にしていきたいと思います。

framer-motionの公式サイトはこちら。(外部リンク、英語です)

目次

framer-motionのインストール

インストールはとっても簡単。

いつものようにnpmやyarnを使ってインストールするだけです。

$ yarn add framer-motion

framer-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もオススメです。必要な知識を1動画単位で購入できるので、学習に無駄がないです。Reactってあんまり学習できるプログラミングスクールみたいなのがないんですよね…。「React」と検索するだけで大量に動画がでてきます!

あなたへオススメ!
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次