JavaScript UI: Shake Element

By Xah Lee. Date: . Last updated: .

This page shows you how to shake a HTML element using JavaScript.

here's the HTML code:

<button id="id69917">shake</button>

here's the JavaScript code:

//-*- coding: utf-8 -*-
// 2013-07-10, 2018-05-27
// Copyright 2018 by Xah Lee
// JavaScript UI: Shake Element http://xahlee.info/js/js_shake_box.html

// code originally based on
// JavaScript Book by David Flanagan
// http://xahlee.info/comp/js_book_man_made_complexity.html

const shake = ((e, distance = 5, duration = 500) => {
       // shake element e left and right.
    const originalStyle = e.style.cssText;
    e.style.position = "relative";
    const startTime = (new Date()).getTime();

    const animateIt = (() => {
        const now = (new Date()).getTime();
        const elapsedTime = now - startTime;
        const fraction = elapsedTime/duration;

        if (fraction < 1) {
        let x = distance * Math.sin(fraction*4*Math.PI);
            e.style.left = x + "px";
            setTimeout(animateIt, Math.min(25, duration - elapsedTime));
        }
        else {
            e.style.cssText = originalStyle;
        }
    });

    animateIt();

});

document .getElementById("id69917").addEventListener("click", ((e) => {  shake(e.target) }) , false);

The code is based on [JavaScript Definitive Guide (6th ed.) By David Flanagan. @ Buy at amazon ]

[see JavaScript Book by David Flanagan, and the Man-made Complexity in Computer Language]

Web Scripting Examples

  1. Disable Right Click
  2. document.write
  3. Image Rollover
  4. Pop-up New Window
  5. Digital Clock
  6. Stopwatch
  7. Fade a Element
  8. Fade a Element Using CSS Transition
  9. Shake Element
  10. How to Create Tooltip
  11. Falling Snow Effect
  12. JavaScript: Floating Box Following Scroll
Liket it? Put $5 at patreon.

Or, Buy JavaScript in Depth

If you have a question, put $5 at patreon and message me.

Web Dev Tutorials

  1. HTML
  2. Visual CSS
  3. JS in Depth
  4. JS Reference
  5. DOM
  6. SVG
  7. Web Dev Blog