JSPM

shake-animation

1.0.2
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 4
  • Score
    100M100P100Q21662F
  • License MIT

The shake-animation library is a versatile tool for managing CSS animations on HTML elements. It provides a straightforward API to apply a variety of predefined animations, including tilt, horizontal shake, vertical shake, jump, pulse, and blur, to HTML elements. The library ensures compatibility with different browsers by handling various CSS prefixes for animations and keyframes.

Package Exports

  • shake-animation

Readme

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

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