Loader Animation to play only once

Hi,

I am creating my first site using Webflow (with experience of Wordpress, GitHub etc.) so slightly lost on this one.

My site has a loader animation (set up as a component) which I would like to only play the first time someone opens the homepage (ie. not when they go to my About page, then back to Home etc.). I’ve found the Finsweet video below, and tried inserting the code into the homepages header but it doesn’t appear to have made any difference and the loader still plays every time.

Would anyone be able to help?


Finsweet video: Use a GIF as a page preloader AND only show it once per day
Read-only site: Webflow - Crafted Creative 2023

Is anyone able to help? I may have to look to delete the loader unfortunately.

Hi Craftcr!

There is definitely a better solution out there, but I just want to share my approach.

To achieve this, I would store a cookie after the first time the user has visited and check if that cookie has been stored when loading the page, if so, don’t load the animation. Now the second part would be to find a way to change the value of that cookie (once every day for example), and compare the one that is already stored on the user device to show the animation again.

This is a piece of code that I wrote for a client that wanted to show a banner (with text linked to a CMS item) that can be closed by the user and disappears forever until the text has been edited, then it reappears for everyone.

if (typeof currentAnnouncement !== 'undefined') {
   const showMsg = localStorage.getItem('showMsg');
  
  const announcement = localStorage.getItem('announcement');
  localStorage.setItem('announcement', currentAnnouncement);
  
 if(announcement == currentAnnouncement){
    // Announcement should not show
    $('.section_announcement').hide();
  }else{ 
    // Announcement should show
     $('.section_announcement').show();
    localStorage.setItem('showMsg', 'true');

  }
 
  
  if(showMsg === 'false'){
    $('.section_announcement').hide();

  }else{
    $('.section_announcement').show();
  }


  $('.announcement_close-image').on('click', function(){
    $('.section_announcement').fadeOut('fast');
    localStorage.setItem('showMsg', 'false');
  });
}
});

All of this might be a little far-fetched, but I hope it helps you in the right direction. Let me know if it’s usefull to you!

Hey I have been able to get this working with some code in the page body:

<script>
  // Function to check if the preloader has been shown
  function hasPreloaderBeenShown() {
    return sessionStorage.getItem('preloaderShown') === 'true';
  }

  // Function to set the flag indicating that the preloader has been shown
  function setPreloaderShown() {
    sessionStorage.setItem('preloaderShown', 'true');
  }

  // Function to show or hide the preloader based on the session storage (replace '.page-load-wrapper' with your class name)
  function handlePreloader() {
    var preloaderWrapper = document.querySelector('.page-load-wrapper');

    if (!hasPreloaderBeenShown()) {
      // Set the preloader to block
      preloaderWrapper.style.display = 'block';

      // Set the flag to indicate that the preloader has been shown
      setPreloaderShown();
    } else {
      // Preloader has been shown, so hide it
      preloaderWrapper.style.display = 'none';
    }
  }

  // Call the function to handle the preloader on page load
  document.addEventListener('DOMContentLoaded', function () {
    handlePreloader();
  });
</script>

An important thing to note is that this will not work with Webflow interactions initial state for Display properties. Everything else in interactions should work fine, just dont set an initial state for the display

From my understanding, this solution doesn’t rely on cookies, as it uses the sessionStorage API, which is part of the Web Storage API and operates separately from cookies.

sessionStorage is a type of web storage that lasts only for the duration of the page session. It’s limited to the tab or window in which the page is loaded, and the data is cleared when the tab or window is closed.

Cant seem to get this working man, followed all the steps, shame because this seems like the cleanest option out there at the moment