Reveal Elements on Scroll

Add a subtle fade-and-slide animation that triggers as each element scrolls into view — built with the native Intersection Observer API, so it's fast and dependency-free.

By Dillon LaGamma · HTML · CSS · JavaScript

The code

Add the class reveal to any element you want to animate, then drop this CSS and JavaScript into your page (an HTML embed works great).

<!-- Add class "reveal" to anything you want to animate in -->
<style>
  .reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s ease, transform 0.6s ease;
  }
  .reveal.is-visible {
    opacity: 1;
    transform: none;
  }
</style>

<script>
  const revealEls = document.querySelectorAll(".reveal");

  const observer = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        entry.target.classList.add("is-visible");
        observer.unobserve(entry.target); // animate once
      }
    });
  }, { threshold: 0.15 });

  revealEls.forEach((el) => observer.observe(el));
</script>

How it works

The Intersection Observer API watches each .reveal element and reports when it enters the viewport. When an element becomes at least 15% visible (threshold: 0.15), we add the is-visible class, which the CSS transitions from a faded, slightly-shifted state to its natural position.

Calling observer.unobserve() after the first trigger means the animation only plays once per element, which keeps scrolling smooth and avoids re-animating on the way back up.

When to use it

• Section headings and feature blocks on a landing page.
• Testimonials, pricing cards, or portfolio items that should feel alive.
• Any long page where a little motion guides the eye downward.

Because it uses no external libraries, it won't slow your site down — performance is a core part of every build I do at Dillon LaGamma.