Staggered Letter Pull Up Animation
Staggered letter pull up text animation.
S
t
a
g
g
e
r
e
d
L
e
t
t
e
r
P
u
l
l
U
p
Installation
Copy and paste the following code into your project.
"use client"
import { motion } from "framer-motion"
import { cn } from "@/lib/utils"
interface LetterPullupProps {
className?: string
words: string
delay?: number
}
export function LetterPullup({ className, words, delay }: LetterPullupProps) {
const letters = words.split("")
const pullupVariant = {
initial: { y: 100, opacity: 0 },
animate: (i: any) => ({
y: 0,
opacity: 1,
transition: {
delay: i * (delay ? delay : 0.05), // By default, delay each letter's animation by 0.05 seconds
},
}),
}
return (
<div className="flex justify-center">
{letters.map((letter, i) => (
<motion.h1
key={i}
variants={pullupVariant}
initial="initial"
animate="animate"
custom={i}
className={cn(
"font-display text-center text-4xl font-bold tracking-[-0.02em] text-black drop-shadow-sm dark:text-white md:text-4xl md:leading-[5rem]",
className
)}
>
{letter === " " ? <span> </span> : letter}
</motion.h1>
))}
</div>
)
}
Update the import paths to match your project setup.
Props
Prop | Type | Description | Default |
---|---|---|---|
className | string | The class name to be applied to the component | |
words | string | Text to animate | "Staggered Letter Pull Up" |
delay | number | Delay each letter's animation by this many seconds | 0.05 |