CSS Animation Screen

Dear CSS gurus!

Quick question & hoping it's a simple change!

Added this code to a new site I'm building (for myself). Even though I'm sure you can read the code:

1. It creates a plain animation screen upon arriving at the site
2. Logo circulates
3. Plain animation screen then swipes off to the left

Problem?

It animates on About page, portfolio page.....any page I click on. Just want it once on site arrival

Question?

Which part of the code do I need to swap out so it only occurs Once upon site arrival? (like I've seen on another site)

Is it "position: absolute;"?

*Disclaimer: I did first ask the code designer, just not had a comment response back yet, but it is Easter

Thank you in advance👍

/*CREATING AN ANIMATED LOADING SCREEN FOR SQUARESPACE (7.0 & 7.1)*/
//To style the whole screen container
.loading-screen {
  animation: goodbyeScreen .5s forwards 3.5s cubic-bezier(.5,-.75,.7,2);
  background-color: #fafafa;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 10000;
}

//To style the logo or image
.loading-screen-image {
  animation: scrollingLogo 1 3s linear;
  background-image: url(https://images.squarespace-cdn.com/content/660769db104f6977dd11b072/3d770d38-6440-4b9a-b078-1e45aef1af9f/April_Walker_logo_circle_favicon+no+background.png?content-type=image%2Fpng);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  height: 190px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 190px;
}

//Animation for the scrolling logo
@keyframes scrollingLogo {
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

//Animation for the sliding screen
@keyframes goodbyeScreen {
  to {
    transform: translateX(-100%);
  }
}

To make it load once, you'll need to add some code to the HTML/JS that checks whether the site has loaded before, for example, by setting a localStorage value. The code can then check for this value before it runs, preventing it running more than once.

I haven't seen your other code, but it would typically:

• Check for the localStorage value. If not found (because it is running for the first time), load the animation.
• Set a localStorage value to prevent it running next time.
• When the page has fully loaded, remove the animation.
• In addition, it's usually good practice to include a timer to remove the loading animation after a preset period, in case the page never fully loads (as the site wouldn't be visible).
• A second timer can help by setting a minimum time for the animation, in case the page loads so quickly that the animation flashes on and then disappears.

Did this help? Please give feedback by clicking an icon below  ⬇️