Anime Stagger Scroll Cards

<div class="assc-wrap">
  <div style="height:60vh;"></div>
  <div class="assc-grid" id="assc-grid">
    <div class="assc-card">Card A</div>
    <div class="assc-card">Card B</div>
    <div class="assc-card">Card C</div>
    <div class="assc-card">Card D</div>
    <div class="assc-card">Card E</div>
    <div class="assc-card">Card F</div>
  </div>
  <div style="height:60vh;"></div>
</div>

body { padding: 0 !important; }
.assc-wrap { width: 100%; }
.assc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  max-width: 480px;
  margin: 0 auto;
}
.assc-card {
  padding: 32px 16px;
  background: #1e293b;
  border-radius: 12px;
  color: #e2e8f0;
  text-align: center;
  font-weight: 600;
  opacity: 0;
  transform: translateY(30px);
}

let triggered = false;
const grid = document.getElementById('assc-grid');
function check() {
  if (triggered) return;
  const rect = grid.getBoundingClientRect();
  if (rect.top < window.innerHeight * 0.85) {
    triggered = true;
    anime({
      targets: '.assc-card',
      opacity: [0, 1],
      translateY: [30, 0],
      delay: anime.stagger(100),
      duration: 600,
      easing: 'easeOutCubic'
    });
  }
}
window.addEventListener('scroll', check);
check();