Jump to content

Splash Screen (Animated) -- Mobile issue

Recommended Posts



I am encountering an issue where I've followed a tutorial for an animated splash screen that I have coded to appear on my homepage when loading.  It works fine on desktop but for some reason when I access via Mobile it continuously glitches and then crashes.

site: connect23.ca

pw: welcome23

Coding used was based off this tutorial 

My code is injected in home page (advanced):

<script src="https://unpkg.com/@lottiefiles/lottie-player@1.5.7/dist/lottie-player.js"></script>

<div class="splash-wrapper">
<lottie-player src="https://lottie.host/bc872050-d32b-47cd-b339-82bab0b75ba0/2ApfwwJIQS.json"  background="transparent"  speed="1"  style="width: 400px; height: 400;"  loop  autoplay></lottie-player>

  .splash-wrapper {
  position: fixed; 
  z-index: 9999;
  background-color: #ffffff;
  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: 4s;
  animation-delay: 3s;


@keyframes slideOut {
  from {margin-left: 0vw;}
  to {margin-left: -100vw;}

Link to comment
  • Replies 4
  • Created
  • Last Reply

Top Posters In This Topic

On 11/7/2023 at 3:04 PM, gregochan said:

Which browser are you using? Test on my site and access via mobile using Safari and Chrome, both working fine.


site: gregorychan.info

Hey there - thanks for checking.  I am still receiving the error on all mobile devices.  It appears to slide the opening animation to the left, then reappear and glitch out the whole site afterwards.  When you load the page and keep it there it disappeared and allowed you to browse normally?

Link to comment

Try adding this code under

<!-- by @nhatloan - tpkl -->
  // 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");


Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.