gfx

A collection of handy GFX and Animation functions

Example

https://tjb-webcomponents.github.io/tjb-gfx/

Components

Bounce

Google style circle placed at some elements that grows in size from there:

Add to project

Include via HTML

Include it:

import { bounce } from 'https://tjb-webcomponents.github.io/tjb-gfx/tjb-gfx.min.js'

Include via NPM

Console:

npm i -S tjb-gfx

Then in your code:

import { bounce } from 'tjb-gfx';

Useage

/**
 * Creates a circle that fills the entire div
 * Resolves a promise after the animation
 * @param {node} element
 * @param {boolean} cleanup whether or not to remove elements after animation
 * @return {promise}
 */
bounce(element, cleanup)
  .then(callback);

blink

Blink a node on and off. Useful to draw attention:

Add to project

Include via HTML

Include it:

import { blink } from 'https://tjb-webcomponents.github.io/tjb-gfx/tjb-gfx.min.js'

Include via NPM

Console:

npm i -S tjb-gfx

Then in your code:

import { blink } from 'tjb-gfx';

Useage

/**
 * Creates a circle that fills the entire div
 * Resolves a promise after the animation
 * @param {node} element
 * @param {boolean} cleanup whether or not to remove elements after animation
 * @return {promise}
 */
blink(element, cleanup)
  .then(callback);

shake

Shake a node on and off. Useful to draw attention:

Add to project

Include via HTML

Include it:

import { shake } from 'https://tjb-webcomponents.github.io/tjb-gfx/tjb-gfx.min.js'

Include via NPM

Console:

npm i -S tjb-gfx

Then in your code:

import { shake } from 'tjb-gfx';

Useage

/**
 * Shakes a node
 * Resolves a promise after the animation
 * @param {node} element
 * @param {boolean} cleanup whether or not to remove elements after animation
 * @return {promise}
 */
shake(element, cleanup)
  .then(callback);

Enjoy