How to animate using javascript?

Question

So I have been trying to figure out how to animate an image on click of a button, for example if the user clicked a button, an image would move from the left side to the right side of the screen and then stop.
Any help is always appreciated! 😃

Answer 1

I hope this code might help you
https://code.sololearn.com/WCHWEkTQqriI/?ref=app

Answer 2

at Khan academy the coding animation tutorial is really goid

Answer 3

You can have transition property on img like this
img{
transition: 2s;
transition-timing-function: linear;
position: relative;
left:0
}

<button onclick="move()">Move Image</button>

<script>
function move(){
var img = document.getElementsByTagName('img')[0];
img.style.left= '100px'; //whatever you want
}

</script>

Answer 4

You also can use javascript libraries such as jQuery or Greensock, especially Greensock, they are better and easier for this kind of purpose.