【Gatsby製ブログ】framer-motionで好きなタイミングでアニメーション発火

2023年1月2日2023年12月5日

Reactでアニメーションをつけるときにオススメのライブラリーがframer-motionです。

もちろんReactベースのGatsbyでも使うことができます。

私のGatsbyブログでもframer-motionでアニメーションをつけています。

あわせて読みたい

大分ツーリングおんせん県大分のツーリング情報を発信していきます！穴場ツーリングスポットやツーリンググルメなど、地元大分在住だからこそわかる魅力をお伝えします。その他バイクに関…

framer-motionは自由度が高く、色々できる代わりに使い方が結構複雑です。

今回はframer-motionで好きなタイミングでアニメーションを発火させる方法について説明していきます！

LINEスタンプもぜひご覧ください！

framer-motionで好きなタイミングでアニメーションを発火させる

実は既にVariantsの解説で、好きなタイミングでアニメーションを発火させる方法は紹介しています。

あわせて読みたい

【Gatsby製ブログ】framer-motionでVariantsを使う！ Reactでアニメーションをつけるときにオススメのライブラリーがframer-motionです。もちろんReactベースのGatsbyでも使うことができます。私のGatsbyブログでもframer…

一番簡単な方法は、ボタンを押したり、ラジオボタンを選んだりしたときに、useStateなんかを使ってanimateの状態指定を変えてやることです。

クマ

Variantsの説明のときは、ラジオボタンを使ってstateの状態名を変えてアニメーションを発火させていました。

例えば、レスポンシブ対応したサイトのサイドメニューの開閉にアニメーションを使う、というのもよくやりますよね。

const [isopen, setIsOpen] = useState(false); //サイドメニューが開いているかどうかの判定。

const menuVariants = { //Variantsで状態を設定。
  visible: {
    x: 0,
    transition: {
      duration: 0.5, //durationで指定した時間をかけてアニメーションする。
      type: "spring", //跳ねるようなエフェクトをかける。
    },
  },
  hidden: {
    x: "-100vw",
    transition: {
      duration: 2.5,
      type: "spring",
    },
  },
}

return (
…
// サイドメニュー
<motion.div
  variants = {menuVariants}
  initial = "hidden"
  animate = {isopen ? "visible" : "hidden"} 
  //↑三項演算子でisopenがtrueなら"visible"に、falseなら"hidden"にアニメーションする。
  style={{position: "absolute", top: 0, left:0, width: "200px", height: "100vh", background: "#FFB6C1"}}
>
  <ul style={{position: "absolute", top: 130, left: 30, fontSize: "1.2rem"}}>
    <li key={1}>クマ太郎</li>
    <li key={2}>クマ次郎</li>
    <li key={3}>クマ三郎</li>
  </ul>
</motion.div>
// ハンバーガーメニュー
<motion.div
  initial = "hidden"
  animate = {isopen ? "visible" : "hidden"}
>
  <button onClick = {() => setIsOpen(!isopen)}> // クリックしたときにsetIsOpenでisopenのstateを変えている。
  …（ボタン。svgでハンバーガーメニューを作る。）
  </button>
</motion.div>
…
)

こんな感じで、簡単にサイドメニューの開閉アニメーションを実装することができます。

クマ

useStateの扱いに慣れていたら、結構簡単に実装できます！しかも今回の例はかなり実践的ですね！ちなみに、useStateについてはこちらで説明しています。

今回のコード全体はコチラ

クマ

svgでハンバーガーメニュー作るのは結構大変（少なくとも私は苦手）なので、参考にどうぞ。

…  
  const [isopen, setIsOpen] = useState(false);

  const Path = props => (
    <motion.path
      fill="transparent"
      strokeWidth="3"
      stroke="hsl(0, 0%, 18%)"
      strokeLinecap="round"
      {...props}
    />
  );

  const menuVariants = {
    visible: {
      x: 0,
      transition: {
        duration: 0.5,
        type: "spring",
      },
    },
    hidden: {
      x: "-100vw",
      transition: {
        duration: 2.5,
        type: "spring",
      },
    },
  }

  return (
    <div>
      <motion.div
        variants = {menuVariants}
        initial = "hidden"
        animate = {isopen ? "visible" : "hidden"}
        style={{position: "absolute", top: 0, left:0, width: "200px", height: "100vh", background: "#FFB6C1"}}
      >
        <ul style={{position: "absolute", top: 130, left: 30, fontSize: "1.2rem"}}>
          <li key={1}>クマ太郎</li>
          <li key={2}>クマ次郎</li>
          <li key={3}>クマ三郎</li>
        </ul>
      </motion.div>

      <motion.div
        initial = "hidden"
        animate = {isopen ? "visible" : "hidden"}
      >
        <button onClick = {() => setIsOpen(!isopen)}>
          <svg width="23" height="23" viewBox="0 0 23 23">
            <Path
              variants={{
                hidden: { d: "M 2 2.5 L 20 2.5" },
                visible: { d: "M 3 16.5 L 17 2.5" }
              }}
            />
            <Path
              d="M 2 9.423 L 20 9.423"
              variants={{
                hidden: { opacity: 1 },
                visible: { opacity: 0 }
              }}
              transition={{ duration: 0.1 }}
            />
            <Path
              variants={{
                hidden: { d: "M 2 16.346 L 20 16.346" },
                visible: { d: "M 3 2.5 L 17 16.346" }
              }}
            />
          </svg>
        </button>
      </motion.div>
    </div>
  )
}
…

全体、といいつつ本当に全部ではありませんが、メニューとハンバーガーメニューの表示とアニメーション部分の実装はこれで全部です。それぞれの環境に合わせてコピペしてみてください。