react-animated-text-wipe

Small React component package that aids in the creation of an animated "background text wipe" effect.

Preview:

Usage:

<AnimatedTextWipe
  firstColor='transparent'
  secondColor='black'
  textColor='#FFFFFF'
  direction='right'
  difference='true'
  antialiasing='true'
  speed='1'
>
  Child content goes here!
<AnimatedTextWipe/>

Props:

• 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.