How to Create Scroll-Triggered Animations with HTML, CSS & JavaScript

Scroll-triggered animations can greatly enhance the user experience on your website. By making elements fade in or slide in as the user scrolls down the page, you create a dynamic and engaging interface. In this tutorial, we’ll walk you through how to create smooth scroll-triggered animations using HTML, CSS, and JavaScript.

By the end of this tutorial, you’ll know how to make your web page elements appear dynamically when users scroll, adding a polished and interactive touch to your design.

What You Will Learn:

• How to create scroll-based animations with JavaScript 🔄
• Adding fade-in and slide-in effects using CSS transitions 🎨
• Detecting scroll position to trigger interactive UI effects 🖱️
• Ensuring smooth, polished animations for a seamless user experience ✨
• Customizing animations to match different styles and themes 🎯

Step 1: HTML Structure

Start by creating the basic structure of your web page. We’ll have multiple sections that will animate as you scroll down the page.

htmlCopyEdit<div class="section">Welcome to Scroll Animations</div>
<div class="section">Scroll Down to See More</div>
<div class="section">Smooth Animations on Scroll</div>
<div class="section">Enhance Your UI with CSS & JS</div>

In this structure, each .section represents a block of content. These sections will be animated when they enter the viewport as you scroll.

Step 2: CSS Styling for Animations

We will now add some CSS to style the sections and implement the animations. Initially, each section is slightly hidden by setting its opacity to 0 and applying a translateY transformation to slide it down. When the user scrolls and the section is triggered, we will change its opacity and remove the transform to make it slide into view.

cssCopyEditbody {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background: #f4f4f4;
}

.section {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: bold;
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.section.visible {
    opacity: 1;
    transform: translateY(0);
}

Here’s what we’re doing with the CSS:

• Initial State: Each section starts with opacity: 0 and transform: translateY(50px) to make it invisible and slightly shifted downward.
• Visible State: When the section becomes visible (triggered by the scroll event), we change opacity to 1 and transform to translateY(0) to make the section fade in and slide up smoothly.

Step 3: JavaScript for Scroll Detection

To make the scroll-triggered animation work, we need to use JavaScript to detect the scroll position and add the visible class to the sections when they come into view.

javascriptCopyEditfunction handleScroll() {
    const sections = document.querySelectorAll(".section");
    sections.forEach(section => {
        const sectionTop = section.getBoundingClientRect().top;
        if (sectionTop < window.innerHeight * 0.8) {
            section.classList.add("visible");
        }
    });
}

window.addEventListener("scroll", handleScroll);
handleScroll(); // Trigger on load

Here’s how the JavaScript works:

• handleScroll(): This function checks the position of each section relative to the viewport. When a section’s top is within 80% of the viewport height (sectionTop < window.innerHeight * 0.8), it adds the visible class to trigger the animation.
• window.addEventListener("scroll", handleScroll): We add an event listener for the scroll event so that the handleScroll() function is called every time the user scrolls.
• handleScroll() on Load: We also call handleScroll() once when the page loads to check if any sections are already in view.

YouTube Tutorial

For a more in-depth explanation and demonstration, check out our YouTube tutorial:

Conclusion

Scroll-triggered animations are a fantastic way to add life to your web pages and make your content more engaging. With just a few lines of code, you can create smooth animations that activate as users scroll, improving the user experience and enhancing the interactivity of your site.

For the complete source code, check out the GitHub repository:

Code Repository:
GitHub – Scroll-Triggered Animations

If you enjoyed this tutorial, don’t forget to like, comment, and subscribe to stay updated with more web development tips and tutorials.