-
-
Notifications
You must be signed in to change notification settings - Fork 952
Smooth Resizing Animation with Rotating Text #312
-
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?
Beta Was this translation helpful? Give feedback.
All reactions
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> <R...
Replies: 1 comment 1 reply
-
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.
Beta Was this translation helpful? Give feedback.
All reactions
-
Awesome, I didn't know that we had access to the components on the website. Thanks!
Beta Was this translation helpful? Give feedback.