Loader Animation to play only once

Design help Animations & Interactions
1

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

2

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

3

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!

4

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.

5

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

6

This works as intended, but of course the problem is that while your page-loader div is not visible, all other animations in your page load interaction still happen. In my case, this means staring at an empty screen until my home page elements animate in (after their set delay period). This script would require a very basic page loader that is merely placed above the home page—just something to keep in mind for anyone else looking for a solution.

7

My solution to this problem was this.

I added this code to the body tag.

<script>
// If the page URL has a query string
if (window.location.search.includes('home')) {  // Hide the preloader div
  $('.div_preloader_name').hide();
}
</script>

Replacing the “.div_preloader_name” with the class name of the div you want to hide (your preloader). Now only thing you need to do in your “Home” button/link, is add “?home”. For instance, www.somethingsomething.com/?home . Now, when you click on the Home button on your site (inside of your site), because we’re adding a Query of “?home” (as specified in the script at the beginning

(window.location.search.includes('home'))

as long as the word in the script matches the “?word” you are adding to the link, it will hide that preloader. But when users type your website for the first time, they will not add the query so the preloader will be shown. This might conflict if you rely on jQuery functions otherwise, but my simple website didn’t so it was the cleanest solution there was.

1 Like