JavaScript UI: Shake Element

By Xah Lee. Date:

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

// code based on
// JavaScript Book by David Flanagan

// Convert element e to relative positioning and "shake" it left and right.
// The first argument can be an element object or the id of an element.
// If a function is passed as the second argument, it will be invoked
// with e as an argument when the animation is complete.
// The 3rd argument specifies how far to shake e. The default is 5 pixels.
// The 4th argument specifies how long to shake for. The default is 500 ms.

function shake(e, oncomplete, distance, time) {
    // Handle arguments
    if (typeof e === "string") e = document.getElementById(e);
    if (!time) time = 500;
    if (!distance) distance = 5;

    // Save the original style of e, Make e relatively positioned, Note the animation start time, Start the animation
    var originalStyle =; = "relative";
    var start = (new Date()).getTime();

    // This function checks the elapsed time and updates the position of e.
    // If the animation is complete, it restores e to its original state.
    // Otherwise, it updates e's position and schedules itself to run again.
    function animate() {
        var now = (new Date()).getTime();
        // Get current time
        var elapsed = now-start;
        // How long since we started
        var fraction = elapsed/time;
        // What fraction of total time?
        if (fraction < 1) {
            // If the animation is not yet complete
            // Compute the x position of e as a function of animation
            // completion fraction. We use a sinusoidal function, and multiply
            // the completion fraction by 4pi, so that it shakes back and
            // forth twice.
            var x = distance * Math.sin(fraction*4*Math.PI);
   = x + "px";
            // Try to run again in 25ms or at the end of the total time.
            // We're aiming for a smooth 40 frames/second animation.
            setTimeout(animate, Math.min(25, time-elapsed));
        else {
            // Otherwise, the animation is complete
   = originalStyle // Restore the original style
            if (oncomplete) oncomplete(e);
            // Invoke completion callback

function shakeme (event13124) {

document.getElementById("id69917").addEventListener("click", shakeme , false);

The code is from [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]

JavaScript Fancy UI Examples

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

Or, Buy JavaScript in Depth

Patreon me $5. Ask me question on patreon