Shake Animation

Sample page

Link

Install

npm

npm i shake-animation

cdn

<script src="https://unpkg.com/shake-animation@latest/dist/index.umd.js"></script>

Report errors and suggestions

Gmail

Change log

| Version | Log | |---------|---------------| | 1.0.2 | Update Readme |

1. Start shake animation

Start shake animation

let element = document.querySelector('.shake');
let shake = new Shake(element); // create new and regist from Shake.instance

shake.start('horizontal');
// or
document.querySelector('.shake').shake().start('horizontal'); // get from Shake.instace if exiest or create new and regist from Shake.instance

Start shake animation with animation speed

let element = document.querySelector('.shake');
let shake = new Shake(element); // create new and regist from Shake.instance

shake.start('horizontal', 'fast');
// or
document.querySelector('.shake').shake().start('horizontal', 'fast'); // get from Shake.instace if exiest or create new and regist from Shake.instance

Start shake animation with animation speed and duration

let element = document.querySelector('.shake');
let shake = new Shake(element); // create new and regist from Shake.instance

shake.start('horizontal', 'fast', 1000); // animation for 1s
// or
document.querySelector('.shake').shake().start('horizontal', 'fast', 1000); // get from Shake.instace if exiest or create new and regist from Shake.instance

Start shake animation n times

let element = document.querySelector('.shake');
let shake = new Shake(element); // create new and regist from Shake.instance

shake.start('horizontal', 'fast', Shake.cycle(2)); // animation for 2 times
// or
document.querySelector('.shake').shake().start('horizontal', 'fast', Shake.cycle(2)); // get from Shake.instace if exiest or create new and regist from Shake.instance

2. Stop shake animation

shake.stop();
// or
document.querySelector('.shake').shake().stop('horizontal'); // release from Shake.instance

Supported shake animation type

Supported shake animation type include tilt, horizontal, vertical, jump, pulse, blur.

export type ShakeAnimation = 'tilt' | 'horizontal' | 'vertical' | 'jump' | 'pulse' | 'blur';

Supported shake animation speed

Supported shake animation speed include slow, medium, fast.

export type ShakeSpeed = 'slow' | 'medium' | 'fast';