Streaming live at 10am (PST)

Loading wrapper play once a day code issue

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 :smiley:


Published link AFTER CODE: LINK
Read-only link: LINK