Animation using JavaScript

admin | Posted on May 13, 2021 |

JavaScript animations can handle things that CSS can’t. For instance, moving along a complex path, with a timing function different from Bezier curves, or an animation on a canvas.An animation can be implemented as a sequence of frames – usually small changes to HTML/CSS properties.

The idea behind Javascript-based animation is fairly simple; a number of DOM elements (<img />, <div> or otherwise) are moved around the page according to some sort of pattern determined by a logical equation or function.

EXAMPLE

<!DOCTYPE html>
<html>
<style>
#myContainer {
    width: 400px;
    height: 400px;
    position: relative;
    background: black;
}
#myAnimation {
    width: 50px;
    height: 50px;
    position: absolute;
    background-color: #FF4B4B;
    border-radius: 50px;
}
</style>
<body>
  <p>
   <button onclick="myMove()">Click Me</button> 
  </p>
  <div id ="myContainer">
    <div id ="myAnimation"></div>
  </div>
<script>
function myMove() {
   var elem = document.getElementById("myAnimation"); 
   var pos = 0;
   var id = setInterval(frame, 10);
   function frame() {
     if (pos == 350) {
        clearInterval(id);
      } else {
        pos++; 
        elem.style.top = pos + 'px'; 
        elem.style.left = pos + 'px'; 
        document.getElementById("myAnimation").style["boxShadow"] = "10px 30px 30px 5px white";
      }
   }
}
</script>
</body>
</html>

Leave a Reply Cancel reply