CSS Animation Example: Reveal on Scroll

The "Reveal on Scroll" effect introduces elements to the screen dynamically as the user scrolls, creating a feeling of narrative flow and polish.

Scroll down slowly 👇

I magically appear!

This box faded in and slid up when it entered the view.

I'm slightly delayed!

You can stagger animations easily using transition-delay.

Keep scrolling...

Here comes another!

The observer keeps watching and animating items down the page.

While experimental CSS features like animation-timeline: view() exist, the most robust and widely supported method for scroll animations is combining CSS classes with the JavaScript Intersection Observer API.

In CSS, we define an initial hidden state using opacity: 0 and transform: translateY(50px), alongside a transition. We then create an .is-visible class that sets opacity to 1 and transform to translateY(0). The Intersection Observer strictly watches the elements, and precisely when they cross the viewport threshold (e.g., 20% visible), it appends the .is-visible class, triggering the CSS transition.

Here is the combined CSS and JS code to create the Reveal on Scroll animation.

<!doctype html>
<title>Example</title>
<style>
body {
    margin: 0;
    font-family: sans-serif;
    background-color: #f0f0f0;
    min-height: 200vh; /* Make the page scrollable */
    display: flex;
    flex-direction: column;
    align-items: center;
}

.spacer {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.reveal-card {
    background-color: #fff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    max-width: 400px;
    margin: 50px 20px;
    
    /* Starting state: hidden and pushed down */
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

/* Final state when the JS adds this class */
.reveal-card.is-visible {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .reveal-card {
        transition: none; /* Instant appearance */
        transform: none; /* Don't slide up, just fade or appear */
    }
}
</style>

<div class="spacer">
    <h1>Scroll down slowly &#x1F447;</h1>
</div>

<div class="reveal-card reveal-element">
    <h2>I magically appear!</h2>
    <p>This box faded in and slid up when it entered the viewport via the Intersection Observer API.</p>
</div>

<div class="reveal-card reveal-element" style="transition-delay: 0.2s;">
    <h2>I'm slightly delayed!</h2>
    <p>You can stagger animations simply by adding a transition-delay on adjacent items.</p>
</div>

<div class="spacer">
    <p>Keep scrolling...</p>
</div>

<div class="reveal-card reveal-element">
    <h2>Here comes another!</h2>
    <p>The observer keeps watching and firing precisely when elements cross the threshold.</p>
</div>

// Set up the Intersection Observer
const observer = new IntersectionObserver((entries, observer) => {
    entries.forEach(entry => {
        // If the element is visible in the viewport
        if (entry.isIntersecting) {
            entry.target.classList.add('is-visible');
            // Un-observe it if you only want the animation to happen once
            observer.unobserve(entry.target);
        }
    });
}, {
    root: null, // use the document's viewport
    rootMargin: '0px',
    threshold: 0.2 // trigger when 20% of the element is visible
});

// Start observing each element
revealElements.forEach(el => observer.observe(el));
</script>

View Output

Accessibility Considerations

As elements sliding up the screen rapidly can cause discomfort for users with vestibular disorders, we must respect their preferences. prefers-reduced-motion is a CSS media feature used to detect if a user has enabled a setting on their device to minimize the amount of non-essential animation or motion. We can use it to provide specific styles for users who have enabled this setting.

By removing the transition duration and the initial transform displacement, the elements will simply appear instantly when they scroll into view, rather than animating their arrival.

Here's what we used in our example:


@media (prefers-reduced-motion: reduce) {
    .reveal-card {
        /* Kill the sliding transition entirely */
        transition: none; 
        
        /* Remove the initial offset so it doesn't jump */
        transform: none; 
    }
}