[feature request] please hide overlay/loader when back button used
-
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.