DocsComponentsBlog
Star us
Docs

Jumping Text (Instagram)

Jumping text effect similar to the one seen in Instagram's text effects

Installation

Install dependencies

npm install framer-motion

Run the following command

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

mkdir -p components/animata/text && touch components/animata/text/jumping-text-instagram.tsx

Paste the code

Open the newly created file and paste the following code:

import { motion } from "framer-motion";
 
const splitText = (text: string, word = false) => {
  if (word) {
    return String(text).split(/(?:\b)/u);
  }
  return String(text).split(/(?:)/u);
};
 
export default function JumpingTextInstagram({
  text = "This is a jumping text effect",
  mode = "word",
  className,
}: {
  text: string;
  className?: string;
  mode?: "word" | "character";
}) {
  const isWordMode = mode === "word";
  const nodes = splitText(text, isWordMode);
  return (
    <div className={className} key={text}>
      {nodes.map((node, index) => (
        <motion.span
          key={index}
          initial={{
            translateY: 30,
            rotate: -30,
            opacity: 0,
          }}
          animate={{
            opacity: [0, 0.5, 1],
            translateY: [30, -30, 0],
            rotate: [-30, 30, 0],
            transition: {
              type: "spring",
              damping: 10,
              mass: 2,
              delay: (isWordMode ? 0.05 : 0.01) * index,
              duration: nodes.length * 0.05,
            },
          }}
          className="inline-block origin-center"
        >
          {node === " " ? "\u00A0" : node}
        </motion.span>
      ))}
      <span className="sr-only">{text}</span>
    </div>
  );
}

Credits

Built by hari

Edit this page on GitHub
Jitter TextMask Text