How to animate in javascript?

Question

I've found this example in w3schools and want to modify its animation into my liking. Basically it has two divs, one as a container and the other is for the animation. Originally the animated div can go one direction from top to bottom or top to left etc. But what I want to happen is, as soon as it animates already from top to bottom, I want it to move back from bottom to top. How to achieve this?

Here is the code:

<!DOCTYPE html>
<html>
<style>
#container {
width: 400px;
height: 400px;
position: relative;
background: yellow;
}
#animate {
width: 100px;
height: 100px;
position: absolute;
left: 145px;
background-color: red;
}
</style>
<body>

<p>
<button onclick="Move()">Click</button>
</p> 

<div id ="container">
<div id ="animate"></div>
</div>

<script>
function Move() {
var elem = document.getElementById("animate");   
var pos = 0;
var id = setInterval(frame, 5);
function frame() {

if (pos < 300) {
  pos++;
  elem.style.top = pos + 'px'; 
  elem.style.bottom = pos + 'px'; 
}

}
}
</script>

</body>
</html>

this is a great reference of animations robertpenner.com/easing and the rest google.es/… — Álvaro Touzón
– Álvaro Touzón, Commented Jul 18, 2017 at 8:18
You have to set a "direction", otherwise if you only check vertical position it won't work. — evolutionxbox
– evolutionxbox, Commented Jul 18, 2017 at 8:20

fen1x · Accepted Answer · 2017-07-18 08:23:39Z

1

Have you considered using keyframes instead of js?

#container {
  width: 400px;
  height: 400px;
  position: relative;
  background: yellow;
}
#animate {
  width: 100px;
  height: 100px;
  position: absolute;
  left: 145px;
  background-color: red;
  animation: move 3s linear infinite;
}

@keyframes move {
  0% {
    top: 0;
  }
  50% {
    top: 300px;
  }
  100% {
    top: 0;
  }
}

<body>
  <div id="container">
    <div id="animate"></div>
  </div>
</body>

answered Jul 18, 2017 at 8:23

fen1x

5,8986 gold badges31 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Abdullah Danyal · Accepted Answer · 2017-07-18 08:36:41Z

Its better to use css animations, but if you want to do in this way then you have to set a direction. I modify your code and add direction in it.

function Move() {
var elem = document.getElementById("animate");
var pos = 0;
var direction = "down";
var id = setInterval(frame, 5);
function frame() {
if (direction=="down") {
  pos++;
  elem.style.top = pos + 'px'; 
  elem.style.bottom = pos + 'px'; 
} else {
  pos--;
  elem.style.top = pos + 'px'; 
  elem.style.bottom = pos + 'px'; 
}
if (pos == 300) {
  direction = "up";
}
if (pos == 0) {
  direction = "down";
}
}
}

#container {
width: 400px;
height: 400px;
position: relative;
background: yellow;
}
#animate {
width: 100px;
height: 100px;
position: absolute;
left: 145px;
background-color: red;
}

<p>
<button onclick="Move()">Click</button>
</p> 

<div id ="container">
<div id ="animate"></div>
</div>

Dij · Accepted Answer · 2017-07-18 08:23:31Z

you can keep a variable to check which direction the box is going and change it based on the boundary conditions. Like if you reach position 0 you can make direction down and if you reach position 300 make direction up.

function Move() {
var elem = document.getElementById("animate");   
var pos = 0;
var direction = 'down';
var id = setInterval(frame, 5);
function frame() {

if (pos >= 300) {
   direction = 'up';
} else if (pos <= 0) {
direction = 'down';
}
 if (direction === 'down'){
  pos++; 
} else if (direction === 'up'){
  pos--;
}
  elem.style.top = pos + 'px'; 
  elem.style.bottom = pos + 'px'; 


}
}

#container {
width: 400px;
height: 400px;
position: relative;
background: yellow;
}
#animate {
width: 100px;
height: 100px;
position: absolute;
left: 145px;
background-color: red;
}

<p>
<button onclick="Move()">Click</button>
</p> 

<div id ="container">
<div id ="animate"></div>
</div>

GajendraSinghParihar · Accepted Answer · 2017-07-18 08:33:48Z

0

You can modify you frame() function to check direction and then add/subtract position accordingly E.g

function frame() {

  if(pos >= 300 ) {
    dir = 1;
  }else if (pos <=0) {
    dir = 0;
  }

  if (dir ===0) {
    pos++;
  } else {
    pos--;
  }

   elem.style.top = pos + 'px'; 
   elem.style.bottom = pos + 'px'; 
}

You can find this working on this JSBin

answered Jul 18, 2017 at 8:33

GajendraSinghParihar

9,16911 gold badges40 silver badges67 bronze badges

Collectives™ on Stack Overflow

How to animate in javascript?

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related