char-animation

Simple text animator: splits 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 charAnimation from 'https://cdn.skypack.dev/char-animation';
</script>

README

Char Animation

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 animations

How to...

Installation

$ npm i -S char-animation

Import package

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

import charAnimation from './node_modules/char-animation/dist/char-animation.js';

Use

charAnimation({selector, animation, color, stroke});

Parameters

The function receive an object with the follow 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
color string Color format:
#hex | rgb | rgba | hsl | hsla
changes the font color when the cursor passes over the chars		 Optional
stroke string Color format:
#hex | rgb | rgba | hsl | hsla
changes the stroke color when the cursor passes over the chars		 Optional

License

MIT