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);