Smooth Resizing Animation with Rotating Text

[SpyGuy0215]

I was looking at the animation for rotating text on the website and noticed that the size of the overall element transitions when the length of the text changes. I tried my best to do this with tailwind, both by editing the RotatingText component and in the page using the component but I'm just not able to replicate it. How is it done on the website?

[DavidHDev]

Hello, don't forget you have access to the code in this repository, meaning all of it, so you can just open the specific demo component to check: https://github.com/DavidHDev/react-bits/blob/main/src/demo/TextAnimations/RotatingTextDemo.jsx

The part you're looking for is here:

          <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>

And the CSS that goes with it is here:

.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: 0.125rem 0.5rem;
  background-color: #5227FF;
  color: #fff;
  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-demo {
    font-size: 1.875rem;
    line-height: 2.25rem;
    padding: 5rem;
  }

  .rotating-text-main {
    padding: 0.25rem 0.5rem;
  }

  .rotating-text-split {
    padding-bottom: 0.25rem;
  }
}

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

  .rotating-text-main {
    padding: 0.5rem 0.75rem;
  }
}

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

RotatingText itself is simply a text animation, the demo on the docs was made like that just to spice things up a bit visually.

[SpyGuy0215]

Awesome, I didn't know that we had access to the components on the website. Thanks!