Create page loading/page transition effect

I'm glad I found this thread. Your suggestions were spot-on!

On 12/7/2023 at 3:24 PM, tuanphan said:

updated code, I added some attributes, you try adding it again, if it still doesn't work, try moving the code to Code Injection > Header,

if it still doesn't work, you can keep the code, I can check again easier

 

As a further question to this code: Would it be possible to attach this code to the index-page and be visible only once, when you first open the page and then not again anymore, until you revisit the site again.

We refer back to the index page every sub-page, but now that action happens every time you redirect yourself to that main index page.

I applied the code to the footer of the specific index page (All projects/ .sqs-gallery-design-autocolumns), but that doesn't solve the reoccurring of the logo action.

our site: https://www.burtonhamfelt.nl/

On 3/19/2024 at 11:01 PM, bhua_2022 said:

As a further question to this code: Would it be possible to attach this code to the index-page and be visible only once, when you first open the page and then not again anymore, until you revisit the site again.

We refer back to the index page every sub-page, but now that action happens every time you redirect yourself to that main index page.

I applied the code to the footer of the specific index page (All projects/ .sqs-gallery-design-autocolumns), but that doesn't solve the reoccurring of the logo action.

 

our site: https://www.burtonhamfelt.nl/

 

I see some code in this thread, which code did you use? I can adjust for your site easier

14 minutes ago, tuanphan said:

I see some code in this thread, which code did you use? I can adjust for your site easier

<!-- Container for the splash screen with a specified ID -->
<div class="splash-wrapper" id="loader-container">
    <img src="https://static1.squarespace.com/static/5845886620099e10cb851e10/t/65f9bcbd71c39d12a15aae94/1710865597709/BurtonHamfelt+-+Logo+-+2024+-+white.png"/>
</div>

