framer-motionでタイプライター風に文字を表示する

framer-motionでタイプライター風に文字を表示する

framer-motionでタイプライター風の文字の表示ができると知ったのでめも

インストール

npm install framer-motion

コードはこんな感じ。
useEffect内でstateを保存することで一文ずつタイプライターアニメーションが実行されるようにしている

variantsでアニメーションの状態を定義する

const sentenceVariants = {
  hidden: {},
  visible: {
    opacity: 1,
    transition: {
      staggerChildren: 0.1,
      duration: 0.5
    }
  }
}

const letterVariants = {
  hidden: {
    opacity: 0,
  },
  visible: {
    opacity: 1,
    transition: {
      staggerChildren: 0,
      duration: 0.5
    }
  }
}

const Page = () => {
  const sentences = [
    "Good Morning",
    "Good Afternoon",
    "Good Evening",
  ];

  const [currentSentence, setCurrentSentence] = useState(0);

  useEffect(() => {
    if (currentSentence < sentences.length - 1) {
      const timer = setTimeout(() => {
        setCurrentSentence(currentSentence + 1);
      }, sentences[currentSentence].length * 100 + 1000);

      return () => clearTimeout(timer);
    }
  }, [currentSentence]);

  return (
    <div className="flex flex-col items-center justify-center h-screen bg-gray-100">
      {sentences.map((sentence, index) => (
        <motion.div
          key={index}
          initial="hidden"
          animate={index <= currentSentence ? "visible" : "hidden"}
          variants={sentenceVariants}
          className="mb-4 text-2xl font-bold text-blue-600"
        >
          {sentence.split("").map((char, charIndex) => (
            <motion.span key={charIndex} variants={letterVariants}>
              {char}
            </motion.span>
          ))}
        </motion.div>
      ))}
    </div>
  );
};

export default Page

設定やオプションなど覚えることが多いが簡単にアニメーションを実装でき、アニメーションの幅も広がるので面白い

最後に

間違っていることあればコメントに書いていただけると幸いです。
よろしくお願いいたします。