Create page loading/page transition effect

Hi. I want to create a page loading/page transition effect to make it smooth. The kind of effect I want is fade out/fade in. I watched the following tutorial since they show how to create the exact effect that I want. But it looks super complicated. I wonder if there is a more simple way to do it? Thanks.

The tutorial I watched: 

My website: https://www.taniq.com/

An effect like this example? https://tuanphan3.squarespace.com/lottie-loading-one?noredirect

pass: abc

@tuanphan Hi, that one looks nice too and I've seen websites do it, but it seems to only be like a pre loader for the home page and not the rest of the website, so I kinda still prefer a fade out/fade in effect like in the tutorial. But this one also looks good and if it's not too complicated to set up I want to give it a try as well. Thank you

Have you tried copy code in video yet? I see that code is for 7.1 version.

Code I sent, I set for one page only, however if you add code to Site wide Code Injection, it should load on all pages

You can add code to Website Tools (under Not Linked) > Code Injection > Footer. Replace example lottie file with your file. Or if you want to use image/text only, let me know, I will adjust the code

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

<div class="splash-wrapper">
  <lottie-player src="https://lottie.host/7134761f-9be6-42da-bb65-6ff81185617b/uEgxToPhd9.json"  background="transparent"  speed="1"  style="width: 275px; height: 275;"  loop  autoplay></lottie-player>
</div>
<style>
.splash-wrapper {
  position:fixed;
  z-index:9999;
  background-color: #000000;
  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:.65s;
  animation-delay: 5s;
}
@keyframes slideOut {
  from {margin-left: 0vw;}
  to {margin-left: -100vw;}
}
</style>

On 11/26/2023 at 4:26 AM, tuanphan said:

Replace example lottie file with your file

Hi, sorry I did not fully understand your instruction. What kind of file should I use? Can it just be the logo of our company? And it looks like I need to upload it somewhere in order to get a link for the code?

So you want to replace it with a logo, or a logo + text or a text or? We can adjust code easier

If replace logo, you can send here, we can give you logo url

3 hours ago, tuanphan said:

So you want to replace it with a logo, or a logo + text or a text or? We can adjust code easier

If replace logo, you can send here, we can give you logo url

Hi, I do want to have my company's logo on a white background. Attached is the logo.

On 11/28/2023 at 7:53 PM, KhanhLy174 said:

 

Hi, I do want to have my company's logo on a white background. Attached is the logo.

Use this code to Website Tools > Code Injection > Footer

<!-- Container for the splash screen with a specified ID -->
<div class="splash-wrapper" id="loader-container">
    <img src="https://content.invisioncic.com/p289038/monthly_2023_11/LogoTANIQtransparent.thumb.png.0c1808606ac76767e354e33194011587.png"/>
</div>

<style>
  div#loader-container img {
    max-width:500px;
}
  /* Loader animation styles */
  .splash-wrapper {
    display: none; /* Initially hidden */
    position: fixed;
    z-index: 9999;
    background-color: white;
    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: 5s;
    top: 0;
  }

  @keyframes slideOut {
    from {
      margin-left: 0vw;
    }
    to {
      margin-left: -100vw;
    }
  }
  @media screen and (max-width:767px) {
  div#loader-container {
    background-size: cover;
}
div#loader-container img {
    max-width: 300px;
}
  }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
    setTimeout(function(){
        $('.splash-wrapper img').fadeIn(500);
    }, 3000);
});
</script>

See demo: https://tuanphan3.squarespace.com/1images-loading?noredirect

pass: abc

On 11/30/2023 at 5:21 AM, tuanphan said:

Use this code to Website Tools > Code Injection > Footer

Hi, I put the code in as instructed but the effect did not work.

22 hours ago, KhanhLy174 said:

Hi, I put the code in as instructed but the effect did not work.

What is site url?

21 minutes ago, tuanphan said:

What is site url?

Hi. Here is our website: https://www.taniq.com/

Where did you add the code? Currently I don't see the code in Code Injection > Footer

Can you take a screenshot the position where you added the code?

3 minutes ago, tuanphan said:

Where did you add the code?

Hi. Sorry I removed the code after seeing that it didn't work. I just now added it back to the Footer of Code Injection

19 hours ago, tuanphan said:

<!-- Container for the splash screen with a specified ID -->
<div class="splash-wrapper" id="loader-container">
    <img src="https://content.invisioncic.com/p289038/monthly_2023_11/LogoTANIQtransparent.thumb.png.0c1808606ac76767e354e33194011587.png"/>
</div>