<style>
  div#loader-container img {
    max-width:150px;
}
  /* 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: .65s;
    animation-delay: 1s;
    top: 0;
  }

  @keyframes slideOut {
    from {
      margin-top: 0vw;
    }
    to {
      margin-top: -100vw;
    }
  }
  @media screen and (max-width:767px) {
  div#loader-container {
    background-size: cover;
}
div#loader-container img {
      max-width: 150px;
}
   @keyframes slideOut {
    from {
      margin-top: 0vw;
    }
    to {
      margin-top: -600vw;
    }
  }
    
</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>

//////////////

the image I would like to switch with a 2second video in the end. This code works perfectly, only does it show up every time you're redirected to the indexpage, which is often. I would like to alter the code so that it pop-ups only once when you enter the site for the first time.

On 3/21/2024 at 3:49 PM, bhua_2022 said:

<!-- Container for the splash screen with a specified ID -->
<div class="splash-wrapper" id="loader-container">
    <img src="https://static1.squarespace.com/static/5845886620099e10cb851e10/t/65f9bcbd71c39d12a15aae94/1710865597709/BurtonHamfelt+-+Logo+-+2024+-+white.png"/>
</div>

<style>
  div#loader-container img {
    max-width:150px;
}
  /* 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: .65s;
    animation-delay: 1s;
    top: 0;
  }

  @keyframes slideOut {
    from {
      margin-top: 0vw;
    }
    to {
      margin-top: -100vw;
    }
  }
  @media screen and (max-width:767px) {
  div#loader-container {
    background-size: cover;
}
div#loader-container img {
      max-width: 150px;
}
   @keyframes slideOut {
    from {
      margin-top: 0vw;
    }
    to {
      margin-top: -600vw;
    }
  }
    
</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>

 

 

 

//////////////

the image I would like to switch with a 2second video in the end. This code works perfectly, only does it show up every time you're redirected to the indexpage, which is often. I would like to alter the code so that it pop-ups only once when you enter the site for the first time.

You can use script code under your code

<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>

Hi Tuan! @tuanphan

We now have decided on which video to use for the landing-page, however I can't seem to make the video play automatically when entering the website. It looks as if it just sits there as a still frame, with an odd crop?

Could you please help me tweak the code? Secondly, I would like for the video, when finished playing, to just disappear and not do that slide to the left anymore. But just be gone with no extra effect, or if an effect is needed maybe a fade out?

Hope you can help me!

website: Burton Hamfelt

videolink (added into the squarespace files): https://static1.squarespace.com/static/5845886620099e10cb851e10/t/66696e95624a89301ee59d03/1718185622431/01_BHUA+Landingspage+Collapsed+ending.mp4

Code used: 

<!-- Container for the splash screen with a specified ID -->
<div class="splash-wrapper" id="loader-container">
    <video src="https://static1.squarespace.com/static/5845886620099e10cb851e10/t/66696e95624a89301ee59d03/1718185622431/01_BHUA+Landingspage+Collapsed+ending.mp4"/>
</div>

<style>
  div#loader-container video {
    max-width:100%;
}
  /* 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.5s;
    animation-delay: 3s;
    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>

Hi there, any chance you could help me with a specific request as well @tuanphan? 🙏

I'm trying to add a loading page to the below website - only whilst the homepage is loading, not between transitions of the page. I tried the codes in this thread but they all seem to apply to the whole website. 

I've attached the .gif I'd like to add alongside some some text on a black background, but I can adjust this later I think.

https://hollen-hollenplus.squarespace.com
Password: Tester

Thanks so much!

On 7/1/2024 at 10:24 PM, lisanemetz said:

Hi there, any chance you could help me with a specific request as well @tuanphan? 🙏

I'm trying to add a loading page to the below website - only whilst the homepage is loading, not between transitions of the page. I tried the codes in this thread but they all seem to apply to the whole website. 

I've attached the .gif I'd like to add alongside some some text on a black background, but I can adjust this later I think.

https://hollen-hollenplus.squarespace.com
Password: Tester

Thanks so much!

Tester

password is incorrect

On 7/3/2024 at 12:21 PM, tuanphan said:

Tester

password is incorrect

Hey @tuanphan, sorry it's lower case t - 'tester'. Could you have another look please? 🙏 Thanks!

On 7/10/2024 at 3:05 PM, lisanemetz said:

Hey @tuanphan, sorry it's lower case t - 'tester'. Could you have another look please? 🙏 Thanks!

Use this code to Homepage Header Injection

<div class="splash-wrapper" id="loader-container">
    <!-- Lottie animation player -->
    <img src="https://content.invisioncic.com/p289038/monthly_2024_07/_HOL_Symbol_colour.thumb.gif.3eecee5b0f88720d40b9d54283bcef46.gif"/>
</div>

<style>
  div#loader-container img {
    max-width:500px;
    position: relative;
}
  /* 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:10s;
  }

  @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>

On 7/13/2024 at 9:42 AM, tuanphan said:

Use this code to Homepage Header Injection

<div class="splash-wrapper" id="loader-container">
    <!-- Lottie animation player -->
    <img src="https://content.invisioncic.com/p289038/monthly_2024_07/_HOL_Symbol_colour.thumb.gif.3eecee5b0f88720d40b9d54283bcef46.gif"/>
</div>

<style>
  div#loader-container img {
    max-width:500px;
    position: relative;
}
  /* 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:10s;
  }

  @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>

Thank you @tuanphan 🙌 is there a way of customising it, so that it only loads when opening the homepage, not all the other pages on the site? Thank you!

On 7/13/2024 at 8:42 AM, tuanphan said:

Use this code to Homepage Header Injection

<div class="splash-wrapper" id="loader-container">
    <!-- Lottie animation player -->
    <img src="https://content.invisioncic.com/p289038/monthly_2024_07/_HOL_Symbol_colour.thumb.gif.3eecee5b0f88720d40b9d54283bcef46.gif"/>
</div>

<style>
  div#loader-container img {
    max-width:500px;
    position: relative;
}
  /* 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:10s;
  }

  @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 is exactly what I'm looking for to add to a client's website.

Is there a way @tuanphan to add a full-screen background image for desktop + mobile behind the animated logo?

On 7/15/2024 at 2:19 PM, lisanemetz said:

Thank you @tuanphan 🙌 is there a way of customising it, so that it only loads when opening the homepage, not all the other pages on the site? Thank you!

You can move code to Homepage Header Injection. Or you can use this code to Custom CSS to hide it on other pages

body:not(.homepage) #loader-container {
	display: none !important;
}

On 7/17/2024 at 3:36 PM, matt_thewalkcreative said:

This is exactly what I'm looking for to add to a client's website.

Is there a way @tuanphan to add a full-screen background image for desktop + mobile behind the animated logo?

Use this new code, replace Pixabay with your background image url

<div class="splash-wrapper" id="loader-container">
    <!-- Lottie animation player -->
    <img src="https://content.invisioncic.com/p289038/monthly_2024_07/_HOL_Symbol_colour.thumb.gif.3eecee5b0f88720d40b9d54283bcef46.gif"/>
</div>

<style>
  div#loader-container img {
    max-width:500px;
    position: relative;
}
  /* Loader animation styles */
  .splash-wrapper {
    display: none; /* Initially hidden */
    position: fixed;
    z-index: 9999;
    background-image: url(https://cdn.pixabay.com/photo/2024/06/01/12/35/ceiling-8802142_1280.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    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:10s;
  }

  @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>

On 7/19/2024 at 10:45 AM, tuanphan said:

You can move code to Homepage Header Injection. Or you can use this code to Custom CSS to hide it on other pages

body:not(.homepage) #loader-container {
	display: none !important;
}

 

