• Issue: when the back button is used to navigate back to a page, the overlay and loader persist and the user must reload the page to use it.

    Solution: hide the overlay and loader when the back button has been used to return to a page.

    Workaround: here’s a JS snippet that you can implement that simply hides the transition when the page has been loaded from the back/forward button cache. I experimented with using the animation hide the overlay and loader, but this is faster and I don’t think people will complain much since hitting “back” is usually a nearly instantaeous thing.

    window.addEventListener('pageshow', (event) => {
        if (!event.persisted) return;
        console.log('Page loaded from bfcache (back/forward button detected)');
    
        // Check animatepress status
        if (!ANIMATEPRESSDATA.options.isActive) {
            return null;
        }
    
        // Get elements transitions
        const body = document.querySelector("body");
        const overlayElt = document.getElementById("animatepress-overlay");
        const loaderElt = document.getElementById("animatepress-loader");
    
        // Global functions
    
        const hideOverlay = (time = 0) => {
            body.style.overflow = "hidden";
            setTimeout(() => {
                body.style.overflow = "initial";
                overlayElt.style.opacity = 0;
                overlayElt.style.visibility = "hidden";
            }, time);
        };
    
        //Loaders functions
        const hideLoader = (time) => {
            setTimeout(() => {
                loaderElt.style.opacity = 0;
            }, time);
        };
    
        hideOverlay();
        hideLoader();
    
    });
  • You must be logged in to reply to this topic.