Hey everyone!
I have been trying to get my loading wrapper to play once a day by following this tutorial and website by Finsweet.
I have adjusted the code below to my website by changing the div name of my loader, the duration of my loader to 4 seconds and removing the “clear cookie” button.
Please correct me if there’s anything wrong, I am not that great in JS oh no…
<!-- F’in sweet Webflow Hacks -->
<style>
/*The page-wrapper is initially hidden*/
.page-wrapper {
display:none;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-cookie/2.2.0/js.cookie.min.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function(event) {
// get a reference to the page wrapper
const pageWrapper = document.querySelector(".page-wrapper");
// get a reference to the loading wrapper
const loadingWrapper = document.querySelector('.load-animate');
// get the 'seenAnimation' cookie and store in a seenAnimation variable
const seenAnimation = Cookies.get('seenAnimation');
// if the 'seenAnimation' cookie is undefined
if(!seenAnimation){
// display the loading-wrapper
loadingWrapper.style.display = "flex";
// show the page-wrapper
// after a set duration of 4000 milliseconds
// (the time it takes to show the loading-wrapper in this case)
setTimeout(()=>{
pageWrapper.style.display = "block";
}, 4000);
// set the 'seenAnimation' cookie
Cookies.set('seenAnimation', 1, { expires: 1 });
}
else{
// else if the 'seenAnimation' cookie exists
// the user has already seen the animation
// and so
// hide the loading-wrapper
loadingWrapper.style.visibility = "hidden";
// show the page-wrapper
pageWrapper.style.display = "block";
}
// remove the 'seenGif' cookie
// the animation can now play again since
//'seenAnimation' becomes undefined
Cookies.remove('seenAnimation');
});
});
</script>
The problem I encountered was that after the page loader does its job, everything within the page wrapper div does not appear after the loader. Without this loader cookie code, it would have appeared as it should.
Kindly advise me on this. Thanks 