Open In App

Add fade-out effect using pure JavaScript

Last Updated : 01 Nov, 2025
Comments
Improve
Suggest changes
Like Article
Like
Report

The fade-out effect in JavaScript gradually decreases an element’s opacity until it becomes invisible. It’s a simple animation effect used to smoothly hide elements without instantly removing them from the page.

  • Uses the setInterval() method to repeatedly reduce opacity.
  • clearInterval() stops the animation once opacity reaches zero.
  • Works purely with JavaScript-no CSS or external libraries needed.
  • Can be applied to any element by changing its style.opacity property.
  • Enhances user experience with smooth visual transitions.

[Approach 1]: Using a Separate Function

In this approach, we call the fadeout() function when the page loads. Inside it, the setInterval()method repeatedly reduces the element’s opacity by 0.1 until it reaches 0.

Syntax:

setInterval(function_reference, time interval)
html 
<body id="body">
    <br>
    <h1 style="color: green">
        GeeksForGeeks
    </h1>

    <b>
        How to create fade-out effect
        on page load using javascript
    </b>

    <p>
        This page will fade-out
        after loading
    </p>
</body>

<script type="text/javascript">
    var opacity=0;
    var intervalID=0;
    window.onload=fadeout;
        function fadeout(){
            setInterval(hide, 200);
        }
    function hide(){
        var body=document.getElementById("body");
        opacity =
    Number(window.getComputedStyle(body).getPropertyValue("opacity"))
    
            if(opacity>0){
                opacity=opacity-0.1;
                        body.style.opacity=opacity
            }
            else{
                clearInterval(intervalID);
            }
        }
</script>
  • The fadeout() function is automatically triggered on page load.
  • Every 200 milliseconds, the opacity decreases by 0.1.
  • When opacity hits 0, clearInterval() stops the animation and hides the element.

[Approach-2]:Inline Function inSetInterval()

In this approach, complete logic is written inside a variable which is done with the help of setInterval() method, here complete function is to be written in place of the function reference. This approach is comparatively easy.

Syntax:

clearInterval(parameterof time to stop calling a function)
html 
<body id="body">
    <br>

    <h1 style="color: green">
        GeeksForGeeks
    </h1>

    <b>
        How to create fade-out effect
        on page load using javascript
    </b>


    <p>
        This page will fade-out after loading
    </p>
</body>

<script type="text/javascript">
    window.onload=fadeout;
    
    function fadeout() {
        var fade= document.getElementById("body");
        
        var intervalID = setInterval(function () {
    
    if (!fade.style.opacity) {
        fade.style.opacity = 1;
    }
    
    
    if (fade.style.opacity > 0) {
        fade.style.opacity -= 0.1;
    }
    
    else {
        clearInterval(intervalID);
    }
    
        }, 200);
    }
</script>

Note: Opacity lies between 0-1, in this case, the initial opacity value is set to be 1.

  • In the above code, the portion in which the fade-out effect is to be done is selected by id(body in this case).
  • window.onload=fadeout, is used to call fadeout() function automatically when page goes on loading.
  • In the fadeout() function, we are defining our logic in the intervalId variable which calls the setInterval() method, here instead of giving function reference, the whole function is being defined.
  • In a defined function, every time we are comparing style.opacity with 0, and if it is greater than 0, an operation is to be performed to decrease the opacity by 0.1 value and when this value becomes 0, the clear function will be called automatically.
  • This work continues till opacity becomes 0 and the clear function is called.

We have taken 0.1 and 200 milliseconds as numerical values, any values are acceptable.


author
_mridul_bhardwaj_
Improve
Article Tags :

Explore

Lightbox