seven8959,
сделано для ie. если что не так, делайте похожий макет со своими html и css.
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.grid-container {
height: 300px;
overflow: hidden;
background-color: #0000FF;
margin: 10px auto;
width: 400px;
display: block;
}
.grid-container__col-1 {
height: 300px;
width: 100px;
border: 1px solid red;
transform: translateY(50%);
opacity: 0;
background-color: #FF1493;
box-sizing: border-box;
float: left;
}
.grid-container.animate .grid-container__col-1 {
transform: translateY(0px);
opacity: 1;
transition: 1.2s;
transition-delay: 0ms;
}
section {
height: 100vh;
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function() {
let container = document.querySelectorAll('.grid-container');
[].forEach.call(container, function(div) {
let children = div.querySelectorAll('.grid-container__col-1');
let length = children.length;
[].forEach.call(children, function(el, i) {
el.style.setProperty('transition-delay', (i * 1800 / length) + 'ms')
})
})
function anim() {
[].forEach.call(container, function(div) {
checkViewport(div) && div.classList.add("animate")
});
}
function checkViewport(a) {
var b = a.getBoundingClientRect();
return 0 < b.top && b.top + b.height < window.innerHeight
};
window.addEventListener("scroll", anim, false);
anim()
});
</script>
</head>
<body>
<section></section>
<div class="products-wrapper__grid-container grid-container">
<!-- column-1 -->
<div class="grid-container__col grid-container__col-1">some content</div>
<!-- column-2 -->
<div class="grid-container__col grid-container__col-1">some content</div>
<!-- column-3 -->
<div class="grid-container__col grid-container__col-1">some content</div>
<!-- column-4 -->
<div class="grid-container__col grid-container__col-1">some content</div>
</div>
<div class="products-wrapper__grid-container grid-container">
<!-- column-1 -->
<div class="grid-container__col grid-container__col-1">some content</div>
<!-- column-2 -->
<div class="grid-container__col grid-container__col-1">some content</div>
<!-- column-3 -->
<div class="grid-container__col grid-container__col-1">some content</div>
<!-- column-4 -->
<div class="grid-container__col grid-container__col-1">some content</div>
</div>
<div class="products-wrapper__grid-container grid-container">
<!-- column-1 -->
<div class="grid-container__col grid-container__col-1">some content</div>
<!-- column-2 -->
<div class="grid-container__col grid-container__col-1">some content</div>
<!-- column-3 -->
<div class="grid-container__col grid-container__col-1">some content</div>
<!-- column-4 -->
<div class="grid-container__col grid-container__col-1">some content</div>
</div>
<section></section>
</body>
</html>