shake-animation
TypeScript icon, indicating that this package has built-in type declarations

1.0.3 • Public • Published

Shake Animation

NPM
NPM Downloads GitHub Repo stars
Static Badge

Sample page

Install

npm

npm i shake-animation

cdn

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

Report errors and suggestions

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

Package Sidebar

Install

npm i shake-animation

Weekly Downloads

7

Version

1.0.3

License

MIT

Unpacked Size

82.1 kB

Total Files

11

Last publish

Collaborators

  • junyoung_park