【framer-motion】特定のアニメーションが終了してからアニメーションを実行させる


```react
import { memo } from "react";
import { motion } from "framer-motion";

// 子要素データ
const data = [
  {
    id: 1,
    background: `cadetblue`,
  },
  {
    id: 2,
    background: `rebeccapurple`,
  },
  {
    id: 3,
    background: `pink`,
  },
];

const mainVariants = {
  open: {
    transition: { staggerChildren: 0.07, delayChildren: 0.2 },
  },
  closed: {
    transition: { staggerChildren: 0.05, staggerDirection: -1 },
  },
};

const itemVariants = {
  open: {
    y: 0,
    opacity: 1,
    transition: {
      y: { stiffness: 1000, velocity: -100 },
    },
  },
  closed: {
    y: 50,
    opacity: 0,
    transition: {
      y: { stiffness: 1000 },
    },
  },
};

const Stagger = () => {
  return (
    <div className="w-screen h-screen bg-slate-100">
      <motion.div
        variants={mainVariants}
        initial="closed"
        animate="open"
        className="w-full h-full flex flex-col justify-center items-center gap-y-6"
      >
        {data.map((item) => (
          <motion.div
            variants={itemVariants}
            key={`item-${item.id}`}
            className="w-40 h-40 bg-red-200"
          />
        ))}
      </motion.div>
    </div>
  );
};

export default memo(Stagger);

```

## variantで親要素と子要素で連動させたいアニメーション名は同じにすること
```react
// 親要素variant
const mainVariants = {
  open: {
    transition: { staggerChildren: 0.07, delayChildren: 0.2 },
  },
  closed: {
    transition: { staggerChildren: 0.05, staggerDirection: -1 },
  },
};

// 子要素variant
const itemVariants = {
  open: {
    y: 0,
    opacity: 1,
    transition: {
      y: { stiffness: 0, velocity: -100 },
    }, 
  },
  closed: {
    y: 50,
    opacity: 0,
    transition: {
      y: { stiffness: 1000 },
    },
  },
};
```



### staggerChildren
前の子要素のアニメーションが終わってから、次の子要素のアニメーションが開始するまでの遅延時間
`staggerChildren:0.1`とした場合、2つ目以降の子要素は、前の子要素のアニメーションが終了してから0.1秒後に開始する

### delayChildren
親要素のアニメーションが開始してから、最初の子要素のアニメーションを開始させるまでの遅延時間。
`delayChildren:0.5`とした場合、最初の子要素は、親要素のアニメーションが開始してから0.5秒後に開始する。

:::note info
親要素のアニメーションが"開始"してから0.5秒後であることに注意。
:::


### staggerDirection
アニメーションを開始させる子要素の順番。
`1:最初の子要素からアニメーション開始`
`-1:最後の子要素からアニメーション開始`


### stiffness
す       animate="open"
        className="w-full h-full flex flex-col justify-center items-center gap-y-6"
      >
        {data.map((item) => (
          <motion.div
            variants={itemVariants}
            key={`item-${item.id}`}
            className="w-40 h-40 bg-red-200"
          />
        ))}
      </motion.div>
    </div>
  );
};

export default memo(Stagger);

```

## variantで親要素と子要素で連動させたいアニメーション名は同じにすること
```react
// 親要素variant
const mainVariants = {
  open: {
    transition: { staggerChildren: 0.07, delayChildren: 0.2 },
  },
  closed: {
    transition: { staggerChildren: 0.05, staggerDirection: -1 },
  },
};

// 子要素variant
const itemVariants = {
  open: {
    y: 0,
    opacity: 1,
    transition: {
      y: { stiffness: 0, velocity: -100 },
    }, 
  },
  closed: {
    y: 50,
    opacity: 0,
    transition: {
      y: { stiffness: 1000 },
    },
  },
};
```



### staggerChildren
前の子要素のアニメーションが終わってから、次の子要素のアニメーションが開始するまでの遅延時間
`staggerChildren:0.1`とした場合、2つ目以降の子要素は、前の子要素のアニメーションが終了してから0.1秒後に開始する

### delayChildren
親要素のアニメーションが開始してから、最初の子要素のアニメーションを開始させるまでの遅延時間。
`delayChildren:0.5`とした場合、最初の子要素は、親要素のアニメーションが開始してから0.5秒後に開始する。

:::note info
親要素のアニメーションが"開始"してから0.5秒後であることに注意。
:::


### staggerDirection
アニメーションを開始させる子要素の順番。
`1:最初の子要素からアニメーション開始`
`-1:最後の子要素からアニメーション開始`


### stiffness
スプリングの硬さ
スプリングの硬さを下げることで、アニメーション全体がゆっくり進むようになる

### velocity 
ベロシティ本来の意味は、ベクトル的な意味での「速度」であり、速さと方向性をもつ。
プロパティとしてはスプリングの弾力を表現する速度。