animated-highlight.js v1.0.6

animated-highlight.js

Simple JS package to highlight DOM elements with some animation

Instalation

Browser

Download File

<script src="animated-highlight.js" type="module"></script>

NPM

npm i animated-highlight.js

YARN

yarn add animated-highlight.js

How to use

import animatedHighlight from 'animated-highlight.js';

const elem = document.getElementById('container');
const options = { speed: 'fast' };

animatedHighlight(elem, options);

// or just

animatedHighlight('container'); // with default options

Options

Available directions

• right top
• right
• right bottom
• bottom
• left bottom
• left
• left top
• top
• circle

Available speeds

• superfast
• fast
• medium
• slow
• superslow

Tremble values

• horizontal
• vertical

warning: requires element's position as 'relative', 'absolute' or 'fixed'

Examples

Directions sequence

const options = {
  directions: ['right top', 'circle'],
};

animatedHighlight('elementId', options);

Custom colors

const options = {
  directions: [
    'right top',
    'left top',
    'circle',
  ],
  colorA: 'rgb(51, 102, 204)',
  colorB: 'rgb(174, 194, 234)',
};

animatedHighlight('elementId', options);

Specific speed for each direction

const options = {
  directions: [
    'top',
    'bottom',
  ],
  colorA: '#b300b3',
  colorB: '#ff80ff',
  speeds: {
    'top': 'slow',
    'bottom': 'superfast',
  },
};

animatedHighlight('elementId', options);

Trembeling the element while animating

const options = {
  direction: 'circle',
  colorA: '#FFCCCC',
  colorB: '#ffffff',
  speed: 'slow',
  tremble: 'vertical',
  trembleMode: 'hard',
};

animatedHighlight('elementId', options);