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);
images.forEach((image, index) as you can see I have used index and then multiply in time inside of setTimeout function.
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>