react-animated-text-wipe
v0.3.1
Published
React component that aids in the creation of an animated background text wipe effect.
Downloads
8
Maintainers
Readme
react-animated-text-wipe
Small React component package that aids in the creation of an animated "background text wipe" effect.
<AnimatedTextWipe
firstColor='transparent'
secondColor='black'
textColor='#FFFFFF'
direction='right'
difference='true'
antialiasing='true'
speed='1'
>
Child content goes here!
<AnimatedTextWipe/>
- firstColor - #6-digit hex colour code or colour keyword. It's the first (and last) background colour to appear on the generated gradient; it will transition from firstColor -> secondColor -> firstColor and then repeat.
- secondColor - #6-digit hex colour code or colour keyword. It's the second (middle) background colour to appear on the generated gradient.
- textColor - #6-digit hex colour code or colour keyword. Self-explanatory, it's the colour of the text overlaying the background.
- direction - string (left | right | up | down). The direction in which the animation will render.
- difference - string (true | false). Enable the mix-blend-mode CSS property to create the "text vs. background" contrasting effect.
- antialiasing - string (true | false). Helps to smoothen the font/child text when using the difference option. Sometimes the font may appear heavier (font-weight); this helps to mitigate that but YMMV.
- speed - int. Speed of the animation in seconds, the lower the value, the faster.