Fade In Up on Scroll

<div style="height:100px;display:flex;align-items:flex-end;color:#999;font-size:12px">Scroll down</div>
<div class="fade-up" style="margin-top:30px">
  <div style="font-size:18px;font-weight:700;color:#1a1a1a">Hello World</div>
  <div style="color:#999;font-size:13px;margin-top:4px">This fades in on scroll</div>
</div>

.fade-up {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);
}
.fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}

const observer = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('visible');
    }
  });
}, { threshold: 0.2 });

document.querySelectorAll('.fade-up').forEach(el => observer.observe(el));