Unknown issue while using Rotating Text in my project. Is there any conflict?

[fr1g]

But at the very first, I need to confirm, that theoretically, the given code in the usage section is what should be rendered like the preview section going, right?
Now if so, I copied the given code to my project but the box that containing the text (let's say, the badge) shrinks to the shorter texts' width but without animation like the preview section.
Meanwhile I can see the animation is controlled by js, but how the site working like:

and my project will belike:

just like, there's only transition popping each character up, but nothing controlling the transform of badge.

here's my dependencies installed:

    "dependencies": {
        "@react-spring/web": "^9.7.5",
        "@vercel/analytics": "^1.5.0",
        "@vercel/speed-insights": "^1.2.0",
        "framer-motion": "^12.4.3",
        "gsap": "^3.12.7",
        "ogl": "^1.0.11",
        "postprocessing": "^6.36.7",
        "react": "^19.0.0",
        "react-dom": "^19.0.0",
        "react-router": "^7.1.5",
        "tdesign-icons-react": "^0.4.3",
        "tdesign-react": "^1.10.5"
    },
    "devDependencies": {
        "@eslint/js": "^9.20.0",
        "@tailwindcss/vite": "^4.0.6",
        "@types/react": "^19.0.8",
        "@types/react-dom": "^19.0.3",
        "@vitejs/plugin-react-swc": "^3.8.0",
        "eslint": "^9.20.1",
        "eslint-config-prettier": "^10.0.1",
        "eslint-plugin-perfectionist": "^4.9.0",
        "eslint-plugin-react-hooks": "^5.1.0",
        "eslint-plugin-react-refresh": "^0.4.19",
        "globals": "^15.15.0",
        "i18next": "^24.2.2",
        "prettier": "^3.5.1",
        "react-i18next": "^15.4.0",
        "tailwindcss": "^4.0.6",
        "typescript": "^5.7.3",
        "typescript-eslint": "^8.24.0",
        "vite": "^6.1.0",
        "vite-css-modules": "^1.8.4"
    }

[fr1g]

@DavidHDev Hi, may I request your help when you're free?

[DavidHDev]

@fr1g A video of what the animation looks like right now would probably help. Please know that the component ONLY provides the letters rotating, not the full container animations as well.

In the React Bits project, it's added separately with some extra logic and extra CSS:

So this is the only part is what the actual component provides, not all the transitions:

Demo Code:

          <div className="rotating-text-demo">
            <LayoutGroup>
              <motion.p className="rotating-text-ptag" layout>
                <motion.span
                  className="pt-0.5 sm:pt-1 md:pt-2"
                  layout
                  transition={{ type: "spring", damping: 30, stiffness: 400 }}
                >
                  Creative{" "}
                </motion.span>
                <RotatingText
                  texts={words}
                  mainClassName="rotating-text-main"
                  staggerFrom={"last"}
                  initial={{ y: "100%" }}
                  animate={{ y: 0 }}
                  exit={{ y: "-120%" }}
                  staggerDuration={0.025}
                  splitLevelClassName="rotating-text-split"
                  transition={{ type: "spring", damping: 30, stiffness: 400 }}
                  rotationInterval={2000}
                />
              </motion.p>
            </LayoutGroup>
          </div>

CSS for demo code:

.rotating-text-demo {
  width: 100%;
  height: 100%;
  font-size: 1.5rem;
  line-height: 2rem;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  font-weight: 300;
  overflow: hidden;
  padding: 3rem;
  color: #fff;
}

.rotating-text-main {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
  background-color: #67e8f9;
  color: #000;
  overflow: hidden;
  display: flex;
  justify-content: center;
  border-radius: 0.5rem;
}

.rotating-text-split {
  overflow: hidden;
  padding-bottom: 0.125rem;
}

.rotating-text-ptag {
  font-weight: 900;
  display: flex;
  align-items: center;
  gap: 0.2em;
}

@media (min-width: 640px) {
  .rotating-text-split {
    padding-bottom: 0.25rem;
  }
}

@media (min-width: 640px) {
  .rotating-text-main {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
  }
}

@media (min-width: 768px) {
  .rotating-text-main {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
}

@media (min-width: 640px) {
  .rotating-text-demo {
    font-size: 1.875rem;
    line-height: 2.25rem;
    padding: 5rem;
  }
}

@media (min-width: 768px) {
  .rotating-text-demo {
    font-size: 3rem;
    line-height: 1;
    padding: 6rem;
  }
}

@media (prefers-color-scheme: dark) {
  .rotating-text-demo {
    color: var(--muted);
  }
}

[fr1g]

Sorry for a late reply. Here's the situation recording

After reading your demo code I found seems because I'm not using motion.p tags from framers and that made my result seems weird. Now I'm trying on your code here, thanks for replying again :)

UPDATE

Tried the code from your reply but still nothing changed. Here's how I inserted:

<div className="rotating-text-demo">
    <motion.p className="rotating-text-ptag flex items-center space-x-4" layout>
        <motion.span
            className="pt-0.5 sm:pt-1 md:pt-2"
            layout
            transition={{ type: "spring", damping: 30, stiffness: 400 }}
        >
            Creative{" "}
        </motion.span>
        <RotatingText
            texts={["LauncherX", "ProjBobcat", "ConnectX", "P2P", "CMFS"]}
            mainClassName="rotating-text-main text-4xl px-2 sm:px-2 md:px-3 bg-amber-400 text-black overflow-hidden py-0.5 sm:py-1 md:py-2 rounded-lg"
            staggerFrom={"last"}
            initial={{ y: "100%" }}
            animate={{ y: 0 }}
            exit={{ y: "-120%" }}
            staggerDuration={0.025}
            splitLevelClassName="rotating-text-split"
            transition={{ type: "spring", damping: 30, stiffness: 400 }}
            rotationInterval={2000}
        />
    </motion.p>
</div>

[DavidHDev]

@fr1g of course it won't work without all the extra css I also provided above. Again, the RotatingText component is ONLY meant to help you handle the rotation animation, not the container styles as well, so everything else is in your hands.

[fr1g]

in this case, could you please teach me how to make the box animation as your demo?发自我的 iPhone在 2025年2月18日，12:35，David ***@***.***> 写道： @fr1g of course it won't work without all the extra css I also provided above. Again, the RotatingText component is ONLY meant to help you handle the rotation animation, not the container styles as well, so everything else is in your hands. —Reply to this email directly, view it on GitHub, or unsubscribe.You are receiving this because you were mentioned.Message ID: ***@***.***>