【Gatsby製ブログ】framer-motionでVariantsを使う！

2022年12月31日2023年12月5日

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

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

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

あわせて読みたい

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

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

今回はframer-motionの基本Variantsについて説明していきます！

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

Variantsとは？

こちらのframer-motionの基本で説明したときには、初期状態（initial）とアニメーション先の状態（animate）はオブジェクトの形で指定していました。

あわせて読みたい

【Gatsby製ブログ】framer-motionの基本的な使い方今やサイトにアニメーションで動きをつけるのは必須と言っても過言ではないでしょう。 Gatsby製のブログやサイトでも動きをつけることはできます。実際に私が運営してい…

Variantsはこんな形であらかじめ状態を設定しておきます。

const variants = { // こんな形でVariantsを設定。名前はなんでもOK。
  visible: { // 状態を設定。名前はなんでもOK。visible（見える状態）は名前としてよく使う。
    opacity: 1, // 透過率。0〜1の間の値。0で完全に透明、1で完全に見える状態。
    transition: {
      duration: 2 // 2秒かけて変化。
    }
  },
  hidden: { // 状態を設定。名前はなんでもOK。hidden（隠れている状態）は名前としてよく使う。
    opacity: 0,
  },
}

return (
…
<motion.div
  variants = {variants} //variantsで先ほど設定したVariantsを指定。
  initial = "hidden" //初期状態を名前で指定。
  animate = "visible" //アニメーション先を名前で指定。
>
  クマが現れた！！
</motion.div>
…
)

基本的な流れは、

Variantsの設定。状態の名前と、そのときの状態を書いておく。
motionタグで、variantsに先ほどのVariants、initialとanimateに状態の名前を指定。

これでVariantsでのアニメーション設定ができます。Variantsの利点としては、

アニメーションの状態管理が楽になる。
複数の状態を指定できる。

などがありますので、基本的にVariantsでアニメーション設定をしていきます。

例えば、こんな感じで色を変えることもできます。

const changeColorVariants = {
  red: {
    color: "white",
    backgroundColor: "#ff0000",
  },
  blue: {
    color: "white",
    backgroundColor: "#0080ff",
    transition: {
      duration: 2,
    }
  },
}

return (
  …
    <motion.div
      variants = {changeColorVariants}
      initial = "red"
      animate = "blue"
      style={{fontSize:"3rem", width: 600, height: 200, textAlign: "center", lineHeight: "200px" }}
    >
      Variantsのテストだよ
    </motion.div>
  …
)

クマ

framer-motion、なんでもできるな！すげぇよ！

Variantsの応用編

Variantsで状態を３つ用意しておいて、ラジオボタンで選んだ色に変化していく、なんてのもできます。

このコードの中にあるuseStateの使い方もクセがあるので、ぜひこちらの記事もあわせてご覧ください。

あわせて読みたい

【React入門】useStateを初心者がキチッとサクッと理解する Reactを触っているときにわかりにくかったのがこのuseStateなどのHooksです。なにしろプログラミングの知識がほぼ０でしたので、変数に値を代入したり、if文による条件…

const [color, setColor] = useState("red"); //useStateを使って状態の名前を変化させる。

const colorChange = (e) => {setColor(e.target.value)} 
//↑ラジオボタンから状態の名前を引っ張ってきて、setColorで状態の名前を変化させる。

const changeColorVariants = { //状態を3つ（red、blue、green）Variantsで準備しておく。
  red: {
    color: "white",
    backgroundColor: "#ff0000",
    transition: {
      duration: 2,
    }
  },
  blue: {
    color: "white",
    backgroundColor: "#0080ff",
    transition: {
      duration: 2,
    }
  },
  green: {
    color: "white",
    backgroundColor: "#00fa9a",
    transition: {
      duration: 2,
    }
  }
}

return (
  …
  <motion.div
    variants = {changeColorVariants}
    initial = "red"
    animate = {color} //ここに"red"か"blue"か"green"が入る。それに向かってアニメーションが進む。
    style={{fontSize:"3rem", width: 600, height: 200, textAlign: "center", lineHeight: "200px" }}
  >
    Variantsのテストだよ
  </motion.div>
  <input type = "radio" name ="colorselect" value = "red" onChange = {colorChange} checked = {color === "red"}/><label>赤</label>
  <input type = "radio" name ="colorselect" value = "blue" onChange = {colorChange} checked = {color === "blue"}/><label>青</label>
  <input type = "radio" name ="colorselect" value = "green" onChange = {colorChange} checked = {color === "green"}/><label>緑</label>
  …
)