DocsComponentsBlog
Star us
Docs

Cycle Text

A component that cycles text over certain interval.

Installation

Install dependencies.

npm install framer-motion

Run the following command

It will create a new file called cycle-text.tsx inside the components/animata/text directory.

mkdir -p components/animata/text && touch components/animata/text/cycle-text.tsx

Paste the code

Open the newly created file and paste the following code:

import { useEffect, useState } from "react";
import { AnimatePresence, motion } from "framer-motion";
 
export default function CycleText() {
  const words = ["Hello", "World", "Ciaoo", "World"];
  const [index, setIndex] = useState(0);
 
  const total = words.length;
  useEffect(() => {
    const interval = setInterval(() => {
      setIndex((current) => (current + 1) % total);
    }, 1300);
    return () => clearInterval(interval);
  }, [total]);
 
  return (
    <div>
      <span className="font-mono text-xl text-pink-600">
        System.out.println(
        <AnimatePresence mode="wait">
          <motion.h1
            key={`words_${index}`}
            initial={{ opacity: 0, y: 30 }}
            animate={{ opacity: 1, y: 0 }}
            exit={{ opacity: 0, y: -30 }}
            transition={{ duration: 0.08 }}
            className="inline-block font-mono text-xl text-blue-700"
          >
            &quot;{words[index]}&quot;
          </motion.h1>
        </AnimatePresence>
        )
      </span>
    </div>
  );
}

Credits

Built by Laxmi Lamichhane

Edit this page on GitHub
CounterDouble Underline