Creating a Reveal Animation on Page Load and Scroll using CSS and JavaScript

Submitted by oretnom23 on Friday, March 3, 2023 - 14:16.

In this tutorial, you can learn to create a simple Reveal Animation for website elements or contents using CSS and JavaScript. This tutorial aims to provide the students and new programmers with a reference for learning to build an interactive and creative website user interface and functionality. Here, I will be providing a simple web application's web page source code scripts that demonstrate the main goal of this tutorial.

What is Reveal Animation?

Reveal Animation is one of the most often-used features in an interactive and creative website. This kind of animation hides the UI elements or contents at first and slowly reveal or shows the exact element design or content. This feature is commonly used or implemented in a website or web application with a long page scroll. This can provide the end-users or visitors with a better experience of using the application or website.

How to Create a Reveal Animation for websites?

Reveal Animation can be achieved easily using CSS and JavaScript. Using the CSS animation property, we can set the animation that we want by setting the animation name, duration, delay, and more. This animation can be achieved using opacity, width, height, clip-path, and more properties you'll just need to pick the property that suit and reaches your own requirements. Using the @keyframes at-rule, we can set the properties to whatever we want to do between 0 to 100 percent of the animation property duration. The JS will be useful for this feature to add classNames to the elements to be revealed and detects the user/page activity such as page load and scrolling events. Check out the sample web application's web page scripts below to understand it more.

Sample Web App

Here are the scripts of the sample web application's web page that demonstrate the creation of a simple Reveal Animation.

Page Interface

Here's the HTML script of the web page elements and contents. The code consists of section elements/tags that will be used for Reveal Animation.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS and JS - Reaveal Animation on Scroll</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200" />
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <main>
        <section data-reveal="true">
            <div class="text-center section-title">Reaveal Animation on Scroll using CSS and JS</div>
            <hr style="width: 50px;">
        </section>
        <section data-reveal="true">
            <div class="text-center section-title">Nulla venenatis erat mauris, sed laoreet orci vulputate quis. Nam facilisis bibendum mollis. Sed mattis, arcu eget ornare tempus, libero erat consequat enim, vitae vehicula metus diam ut arcu. Vestibulum fermentum justo hendrerit, faucibus risus sed, tincidunt ligula.</div>
            <hr style="width: 50px;">
        </section>
        <section data-reveal="true">
            <div class="text-center section-title">Cras nec elit id lacus finibus gravida. Duis pellentesque imperdiet libero.</div>
            <hr style="width: 50px;">
        </section>
        <section data-reveal="true">
            <div class="text-center section-title">In accumsan urna ac neque congue sollicitudin. Aliquam a leo velit. Nullam lobortis, ante quis euismod interdum, est urna convallis nunc, ut varius erat urna eget urna.</div>
            <hr style="width: 50px;">
        </section>
        <section data-reveal="true">
            <div class="text-center section-title">You have Reached the Bottom of the Page.</div>
            <hr style="width: 50px;">
        </section>
    </main>
    <script src="script.js"></script>
</body>
</html>

Stylesheet

The script below is the CSS code that contains the styling or design properties of the elements of the web page. It contains the animation @keyframes script.

@import url('https://fonts.googleapis.com/css2?family=Rubik&display=swap');
 
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@700&display=swap');
body *{
    font-family: 'Rubik', sans-serif;
}
/**
Page Design
*/
body,
html{
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}
body{
    background-color: #1A120B;
}
main{
    min-height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow-x: auto;
}
/*
Content Design
*/
.section-title{
    color: #fff;
    text-shadow: 1px 1px 3px #000;
    font-size: 35px;
    font-family: 'Caveat', cursive;
}
section{
    width: 100%;
    height:100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background-attachment: fixed;
    background-position: center center;
    background-size: cover
}
section p, section .section-title{
    text-align: center;
    margin: 0 20%;
    padding: 0 10px;
}
section:nth-child(1){
    background-image: url(img/img-4.jpg);
}
section:nth-child(2){
    background-image: url(img/img-3.jpg);
}
section:nth-child(3){
    background-image: url(img/img-1.jpg);
}
section:nth-child(4){
    background-image: url(img/img-2.jpg);
}
section:nth-child(5){
    background-image: url(img/img-5.jpg);
}
 
section:nth-child(3) p{
    color: #fff;
    text-shadow: 1px 1px 3px #939393;
    font-size: 20px;
    font-family: 'Caveat', cursive;
}
section[data-reveal="true"]  *{
    clip-path: inset(0 100% 0 0);
}
/*
Text Reveal Animation
*/
section[data-reveal="true"].reveal *{
    animation: reveal-content 3.5s ease-in-out .1s forwards ;
}
@keyframes reveal-content{
    0%{
        clip-path: inset(0% 100% 0% 0%);
    }
    100%{
        clip-path: inset(0% 0% 0% 0%);
    }
}

By default, the page will look like the following image if the Reveal Animation design and functionality are not yet set.

Function Script

The script below is a JavaScript code that contains the initialization of reveal animation to the selected element contents. Without the script below, the web page will only the elements without any text content.

/**
* Selecting All elements we want to have a reveal animation
*/
const revealEls = document.querySelectorAll('section[data-reveal="true"]')
 
 
/**
* Initialize Reveal Animation if Element is visible to page screen
*/
const AnimateReveal = () => {
    revealEls.forEach(el => {
        /**
        * Check if the element height for at least 50% visible to page screen then add the reveal class if not existing yet
        * else: Remove the reveal class name if it exists
        */
        if((el.getBoundingClientRect().top + (el.clientHeight * .5)) < window.innerHeight)  {
            if(!el.classList.contains('reveal'))
                el.classList.add('reveal')
        }else{
 
            if(el.classList.contains('reveal'))
                el.classList.remove('reveal')
        }
    });
}
 
/** Trigger Animation on page load */
window.onload = function(){
    AnimateReveal();
}
/** Trigger Animation on scroll */
window.onscroll = function(){
    AnimateReveal();
}

Overall, the web page will result in something like the following:

On page load, the first section element text content will be revealed since it is already visible on the page screen. Then the other elements reveal animations that will be triggered when the user scrolls the page and the element is visible for at least 50% of it.

There you go! I have provided also the complete source code zip file on this site including the images I used for the backgrounds of the elements. Feel free to download it by clicking the download button located below this tutorial's content.

That's the end of this tutorial! I hope this Creating a Reveal Animation on Page Load and Scroll using CSS and JavaScript Tutorial will help you with what you are looking for and will be useful for your current and future web application projects.

Explore more on this website for more Tutorials and Free Source Codes.

Happy Coding =)

Add new comment

591 views