Skip to content

abin-karukappallil/Slide-In-Text

Repository files navigation

SlideInText

DOWNLOADS📈

NPM Downloads


A simple React component that animates text using Motion.

🚀 Features

  • Smooth slide-in animation for text
  • Customizable delay and duration
  • Supports child elements animation delay

Demo

demoSlide.mp4

📦 Installation

Then, install this component:

npm install slide-in-text

🔧 Usage

import 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>
  );
}

📖 Props

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

📝 License

This project is MIT Licensed. Feel free to use and modify it!

About

simple React component that animates text using Motion

Resources

License

Stars

Watchers

Forks

Packages

No packages published