Scroll Animation with Intersection Observer

Modern UI/UX Interaction Example

Who

Sarah Drasner, a world-renowned web developer and educator.

When

Published April 12, 2022

What

Scroll-triggered animations using IntersectionObserver API.

Why

Improves engagement and modernizes web experiences.

Live Demo

👀 Watch Me Appear
✨ Smooth Motion
🔥 Responsive & Clean

Highlighted Code

// script.js
const observer = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('show');
    }
  });
});

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