Shake Elements Using jQuery And CSS Transforms - shake.js

shake.js is an ultra-light jQuery plugin that makes use of CSS3 transforms and transitions to implement a smooth shake animation on any DOM element within the document.

How to use it:

1. Load the shake.js plugin after the latest jQuery library.

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/shake.js"></script>

2. Apply the function shake function to an element you wish to animate. That's it.

<div id="shake">
  Shake Me!
</div>

$(function(){
  $('#shake').shake()
});

3. The jQuery script for the shake animation. Feel free to modify and override the code to create your own shake animation.

$.fn.shake = function(interval = 100){
    this.addClass('shaking');
    this.css('transition', 'all ' + (interval / 100).toString() + 's');
    setTimeout(() => {
        this.css('transform', 'translateX(-50%)');
    }, interval * 0);
    setTimeout(() => {
        this.css('transform', 'translateX(50%)');
    }, interval * 1);
    setTimeout(() => {
        this.css('transform', 'translateX(-25%)');
    }, interval * 2);
    setTimeout(() => {
        this.css('transform', 'translateX(25%)');
    }, interval * 3);
    setTimeout(() => {
        this.css('transform', 'translateX(-7%)');
    }, interval * 4);
    setTimeout(() => {
        this.css('transform', 'translateX(0%)');
    }, interval * 5);
    this.removeClass('shaking');
};

---

This awesome jQuery plugin is developed by moulson. For more Advanced Usages, please check the demo page or visit the official website.