<div style="height:100vh; text-align:center; padding-top:50px;">Scroll Down &#8595;</div>
<div class="fade-wrapper">
  <div class="fade-item">Content Block 1</div>
  <div class="fade-item">Content Block 2</div>
  <div class="fade-item">Content Block 3</div>
</div>

.fade-wrapper {
  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  max-width: 600px;
  margin: 0 auto;
  padding-bottom: 100px;
}
.fade-item {
  background: #3b82f6;
  color: white;
  padding: 50px;
  margin-bottom: 30px;
  border-radius: 12px;
  text-align: center;
  font-size: 1.5rem;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.fade-item.visible {
  opacity: 1;
  transform: translateY(0);
}

const observer = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      entry.target.classList.add("visible");
    }
  });
});

const fadeElements = document.querySelectorAll(".fade-item");
fadeElements.forEach((el) => observer.observe(el));

Back to Snippets

Scroll Fade In Animation JS

Bring your page to life with scroll-triggered animations. Using the modern Intersection Observer API, elements smoothly fade and slide into view as the user scrolls down.

465

#javascript

#css

#animation

#scroll

#fade in

#intersection observer

#ui

/HTML *CSS ()JS Output Live Updates

Scroll Fade In Animation JS

Share Code Snippet