Logo Fill Reveal Preloader – Elementor, Pace JS and GSAP

Post author:DMmotionarts
Post published:April 20, 2025
Post category:Website Tutorials
Post comments:0 Comments

(This page includes affiliate links. If you click and purchase, I receive a small commission at no extra cost from you and that way you can support me. I only recommend tools that I have personally used and loved.)

Get Elementor Pro Today –

1 – Elementor Pro

Don’t want to make from scratch? Buy the template instead 🙂

Animated Landing Page #2 – Elementor & GSAP Template
Elementor Templates
$5.00
Add to cart

Logo Fill Preloader – Elementor, Pace JS and GSAP

In this tutorial, we will be making a simple preloader that fills up logo based on how much page has been loaded. For simplicity, we will use 2 images and use pace js library for our preloader.

JS and GSAP Code

dm-preloader-11 is the CSS class of Preloader Container.
dm-preloader-11-first-logo is the CSS class of the logo that needs to be shown by default.
dm-preloader-11-second-logo is the CSS class of the logo that needs to be revealed as page load progresses.
dm-preloader-counter-11 is the CSS class of the heading widget that shows the counter in percentage. Make sure to select the HTML tag as p.

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js" integrity="sha512-7eHRwcbYkK4d9g/6tD/mhkf++eoTHwpNM9woBxtPUBWm67zeAfFC+HrdoE2GanKeocly/VxeLvIqwvCdk7qScg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js" integrity="sha512-onMTRKJBKz8M1TnqqDuGBlowlH0ohFzMXYRNebz+yOcc5TQr/zAKsthzhuv0hiyUKEiQEQXEynnXCvNTOk50dg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pace/1.2.4/pace.min.js"></script>

<style>

    .dm-preloader-11-first-logo {

        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);

        transition: none !important;
    }

    .dm-preloader-11-second-logo {

        clip-path: polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%);
        transition: none !important;
    }

    .dm-preloader-11 {
        transition: none !important;
    }
</style>

<script>
    let isGsapFinished11 = false;
    let isProgressFinished11 = false;

    const dmPreloader11 = document.querySelector('.dm-preloader-11');
    const dmPreloader11FirstLogo = document.querySelector('.dm-preloader-11-first-logo');
     const dmPreloader11SecondLogo = document.querySelector('.dm-preloader-11-second-logo');



    Pace.on("progress", function (percent) {
        const preloaderText11 = document.querySelector(".dm-preloader-counter-11 .elementor-heading-title");
        preloaderText11.textContent = `${Math.floor(percent)}%`;

        let revealValue = 100 - percent;

        dmPreloader11FirstLogo.style.clipPath = `polygon(0% 0%, 100% 0%, 100% ${revealValue}%, 0% ${revealValue}%)`;

        dmPreloader11SecondLogo.style.clipPath = `polygon(0% ${revealValue}%, 100% ${revealValue}%, 100% 100%, 0% 100%)`;


    });

    Pace.on('done', function () {
        isProgressFinished11 = true;
        onPreloader11Completion();
    });

    function onPreloader11Completion() {
        if (isProgressFinished11) {
            gsap.to(dmPreloader11, {
                delay: 1,
                y: '-100%',
                duration: 1,
                ease: 'power3.out',
                onComplete: () => {
                    dmPreloader11.style.display = 'none';
                }
            })
        }
    }
</script>