Stagger Text Reveal Animation React JS

THIS PACKAGE CONTAINS TWO COMPONENTS

• StaggerTextReveal

• StaggerTextChange

Live Demo Link

Find this on npm

Find this on Github

Introduction

The stagger text reveal animation package helps you to apply stagger effect to your text. Just pass your text as a prop. The components are fully customizable and responsive. The package is available on npm

This animation is done using css and javascript in React Js so no need of any external libraries like anime.js, Spring etc

Installation

npm install stagger-text-reveal-animation;

StaggerTextReveal

Helps you to achieve text reveal animation.

Importing

import { StaggerTextReveal } from "stagger-text-reveal-animation";

Usage

import React from 'react';
import { StaggerTextReveal } from "stagger-text-reveal-animation";

export const Component = () => {

    return (
           
        <div>
            <StaggerTextReveal
               text={"Obaid Nadeem"}
            />
        </div>
                    
    );
}

It's easy as that :D

Props

Use these props to customize your text animation.

| Prop | Type | Description | Default Value | |:-------------: | :----------: |:-------------:| :-----: | | text | String |Takes your text as string and animates it. | TEXT PLACEHOLDER | | fontFamily | String |Applies your font family | -- | | fontWeight | String |Customize font Weight | bolder | | fontSize | Number |Pass the font size as number. Calculates value in pixels. | 48px | | color | String |Obv pass the color of text | #282828 | | duration | Number |Duration for animation. Reads values as seconds. | 0.7s | | stagger | Number |Animation is based on stagger value. Pass this value to customize the staggering effect. | 60 | | direction | String |Pass "down" as string, the text will reveal from top to bottom. | up | | reverse | Boolean |Pass true to reverse the reveal animaion. Conceals the staggering text. | false | | triggerAfter | Number |Gives delay to animation. Your animation will be triggered after respective seconds you entered. | 0 | | wordSpacing | Number | Increases or Decreases space between words. Calculates value in pixels. | 0 | | unit | string | This is a very important prop to make component responsive. Pass your value as string in "rem" or "vw" whatever you prefer. | px | | width | Number |Controls width of the Sentance. Calculates value in pixels. | If you don't pass width as a prop, it will be 100vw initially. | | height | Number |Controls height of the Sentance. Calculates value in pixels. | 48px |

Example

import React from 'react';
import { StaggerTextReveal } from "stagger-text-reveal-animation";

export const Component = () => {

    return (
           
        <div>
            <StaggerTextReveal
                text={"THE ILLUSION OF"}
                fontFamily={"'Antic Didone', serif"}
                fontWeight={"lighter"}
                fontSize={90}
                duration={0.9}
                stagger={50}
                direction={"down"}
                reverse={true}
                triggerAfter={2000}
                unit = {"rem"}
                wordSpacing={200}
                width={850}
                height={150}
            />
        </div>
                    
    );
}

^ all the values are read in pixels and seconds.

Responsiveness

The component can be made responsive using vw or rem or any other unit you want to use.

    unit={"unit"}

Using vw will make the componenet shift size according to view port width.

When using rem you would have to define rem values for different viewport widths in css. You can search more about how rem works on google.

@media screen and (max-width: 600px) {
  .root {
      font-size: 8px;
    }
}

StaggerTextChange

Helps you to achieve text change reveal animation.

Importing

import { StaggerTextChange } from "stagger-text-reveal-animation";

Usage

import React from 'react';
import { StaggerTextChange } from "stagger-text-reveal-animation";

export const Component = () => {

    return (
           
        <StaggerTextChange
                        text={"INITIAL TEXT"}
                        changeTo={"CHANGED TEXT"}
                        fontFamily={"'Antic Didone' serif"}
                        fontWeight={"lighter"}
                        fontSize={6}
                        duration={0.9}
                        stagger={10}
                        direction={"down"}
                        unit={"vw"}
                        triggerAfter={500}
                        wordSpacing={200}
                        width={850}
                        height={100}
        />
                    
    );
}

Props

Same props as StaggerTextReveal but has an additional props of changeTo

| Prop | Type | Description | Default Value | |:-------------: | :----------: |:-------------:| :-----: | | changeTo | String |Takes your text as string and animates it. | CHANGED TEXT |

reverse prop dosen't works for this component.

Responsiveness

Same as StaggerTextReveal

LICENSE

MIT © Obaid Nadeem