Framer motionでアニメーションサイドバーを作りたい

概要

• 表題の通り
• シンプルな物で良い
• ぐいんぐいん動くようなものは作りたくなかった。。

どこから始めるか?

• まず、open, closeの概念を知りたかった

状態管理とそれぞれの状態の時の振る舞いの設定

• openとcloseをhooksで管理する
• openの時は〇〇、closeの時は××みたいにそれぞれの状態を定義する

※引用

import { motion } from "framer-motion"

const variants = {
  open: { opacity: 1, x: 0 },
  closed: { opacity: 0, x: "-100%" },
}

export const MyComponent = () => {
  const [isOpen, setIsOpen] = useState(false)

  return (
    <motion.nav
      animate={isOpen ? "open" : "closed"}
      variants={variants}
    >
      <Toggle onClick={() => setIsOpen(isOpen => !isOpen)} />
      <Items />
    </motion.nav>
  )
}

書いてみる

import React, { useState } from 'react';
import { motion } from 'framer-motion';
// MenuはReact iconのラッパー
import { Menu } from '../icons/Menu';

const variants = {
  open: { opacity: 1, x: 0 },
  closed: { opacity: 0, x: '-100%' },
};

export const Header = () => {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <>
      <div onClick={() => setIsOpen((isOpen) => !isOpen)}>
        <Menu />
      </div>
      <motion.nav animate={isOpen ? 'open' : 'closed'} variants={variants}>
        hoge
      </motion.nav>
    </>
  );
};

なんかバウンドする

• 表示されたhogeが出てきたときに、バウンドしている（ばいん・ばいん）
• そういうのはいいから、スッと出てきて欲しい

const variants = {
  open: {
    opacity: 1,
    x: 0,
    transition: {   y: { stiffness: 1000 } },
  },
  closed: {
    opacity: 0,
    x: '-100%',
    transition: {   y: { stiffness: 1000 }},
  },
};

• stiffness(日本語訳：がんこ)プロパティを追加すると、スッと出てくるようになった

まとめ

• framer-motionがとっつきにくいのはstiffnessみたいな、情緒?っぽい英語が結構あるからなのかもしれない。
• でもやはりcssで書くよりわかりやすい！と感じた。