/char-animation

npm package that splits the text of HTML elements into individual chars and applies animations to each one when the cursor hovers them.

Primary LanguageJavaScriptMIT LicenseMIT

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

Example

charAnimation(
  {
    selector: "h1", 
    animation: "rubberBand",  
    color: "green", 
    stroke: "blue"
  }
);

License

MIT

Changelog

All notable changes to this project will be documented in this file.

The format is based on Keep a Changelog, and this project adheres to Semantic Versioning.

[1.1.2] - 2022-07-07

Removed

  • checkers for selector and style declaration

Fixed

  • font-size set to inherit for singleChar elements

Security

  • fix critical vulnerability on minist node module