Scroll Fade-in Animation [IntersectionObserver]

👀 Live Demo

💡 Use Cases and Benefits of This Template

This template animates elements with a smooth fade-in effect when they enter the viewport during scrolling.

• ✅ Naturally guides user attention (reduces missed content)
• ✅ Improves readability by not overwhelming the user with all content at once
• ✅ Enables lazy-loading for images, graphs, and more via IntersectionObserver
• ✅ Lightweight and easy to customize—great for landing pages, product lists, FAQs, etc.
• ✅ Enhances the overall impression of the site with simple animation

You can easily adjust animation speed and distance using CSS, allowing you to customize it freely.

📋 Copy-Paste Code

<style>
.box {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.8s ease, transform 0.8s ease;
  margin: 1rem 0;
  font-size: 1.5rem;
}
.box.visible {
  opacity: 1;
  transform: translateY(0);
}
</style>

<div class="box fadein">🍎 Apple</div>
<div class="box fadein">🍊 Orange</div>
<div class="box fadein">🍌 Banana</div>
<div class="box fadein">🍇 Grape</div>
<div class="box fadein">🍉 Watermelon</div>

<script>
const observer = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add("visible");
      observer.unobserve(entry.target); // Show once
    }
  });
});
document.querySelectorAll(".fadein").forEach(el => observer.observe(el));
</script>

📋 Copy
    

🧩 How IntersectionObserver Works and Tips for Implementation

IntersectionObserver is a browser API that allows you to detect when a specific element enters the viewport. Compared to traditional scroll events, it is lightweight and offers better performance, making it ideal for optimizing animations.

🔍 Where Can It Be Used?

Beyond scroll-based animations, it can be applied to lazy-loading images or videos, triggering ads, and more. Its flexibility makes it useful in various web scenarios.

⚙ Implementation Tips

To maintain performance, use unobserve() to stop observing elements after they have appeared. When handling multiple elements, use querySelectorAll() and loop through each one to apply the observer.

When combined with animations, IntersectionObserver greatly enhances the visual appeal of your site. Don’t forget to fine-tune your transform and transition settings in CSS for the best effect.