I'm having trouble locating the issue in my code, and the text reveal feature isn't working. Interestingly, a simple animation works fine, indicating that there's no problem with the import or library:
import { motion } from "framer-motion";
const banner = {
animate: {
transition: {
delayChildren: 0.4,
staggerChildren: 0.1,
},
},
};
const letterAni = {
initial: { y: 400 },
animate: {
y: 0,
transition: {
ease: [0.6, 0.01, -0.05, 0.95],
duration: 1,
},
},
};
const AnimatedLetters = ({ title }) => (
<motion.span
className="row-title"
variants={banner}
initial="initial"
animate="animate"
>
{[...title].map((letter, i) => (
<motion.span className="row-letter" variants={letterAni} key={i}>
{letter}
</motion.span>
))}
</motion.span>
);
export default function TestFramer() {
return (
<div className="text-9xl">
<AnimatedLetters title="title" />
</div>
);
}