CODEWITHSUNDEEP
javascriptanimationonload
mBarton
mBarton

Reputation: 21

animate div height one after the other onload javascript

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.

<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.

Upvotes: 2

Views: 636

Answers (3)

Udochukwu Enwerem
Udochukwu Enwerem

Reputation: 2823

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>

Upvotes: 0

Nenad
Nenad

Reputation: 26657

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";
}

Upvotes: 1

Alwin Jose
Alwin Jose

Reputation: 773

Try this..

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

Upvotes: 0

Related Questions