char-animator

Simple text animator: split strings text into single chars and applies animations to each one when the cursor passes over them.

Usage no npm install needed!

<script type="module">
  import charAnimator from 'https://cdn.skypack.dev/char-animator';
</script>

README

Char Animator

package version npm downloads GitHub code size in bytes

Simple text animator: splits strings text into single chars and applies animations to each one when the cursor passes over them.
Example Animatons

How to...

Installation

$ npm i -S char-animator

Import package

To use, you'll need to import charAnimator into your js file.

import charAnimator from './node_modules/char-animator/dist/char-animator.js';

Use

charAnimator(selector, animation, text-color, text-stroke);

Parameters

Param Type Description Default
selector string Valid CSS selector:
class | id | tag
element which the animation will be applied		 Required
animation string Options:
rubberBand | bounce | pulse | tada | swing		 Required
text-color string Color format:
#hex | rgb | rgba | hsl | hsla
changes the font color when the cursor passes over the chars		 Optional
text-stroke string Color format:
#hex | rgb | rgba | hsl | hsla
changes the stroke color when the cursor passes over the chars		 Optional

License

MIT