merdan
/
turkmen-tv-front
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

animated text added on lottery page

This commit is contained in:
Kakabay 2025-01-08 18:33:42 +05:00
parent 7850520851
commit f0bdc8de3e
1 changed files with 22 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
components/common/AnimatedText.tsx
View File

@ -4,45 +4,47 @@ import { motion } from 'framer-motion';
interface AnimatedTextProps { interface AnimatedTextProps {
text: string; text: string;
className?: string; className?: string;
wordClassName?: string; characterClassName?: string;
initialY?: number; initialY?: number;
duration?: number; exitY?: number;
wordDelay?: number; duration: number;
characterDelay?: number;
} }
const AnimatedText = ({ const AnimatedText = ({
text, text,
className = '', className = '',
wordClassName = '', characterClassName = '',
initialY = -100, initialY = -100,
duration = 0.5, exitY = 100,
wordDelay = 0.2, duration,
characterDelay = 0,
}: AnimatedTextProps) => { }: AnimatedTextProps) => {
const words = text.split(' '); const characters = text.split('');
return ( return (
<div className="overflow-hidden"> <div className="overflow-hidden">
<motion.p <motion.p
className={className} className={cn(`flex `, className)}
initial={{ y: initialY, opacity: 0 }} initial={{ translateY: initialY, opacity: 0 }}
animate={{ y: 0, opacity: 1 }} animate={{ translateY: 0, opacity: 1 }}
exit={{ y: '100%', opacity: 0 }}> exit={{ translateY: exitY, opacity: 0 }}>
{words.map((word, i) => ( {characters.map((character, i) => (
<motion.span <motion.div
key={i} key={i}
initial={{ y: initialY, opacity: 0 }} initial={{ translateY: initialY, opacity: 0 }}
animate={{ y: 0, opacity: 1 }} animate={{ translateY: 0, opacity: 1 }}
exit={{ y: '100%', opacity: 0 }} exit={{ translateY: exitY, opacity: 0 }}
transition={{ transition={{
duration, duration,
delay: i * wordDelay, delay: characterDelay + (i / 2) * duration,
ease: 'easeOut', ease: 'easeOut',
}} }}
className={cn(`inline-block mx-2`, wordClassName, { className={cn(`block `, characterClassName, {
'animate-dotsFlash': text === '...', 'animate-dotsFlash': text === '...',
})}> })}>
{word} {character}
</motion.span> </motion.div>
))} ))}
</motion.p> </motion.p>
</div> </div>