A simple React component that animates text using Motion.
- Smooth slide-in animation for text
- Customizable delay and duration
- Supports child elements animation delay
demoSlide.mp4
Then, install this component:
npm install slide-in-textimport React from "react";
import SlideInText from "slide-in-text";
export default function SlideInTextDemo() {
return (
<div className="relative justify-center">
<SlideInText
text="SlideInText"
className="text-blue-600 font-bold text-4xl mb-8"
delay={0.5}
duration={1}
children={0.1}
/>
</div>
);
}| Prop | Type | Default | Description |
|---|---|---|---|
text |
string |
"" |
Text to animate |
delay |
number |
0 |
Delay before animation starts (sec) |
duration |
number |
0.5 |
Animation duration (sec) |
className |
string |
"" |
Custom class for styling |
children |
number |
0.1 |
Adds delay between the start of each child animation |
This project is MIT Licensed. Feel free to use and modify it!