Docs
Fade in out

Fade in out

Displays a fade in out component.

Loading...

Installation

Install the following dependencies:

npm install framer-motion

Copy and paste the Fade in out code into your project.

API Reference

Props

PropTypeDescription
textstringThe text to be displayed inside the component.
classNamestringOptional custom class for the container, defaults to text-4xl font-bold text-center.
transitionDurationnumberOptional duration for the fade-in/fade-out animation, defaults to 2.

Usage

export default function Demo() {
  return (
    <FadeInOut
      text="Fade In and Out"
      className="text-5xl font-bold text-center text-blue-500"
      transitionDuration={3}
    />
  )
};