Adding classname to elements forEach loop in javascript not working properly

Question

I'm using the javascript forEach method to loop through images and add classnames to it that animates. Basically I want the images to animate one by one with delays between each iteration but it's adding classNames to the elements all at once therefore they are animating all at the same time. What am I doing wrong? and how to fix it?

const images = document.querySelectorAll(".image");
images.forEach((image) => {
setTimeout(function () {
  image.classList.add("move-image-left");
  console.log(image);
}, 100);

It looks like you add all your setTimeouts at the same time, so they all fire at roughly the same time. You’d want to increment each timeout, say, 100, 200, 300ms with an incrementing variable. Quick hack that comes to mind not seeing any other code. Hopefully there aren’t too many images. — Drakes, Jul 31 '22 at 01:54
@Drakes I tried incrementing the timeout each iteration but still not working. they are still firing up at the same time — lei-san, Jul 31 '22 at 01:59

score 1 · Accepted Answer · answered Jul 31 '22 at 02:09

images.forEach((image, index) as you can see I have used index and then multiply in time inside of setTimeout function.

Here is that code,

images.forEach((image, index) => {
  setTimeout(function() {
    image.classList.add("move-image-left");
  }, index * 1000); // this will wait times of current element index
});

For more information, please go through this answer on StackOverflow.

const images = document.querySelectorAll(".image");
images.forEach((image, index) => {
  setTimeout(function() {
    image.classList.add("move-image-left");
  }, index * 1000);
});

.image {
  display: inilne-block;
  height: 50px;
  width: 100px;
  margin-bottom: 10px;
  object-fit: cover;
  overflow: hidden;
  transition: .5s;
}

.move-image-left {
  transform: translateX(50px);
}

<div class="image">
  <img src="https://images.unsplash.com/photo-1659203540215-bb0044083ff5?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwzfHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=500&q=60" />
</div>
<div class="image">
  <img src="https://images.unsplash.com/photo-1659203540215-bb0044083ff5?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwzfHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=500&q=60" />
</div>
<div class="image">
  <img src="https://images.unsplash.com/photo-1659203540215-bb0044083ff5?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwzfHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=500&q=60" />
</div>

Adding classname to elements forEach loop in javascript not working properly

1 Answers1