Use this new code, replace Pixabay with your background image url

<div class="splash-wrapper" id="loader-container">
    <!-- Lottie animation player -->
    <img src="https://content.invisioncic.com/p289038/monthly_2024_07/_HOL_Symbol_colour.thumb.gif.3eecee5b0f88720d40b9d54283bcef46.gif"/>
</div>

<style>
  div#loader-container img {
    max-width:500px;
    position: relative;
}
  /* Loader animation styles */
  .splash-wrapper {
    display: none; /* Initially hidden */
    position: fixed;
    z-index: 9999;
    background-image: url(https://cdn.pixabay.com/photo/2024/06/01/12/35/ceiling-8802142_1280.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    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:10s;
  }

  @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>

 

That's great! Thank you – I'll give this a try.

On 7/19/2024 at 11:45 AM, tuanphan said:

You can move code to Homepage Header Injection. Or you can use this code to Custom CSS to hide it on other pages

body:not(.homepage) #loader-container {
	display: none !important;
}

 

Use this new code, replace Pixabay with your background image url

<div class="splash-wrapper" id="loader-container">
    <!-- Lottie animation player -->
    <img src="https://content.invisioncic.com/p289038/monthly_2024_07/_HOL_Symbol_colour.thumb.gif.3eecee5b0f88720d40b9d54283bcef46.gif"/>
</div>

<style>
  div#loader-container img {
    max-width:500px;
    position: relative;
}
  /* Loader animation styles */
  .splash-wrapper {
    display: none; /* Initially hidden */
    position: fixed;
    z-index: 9999;
    background-image: url(https://cdn.pixabay.com/photo/2024/06/01/12/35/ceiling-8802142_1280.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    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:10s;
  }

  @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>

 

Thank you so much! This worked (the CSS option) - the only thing is that now when any of the other pages (not home) are loading, the screen turns white and then orange. Is there a way of making this just black if the page takes a moment to load? Thanks so much!

On 7/24/2024 at 9:34 PM, lisanemetz said:

Thank you so much! This worked (the CSS option) - the only thing is that now when any of the other pages (not home) are loading, the screen turns white and then orange. Is there a way of making this just black if the page takes a moment to load? Thanks so much!

Can you share site url? I can check problem easier

On 7/26/2024 at 11:18 AM, tuanphan said:

Can you share site url? I can check problem easier

Yes of course, it's https://hollen-hollenplus.squarespace.com/ and password is tester

Thanks!

On 8/2/2024 at 3:46 AM, lisanemetz said:

Yes of course, it's https://hollen-hollenplus.squarespace.com/ and password is tester

Thanks!

I tried a page and it still shows orange all time

https://hollen-hollenplus.squarespace.com/hollenplus

On 8/3/2024 at 10:57 AM, tuanphan said:

I tried a page and it still shows orange all time

https://hollen-hollenplus.squarespace.com/hollenplus

Thanks - yeah exactly. Is there a way of making it black instead of orange? Thanks!

On 8/12/2024 at 7:10 PM, lisanemetz said:

Thanks - yeah exactly. Is there a way of making it black instead of orange? Thanks!

You mean make whole page black, instead of orange?? I think you can edit section > Change color

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

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

pass: abc

This example right here is exactly what i*m currently trying to do.

Could you share how it is made?

5 hours ago, thorguldager said:

This example right here is exactly what i*m currently trying to do.

Could you share how it is made?

You can use this code to Page Header Injection (code will run on one page) or Website Tools > Code Injection > Footer (code will run on all pages).

here I use Lottie file, if you want to use image, send me image file, I will adjust the code for you

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

<!-- Container for the splash screen with a specified ID -->
<div class="splash-wrapper" id="loader-container">
    <!-- Lottie animation player -->
    <lottie-player id="loader" 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>
  /* Loader animation styles */
  .splash-wrapper {
    display: none; /* Initially hidden */
    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: 0.65s;
    animation-delay: 5s;
  }

  @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>

Thank you sooo much! I have my own lottie animation, so this is perfect!!

On 10/20/2024 at 6:14 PM, thorguldager said:

Thank you sooo much! I have my own lottie animation, so this is perfect!!

If you have still problem in the future, you can let me know

On 11/23/2023 at 7:22 PM, tuanphan said:

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

pass: abc

Hi @tuanphan 

I want to add this effect to my website; my transition video is a mp4 file. So, where should I upload my video file to? I want a transition video when the user lands on my website. My website: https://www.pawpawpaw.dog/ 

Thank you!