npm install --save react-text-reveal
<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)"}
multilineMasking={true}
multilineOffsetDelay={200}
offset={"45px"}
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)"}
multilineMasking={false}
multilineOffsetDelay={575}
offset={'120px'}
perspective={true}
perspectiveX={158}
perspectiveY={13}
perspectiveZ={0}
perspectiveFOV={1000}
/>
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 PropertiesThese props can be used for the <Reveal />
component.
<WordReveal />
Specific PropertiesThese 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 PropertiesThese 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 PropertiesThese 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.)
I'd love that.