Animating with Framer Motion (Appearing Text)
## Intro
Wanted to create appearing text as if it were written or how a language model replies. Framer Motion ([framer.com/motion](https://www.framer.com/motion/)) has been an interesting tool for various animation purposes.
## Source & Demo
Source - N/A (in report)
Demo - [smartdatahub.io/about](https://smartdatahub.io/about)
## Study
**AnimatedText.tsx**
```typescript
'use client';
import { motion } from 'framer-motion';
import React from 'react';
interface AnimatedTextProps {
text: string;
}
export const AnimatedText = ({ text }: AnimatedTextProps) => {
// split text into words
const words = Array.from(text.split(' '));
// Variants for Container
const container = {
hidden: { opacity: 0 },
visible: (i = 1) => ({
opacity: 1,
transition: { staggerChildren: 0.01, delayChildren: 0.02 * i },
}),
};
// variants for each letter
const child = {
visible: {
opacity: 1,
x: 0,
y: 0,
transition: {
type: 'spring',
damping: 12,
stiffness: 100,
},
},
hidden: {
opacity: 0,
x: -20,
y: 10,
transition: {
type: 'spring',
damping: 12,
stiffness: 100,
},
},
};
const animatedText = words.map((word) => (
<div key={crypto.randomUUID()} className="whitespace-nowrap">
{Array.from(word).map((letter) => (
<motion.span key={crypto.randomUUID()} variants={child}>
{letter === ' ' ? '\u00A0' : letter}
</motion.span>
))}
</div>
));
return (
<motion.div
className="overflow-hidden flex-wrap flex text-base md:text-lg gap-2"
variants={container}
initial="hidden"
animate="visible"
>
{animatedText}
</motion.div>
);
};
```