React-text-reveal NPM

Create/Export your custom reveal here: Motionlab

Features 🎉

Simple – Uses basic CSS transition animations.
Flexible – Not dependent on Intersection Observer API. Trigger the animation whenever you want.
Advanced Control – Customize every aspect of the reveal to match any design.

Getting Started

Install:
```
npm install --save react-text-reveal
```
Use:

<Reveal
    canPlay={true}
    ease={"cubic-bezier(0,0.4,0.4,1)"}
>
    WELCOME!
</Reveal>

<WordReveal
    animateOpacity={true}
    canPlay={true}
    copy={["Make.","Something.","Move."]}
    direction={"bottom"}
    duration={2500}
    ease={"cubic-bezier(0,0.4,0.4,1)"}
    offset={"225px"}
    perspective={true}
    perspectiveFOV={1000}
    perspectiveX={158}
    perspectiveY={13}
    perspectiveZ={0}
    wordOffsetDelay={200}
/>

<MultilineReveal
    animateOpacity={true}
    canPlay={true}
    copy={["Make.","Something.","Move."]}
    direction={"top"}
    duration={1275}
    ease={"cubic-bezier(0,0.4,0.4,1)"}
    offset={"45px"}
    multilineMasking={true}
    multilineOffsetDelay={200}
    perspective={true}
    perspectiveFOV={1000}
    perspectiveX={0}
    perspectiveY={13}
    perspectiveZ={0}
/>

<CharacterReveal
    animateOpacity={true}
    canPlay={true}
    characterOffsetDelay={95}
    characterWordSpacing={10}
    copy={["Make.","Something.","Move."]}
    direction={"bottom"}
    duration={1875}
    ease={"cubic-bezier(0,0.4,0.4,1)"}
    offset={'120px'}
    perspective={true}
    perspectiveX={158}
    perspectiveY={13}
    perspectiveZ={0}
    perspectiveFOV={1000}
    multilineMasking={false}
    multilineOffsetDelay={575}
/>

API

Basic Properties

These props can be used on all 4 component exports. (<Reveal />, <WordReveal/>, <MultilineReveal />, <CharacterReveal />)

className (string)
This prop allows you to append your own custom className to the outer div of the component.
canPlay (boolean) default: false This prop starts your animation. You must start with this prop set to false.
ease (string) default: 'ease-out' This prop allows you to control the transition-timing-function of your animation.
from (string) default: 'bottom' This prop allows you to control which direction your animation starts from.
duration (float) default: 1275 This prop allows you to control the transition-duration of you animation in ms.
offset (string) default: '45px' The distance your animation travels. Set as as string so you can use vw, vh, em , rem, etc.
opacityDelay (float) default: 0 The amount of delay in ms for the 'opacity' property.
perspective (boolean) default: false Whether your animation uses CSS 3D perspective.
perspectiveFOV (integer) default: 1000 This prop sets the perspective (in px) property of your animation. (This requires the 'perspective' prop be set to 'true')
perspectiveX (integer) default: 0 This prop sets the rotateX() property of your animation. (This requires the 'perspective' prop be set to 'true')
perspectiveY (integer) default: 0 This prop sets the rotateY() property of your animation. (This requires the 'perspective' prop be set to 'true')
perspectiveZ (integer) default: 0 This prop sets the rotateZ() property of your animation. (This requires the 'perspective' prop be set to 'true')

`<Reveal />` Specific Properties

These props can be used for the <Reveal /> component.

copy (children)
This can be any valid jsx.

`<WordReveal />` Specific Properties

These props can be used for the <WordReveal /> component.

copy (array<string>)
The copy to be animated. Separate array values represent new lines (\n).
multilineMasking (boolean) default: false Whether each line of your animation should be masked out by its boundary box.
multilineOffsetDelay (integer) default: 200
The time delay (in ms) between each separate line of your animation.
wordOffsetDelay (integer) default: 200
The time delay (in ms) between each separate word of your animation.

`<MultilineReveal />` Specific Properties

These props can be used for the <MultilineReveal /> component.

copy (array<string>)
The copy to be animated. Separate array values represent new lines (\n).
multilineMasking (boolean) default: false Whether each line of your animation should be masked out by its boundary box.
multilineOffsetDelay (integer) default: 200
The time delay (in ms) between each separate line of your animation.

`<CharacterReveal />` Specific Properties

These props can be used for the <CharacterReveal /> component.

copy (array<string>)
The copy to be animated. Separate array values represent new lines (\n).
multilineMasking (boolean) default: false
Whether each line of your animation should be masked out by its boundary box.
multilineOffsetDelay (integer) default: 200
The time delay (in ms) between each separate line of your animation.
characterOffsetDelay (integer) default: 25
The time delay (in ms) between each separate character of your animation.
characterWordSpacing (string) default: '.15em'
The space between the words of each line. (Normal css text styling doesn't work properly, so spacing must be added manually.)