Shoutout to @pratik-wadekar for the amazing help in creating a working text animation. However, I encountered an issue when testing it on various screen sizes and mobile devices - the animated word plants breaks into pieces like PLA on one line and NTS on the next. How can I prevent this from happening and keep the word intact?
I initially attempted to use
\xC2\xA0 – non-breaking space or word-wrap property allows long words to break, but there isn't an option to make a word unbreakable in the reverse case.
It seems that the CSS word-break: "keep-all property would be ideal, however, even with its application, the word still gets split on smaller screens.
Check out the Codepen link
And here's the code snippet from App.tsx:
import React from "react";
import { styled } from "@mui/material/styles";
import { Typography } from "@mui/material";
const AnimatedTypography = styled(Typography)`
& {
position: relative;
-webkit-box-reflect: below -20px linear-gradient(transparent, rgba(0, 0, 0, 0.2));
font-size: 60px;
}
& span {
color: #fbbf2c;
font-family: "Alfa Slab One", sans-serif;
position: relative;
display: inline-block;
text-transform: uppercase;
animation: waviy 1s infinite;
animation-delay: calc(0.1s * var(--i));
}
@keyframes waviy {
0%,
40%,
100% {
transform: translateY(0);
}
20% {
transform: translateY(-20px);
}
}
`;
interface Styles extends React.CSSProperties {
"--i": number;
}
function App() {
const string = "plants";
return (
<Typography variant={"h3"} fontWeight={"bold"}>
All Your
<AnimatedTypography>
{string.split("").map((char, idx) => {
const styles: Styles = {
"--i": idx + 1
};
return (
<span key={`${char}-${idx}`} style={styles}>
{char}
</span>
);
})}
</AnimatedTypography>
in One Place
</Typography>
);
}
export default App;