Stagger Text Reveal Animation In React

The stagger text reveal animation helps you to apply stagger effect to your text.

How to use it:

1. Install and import the StaggerText.

# NPM
$ npm i stagger-text-reveal-animation

import React from 'react';
import StaggerText from "stagger-text-reveal-animation";

2. Add the <StaggerText /> component to the app and pass your text as a prop.

<StaggerText
   text={"Vue Script"}
/>

3. Available component props to customize the reveal animation.

<StaggerText
  text={"Stagger Text"}
  fontFamily={"'Inter', serif"}
  fontWeight={"bolder"}
  fontSize={48}
  duration={0.7}
  color={"#282828"}
  stagger={60}
  direction={"up"}
  reverse={false}
  triggerAfter={0}
  unit = {"px"}
  wordSpacing={0}
  width={850}
  height={48}
/>

Preview:

Download Details:

Author: ObaidNadeem

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://github.com/ObaidNadeem/Stagger-Text-Reveal-Animation-CSS

License: MIT