<style>
  div#loader-container img {
    max-width:500px;
}
  /* Loader animation styles */
  .splash-wrapper {
    display: none; /* Initially hidden */
    position: fixed;
    z-index: 9999;
    background-color: white;
    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: 5s;
    top: 0;
  }

  @keyframes slideOut {
    from {
      margin-left: 0vw;
    }
    to {
      margin-left: -100vw;
    }
  }
  @media screen and (max-width:767px) {
  div#loader-container {
    background-size: cover;
}
div#loader-container img {
    max-width: 300px;
}
  }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
    setTimeout(function(){
        $('.splash-wrapper img').fadeIn(500);
    }, 3000);
});
</script>

This code works. Thank you so much.

19 hours ago, tuanphan said:

updated code

Actually, I just realized that the page loader applies to all pages on the website. Can I only apply this to the Home page?

42 minutes ago, KhanhLy174 said:

Actually, I just realized that the page loader applies to all pages on the website. Can I only apply this to the Home page?

You can remove code from Site wide Code Injection to Homepage Header Code Injection

20 minutes ago, tuanphan said:

You can remove code from Site wide Code Injection to Homepage Header Code Injection

It works. Thank you 🙏

On 11/24/2023 at 5:22 AM, tuanphan said:

An effect like this example? https://tuanphan3.squarespace.com/lottie-loading-one?noredirect

pass: abc

Hi, 

I am trying to create the same effect, could you tell me what preparation I need to do to create the animated logo and upload it as a link? I m not a coder so I need a bit of guidance. Thank you!

On 2/9/2024 at 4:02 PM, Jsu said:

Hi, 

I am trying to create the same effect, could you tell me what preparation I need to do to create the animated logo and upload it as a link? I m not a coder so I need a bit of guidance. Thank you!

If you have a static image logo, I can give you new code.

This is an example with logo image file

https://tuanphan3.squarespace.com/1images-loading?noredirect

pass: abc

Piggy backing off this, how would you get the image to fade in and out as the effect rather than a slide screen? Below is the code. Or if possible having it slide from the right off screen to center, then center to left off screen.

<!-- Container for the splash screen with a specified ID -->
<div class="splash-wrapper" id="loader-container">
    <img src="https://images.squarespace-cdn.com/content/v1/649b429616032536f15d518f/2ae3c744-e26c-4b79-8550-0b9dee0ae285/cropped-Newport-Circle-Black-NoBckGrnd-2022.png?format=1500w"/>
</div>

<style>
  div#loader-container img {
    max-width:500px;
}
  /* Loader animation styles */
  .splash-wrapper {
    display: none; /* Initially hidden */
    position: fixed;
    z-index: 9999;
    background-color: white;
    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: 1.5s;
    top: 0;
  }

  @keyframes slideOut {
    from {
      margin-left: 0vw;
    }
    to {
      margin-left: -100vw;
    }
  }
  @media screen and (max-width:767px) {
  div#loader-container {
    background-size: cover;
}
div#loader-container img {
    max-width: 300px;
}
  }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
    setTimeout(function(){
        $('.splash-wrapper img').fadeIn(300);
    }, 2000);
});
</script>

On 2/23/2024 at 4:12 AM, Cdonn said:

Piggy backing off this, how would you get the image to fade in and out as the effect rather than a slide screen? Below is the code. Or if possible having it slide from the right off screen to center, then center to left off screen.

<!-- Container for the splash screen with a specified ID -->
<div class="splash-wrapper" id="loader-container">
    <img src="https://images.squarespace-cdn.com/content/v1/649b429616032536f15d518f/2ae3c744-e26c-4b79-8550-0b9dee0ae285/cropped-Newport-Circle-Black-NoBckGrnd-2022.png?format=1500w"/>
</div>

<style>
  div#loader-container img {
    max-width:500px;
}
  /* Loader animation styles */
  .splash-wrapper {
    display: none; /* Initially hidden */
    position: fixed;
    z-index: 9999;
    background-color: white;
    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: 1.5s;
    top: 0;
  }

  @keyframes slideOut {
    from {
      margin-left: 0vw;
    }
    to {
      margin-left: -100vw;
    }
  }
  @media screen and (max-width:767px) {
  div#loader-container {
    background-size: cover;
}
div#loader-container img {
    max-width: 300px;
}
  }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
    setTimeout(function(){
        $('.splash-wrapper img').fadeIn(300);
    }, 2000);
});
</script>

Can you share link to page where you added this code?

On 2/24/2024 at 7:59 PM, tuanphan said:

Can you share link to page where you added this code?

Residential — Newport Property Construction (squarespace.com)

Change this code

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

to this

@keyframes slideOut {
    from {
        visibility: visible;
        opacity: 1;
    }
    to {
        visibility: hidden;
        opacity: 0;
    }
  }

is it possible to get an image to load in and then grow to it's correct size on homepage only load? 

like this site: www.capsule-design.studio

my site: www.moonlitdesign.uk/home-old