title: Javascript shake html element
body: <p>I'm trying to shake an html element for my game.</p>
  
  <p>I found this code here:</p>
  
  <pre><code>shake = function (sprite, magnitude = 16, angular = false) {
  
    //A counter to count the number of shakes
    var counter = 1;
  
    //The total number of shakes (there will be 1 shake per frame)
    var numberOfShakes = 10;
  
    //Capture the sprite's position and angle so you can
    //restore them after the shaking has finished
    var startX = sprite.x,
        startY = sprite.y,
        startAngle = sprite.rotation;
  
    // Divide the magnitude into 10 units so that you can 
    // reduce the amount of shake by 10 percent each frame
    var magnitudeUnit = magnitude / numberOfShakes;
  
    //The `randomInt` helper function
    var randomInt = (min, max) =&gt; {
      return Math.floor(Math.random() * (max - min + 1)) + min;
    };
  
    //Add the sprite to the `shakingSprites` array if it
    //isn't already there
    if(shakingSprites.indexOf(sprite) === -1) {
      //console.log("added")
      shakingSprites.push(sprite);
  
      //Add an `updateShake` method to the sprite.
      //The `updateShake` method will be called each frame
      //in the game loop. The shake effect type can be either
      //up and down (x/y shaking) or angular (rotational shaking).
      sprite.updateShake = () =&gt; {
        if(angular) {
          angularShake();
        } else {
          upAndDownShake();
        }
      };
    }
  
    //The `upAndDownShake` function
    function upAndDownShake() {
  
      //Shake the sprite while the `counter` is less than 
      //the `numberOfShakes`
      if (counter &lt; numberOfShakes) {
  
        //Reset the sprite's position at the start of each shake
        sprite.x = startX;
        sprite.y = startY;
  
        //Reduce the magnitude
        magnitude -= magnitudeUnit;
  
        //Randomly change the sprite's position
        sprite.x += randomInt(-magnitude, magnitude);
        sprite.y += randomInt(-magnitude, magnitude);
  
        //Add 1 to the counter
        counter += 1;
      }
  
      //When the shaking is finished, restore the sprite to its original 
      //position and remove it from the `shakingSprites` array
      if (counter &gt;= numberOfShakes) {
        sprite.x = startX;
        sprite.y = startY;
        shakingSprites.splice(shakingSprites.indexOf(sprite), 1);
      }
    }
  
    //The `angularShake` function
    //First set the initial tilt angle to the right (+1) 
    var tiltAngle = 1;
  
    function angularShake() {
      if (counter &lt; numberOfShakes) {
  
        //Reset the sprite's rotation
        sprite.rotation = startAngle;
  
        //Reduce the magnitude
        magnitude -= magnitudeUnit;
  
        //Rotate the sprite left or right, depending on the direction,
        //by an amount in radians that matches the magnitude
        sprite.rotation = magnitude * tiltAngle;
        counter += 1;
  
        //Reverse the tilt angle so that the sprite is tilted
        //in the opposite direction for the next shake
        tiltAngle *= -1;
      }
  
      //When the shaking is finished, reset the sprite's angle and
      //remove it from the `shakingSprites` array
      if (counter &gt;= numberOfShakes) {
        sprite.rotation = startAngle;
        shakingSprites.splice(shakingSprites.indexOf(sprite), 1);
        //console.log("removed")
      }
    }
  
  }
  </code></pre>
  
  <p>However it only works for canvas sprites. How can I get it to work with HTML elements? Thanks.</p>