Sergey-web92,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.grid-container{
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
height: 300px;
overflow: hidden;
}
.grid-container__col-1{
height: 300px;
border: 1px solid red;
transform: translateY(50%);
opacity: 0;
background-image: linear-gradient(to bottom, #D3D3D3, #FF69B4);
box-sizing: border-box;
}
.grid-container.animate .grid-container__col-1{
transform: translateY(0px);
opacity: 1;
transition: 1.2s;
transition-delay: var(--ms, 0ms);
}
section{
height: 100vh;
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function() {
const lazyAnimate = divs =>
divs.forEach(el => {
if (el.intersectionRatio > 0.4) {
el.target.classList.add('animate');
}
});
let observer = new IntersectionObserver(lazyAnimate, {
rootMargin: "100px",
threshold: 1.0
});
let container = document.querySelectorAll('.grid-container');
container.forEach(div => {
let {
length
} = children = div.querySelectorAll('.grid-container__col-1');
children.forEach(({
style
}, i) => style.setProperty('--ms', `${i*1800/length}ms`))
observer.observe(div);
})
});
</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>