Website Entry Animation

Hi, I'm trying to set up my website where when someone clicks the link, it opens with a curtain effect showing my logo in the centre, and then closes and fades to show my actual homepage.

This is the website I got the idea from https://www.platinumplush.shop. However, their's only works if you open it on a phone.

Does anyone know a code I can use for this? It would be so great.

Try this code.

Is it possible that the animation displays only upon first entry? 

Example:

https://www.stephenfriedman.com

On 9/16/2023 at 4:04 PM, tomasgf said:

Is it possible that the animation displays only upon first entry? 

Example:

https://www.stephenfriedman.com

What is your site url or which SS version do you use?

On 9/18/2023 at 6:05 AM, tuanphan said:

What is your site url or which SS version do you use?

URL: https://gallery.obra.se

SS: 7.1

On 9/20/2023 at 4:51 PM, tomasgf said:

URL: https://gallery.obra.se

SS: 7.1

Yes. Possible. This week I solved 2 cases. Which code will you use? Above code or another code? If another code, can you send it? I can tweak it easier

2 hours ago, tuanphan said:

Yes. Possible. This week I solved 2 cases. Which code will you use? Above code or another code? If another code, can you send it? I can tweak it easier

Thanks for your answer!

Well, I suppose I would use the code you suggest since I don't have any other than the one you posted above. That one plays the animation over and over when one navigates through different pages in the same session.   

Ideally, if possible, the animation would play only to introduce the first page visited in one given session instead of loading with every page visited in that same session. 

With kind regards,

Tomás

On 9/22/2023 at 6:34 PM, tomasgf said:

Thanks for your answer!

Well, I suppose I would use the code you suggest since I don't have any other than the one you posted above. That one plays the animation over and over when one navigates through different pages in the same session.   

Ideally, if possible, the animation would play only to introduce the first page visited in one given session instead of loading with every page visited in that same session. 

With kind regards,

Tomás

I did a quick example, you try checking

https://tuanphan3.squarespace.com/lottie-loading-one?noredirect

abc

16 minutes ago, tuanphan said:

I did a quick example, you try checking

https://tuanphan3.squarespace.com/lottie-loading-one?noredirect

abc

Looks pretty good to me!

On 9/25/2023 at 9:43 PM, tomasgf said:

Looks pretty good to me!

You can add this code to Settings > Developer Tools > Code Injection > Footer. Replace example image url with your new image url

<!-- Container for the splash screen with a specified ID -->
<div class="splash-wrapper" id="loader-container">
  <img src="https://static1.squarespace.com/static/6324583db82aa04037d1426a/t/650d59831ee8c8147f63d9f7/1695373699487/Untitled-5.png/s/your-favicon.ico"/>
</div>

<style>
  /* Loader animation styles */
  .splash-wrapper {
    display: none; /* Initially hidden */
    position: fixed;
    z-index: 9999;
    background-color:#fff;
    height: 100vh;
    width: 100vw;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    animation-name: slideOut;
    animation-fill-mode: forwards;
    animation-duration: 0.65s;
    animation-delay: 1s;
    top: 0;
    left:0;
  }

  @keyframes slideOut {
    from {
      margin-left: 0vw;
    }
    to {
      margin-left: -100vw;
    }
  }
</style>
<script>
  // Check if the animation state is stored in sessionStorage
  const isAnimationPlayed = sessionStorage.getItem("animationPlayed");

  // Reference to the splash-wrapper div with a specified ID
  const splashWrapper = document.getElementById("loader-container");

  // If the animation has already played, hide it and remove it from the DOM
  if (isAnimationPlayed) {
    splashWrapper.style.display = "none";
    splashWrapper.remove(); // Remove the splash wrapper from the DOM
  } else {
    // If the animation hasn't played yet, mark it as played and store it in sessionStorage
    sessionStorage.setItem("animationPlayed", "true");
  }
</script>