Pulse animation with Web Animations API inspired by Pulsator
npm install pulsator
npm install pulsator --save+ import pulsator.js in your JavaScript files
import Pulsator from "pulsator"
+ create Pulsator instance with arguments
* options: object for changing pulsator
const pulsator = new Pulsator(options)
example(below is a part of Demo)
``typescript
import Pulsator, {Options} from "pulsator";
const options: Options = {
style: {
width: "20px",
height: "20px",
},
color: {
r: 244,
g: 67,
b: 54
},
duration: 1200,
iterations: 10,
};
const parent = document.querySelector(".demo-space");
const pulsator = new Pulsator(options);
const el = pulsator.getElement();
el.style.position = "absolute";
if (parent === null) {
throw new Error('Parent node is null');
}
parent.appendChild(el);
parent.addEventListener('click', (e) => {
if (e instanceof MouseEvent) {
pulsator.startByMouseEvent(e)
}
});
el.addEventListener('mouseover', () => pulsator.pause());
el.addEventListener('mouseleave', () => pulsator.start());
window.addEventListener('keydown', e => {
switch(e.key) {
case 'Escape':
pulsator.stop();
break;
case 'Enter':
pulsator.reverse();
break;
}
});
`
`typescript``
export type Options = Partial<{
style: Partial<{
width: string | number; // default: 15px
height: string | number; // default: 15px
}>;
duration: number; // default: 1500
iterations: number; // default: Infinity
color: Partial<{
r: number; // default: 255
g: number; // default: 0
b: number; // default: 0
}>
}>;