animate div height one after the other onload javascript

Question

I have managed to get the beginning of my animation working and now I want the rest to animate with a slight delay after each div height animation and its causing problems. I've tried using getElementsByClassName and that hasn't worked.

I've posted my progress so far here in codepen.

Tried using getElementsByClassName
Tried using the .container div.

<html>

<head>
  <script>
    window.onload = function() {
      let box = document.getElementById('box')
      box.style.height = "100vh";
    }
  </script>
</head>

<body>
  <div class="container" id="container">
    <div class="box" id="box">
      box1
    </div>
    <div class="box" id="box2">
      box2
    </div>
    <div class="box" id="box3">
      box3
    </div>
    <div class="box" id="box4">
      box1
    </div>
  </div>

</body>

</html>

I want each individual element to animate down with delays set to each one.

Nenad · Answer 1 · 2019-08-25T13:19:40.920

You can use transitionend event of the first box, to start transition of box2:

window.onload = function () {
  const box = document.getElementById('box');

  box.addEventListener("transitionend", () => {
    document.getElementById('box2').style.height = "100vh";
  }, {once: true});

  box.style.height = "100vh";
}

In case you want to start 2nd animation before 1st one finished you could use setTimeout function with desired delay:

window.onload = function () {
  const box = document.getElementById('box');

  setTimeout(() => {
    document.getElementById('box2').style.height = "100vh";
  }, 200);

  box.style.height = "100vh";
}

Awesome! thank you so much this worked really well. Is there any way to manually set the delay so the animation starts a little faster ? — mBarton, Aug 25 '19 at 13:04

score 0 · Answer 2 · answered Aug 25 '19 at 13:01

0

Try this..

window.onload = function () {
  var box = document.getElementsByClassName("box");
  for(var i = 0; i < box.length; i++)
  {
     box[i].style.height = "100vh";
  }
}

answered Aug 25 '19 at 13:01

Alwin Jose

696
1
5
13

Udo E. · Answer 3 · 2019-08-25T16:15:24.413

There you have it. A code to animate each of your boxes one after the other.

Notice I had to convert your node list to an array first and then reverse the array. This is in order to be able to pop elements from the array and use the lenght of the array to terminate the recursive function animateBoxes().

I used the setTimeout() function to execute the recursive function 1 second at a time. You can modify the time parameter to your need.

The major advantage of this method is that it can automatically animate any number of boxes.

window.onload = function () { 
    let boxes = [].slice.call(document.querySelectorAll(".box")).reverse();
    animateBoxes(boxes);

    function animateBoxes(boxes) {
        if(boxes.length) {
            setTimeout(function() {
                boxes.pop().style.height = "100vh";
                animateBoxes(boxes);
            }, 1000);
        }
    }
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.container {
    width: 100%;
    height: 100vh;
    background: green;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

#box, #box2, #box3, #box4 {
    width: 100%;
    height: 0;
    position: relative;
    top: 0;
    transition: 1s;
}

#box {
    background: red;
}

#box2 {
    background: purple;
}

#box3 {
    background: orange;
}

#box4 {
    background: yellow;
}

<div class="container" id="container"> 
    <div class="box" id="box"> box1 </div> 
    <div class="box" id="box2"> box2 </div> 
    <div class="box" id="box3"> box3 </div> 
    <div class="box" id="box4"> box4 </div> 
</div>

animate div height one after the other onload javascript

3 Answers3

Linked