I am trying to implement this text wave animation - https://codepen.io/alvarotrigo/pen/xxLvyOG - in my code. I want to let wave one word in my text in React Typescript with inline styling but cant get it to work. I think I declared the waiviy span and keyframes wrong in my styles or did not use it properly inline? I know the style="--i:3" in the spans example is missing because it throws errors for me and I am not sure how to apply it inline. Can anyone help out and say where my error is please?
import React from 'react';
import Typography from '@mui/material/Typography';
const styles = {
waviy: {
position: 'relative',
-webkitBoxReflect: "below -20px linear-gradient(transparent, rgba(0,0,0,.2))",
fontSize: '60px',
},
'waviy span': {
fontFamily: 'Alfa Slab One, cursive',
position: 'relative',
display: 'inline-block',
textTransform: 'uppercase',
animation: 'waviy 1s infinite',
animationDelay: 'calc(.1s * var(--i))',
},
'@keyframes waviy': {
'0%,40%,100%': {
transform: 'translateY(0)',
},
'20%': {
transform: 'translateY(-20px)',
},
},
};
function App() {
return (
<Typography variant={'h3'} fontWeight={'bold'}>
All Your
<Typography sx={styles.waiviy}>
<span style={{ color: '#fbbf2c' }}>p</span>
<span style={{ color: '#fbbf2c' }}>l</span>
<span style={{ color: '#fbbf2c' }}>a</span>
<span style={{ color: '#fbbf2c' }}>n</span>
<span style={{ color: '#fbbf2c' }}>t</span>
<span style={{ color: '#fbbf2c' }}>s</span>
</Typography>
in One Place
</Typography>
);
}
export default App;
I have attached link to the codesandbox hope that helps you
UPDATED CODESANDBOX : https://codesandbox.io/s/lucid-mclaren-qytt3q?file=/src/App.tsx:0-1271
UPDATED CODE (using .ts): I extended the React.CSSProperties interface to create my custom interface and then used it in the styles prop. This does not throw any tslint errors ;)
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;
I think that react shouldn't make your code complex, you can make it very simple way like vanilla js.
Don't think too complicated. Let's make it easy.
First, copy all CSS from Codepen to app.css.
import React from 'react';
import './App.css';
function App() {
const str = 'text animation'
return (
<main>
<div className="waviy">
{
str.split('').map(function (letter, index) {
// important line
// jsx style syntax
return <span style={{
'--i': index
}} key={letter + index.toString()}>{letter}</span>
})
}
</div>
</main>
);
}
export default App;
All be done, no more code.
Your problem should be how to add CSS variables in JSX, that is very easy. style={{key: value}}
Try it by yourself! Hope it can help you.