【Gatsby製ブログ】framer-motionで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>
…
)

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>
  …
)

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>
  …
)