Elements not clickable after header code injection

After I successfully added an animation to welcome people to my website's homepage, none of the elements/blocks are now clickable. This makes all my buttons/links/forms unusable. It's as if the animation (that takes up the entire display) "covers" the page because it doesn't leave or the animation really end.

I believe it has to do with my (header) code injection because once I removed it it functioned normally. What can I add to my code injection to make sure that it doesn't "cover" the screen and mess with the functionality of my page?

Here's what the code looks like:

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

<div class="splash-wrapper">
    <lottie-player src="https://lottie.host/0124cef3-989a-4925-8b3f-40be3ed4f0c0/8oz4X96cUm.json" background="transparent" speed="1.3" style="width: 300px; height: 300px;" loop autoplay></lottie-player>
  <h2 style="color: #000000;">
    San Studio
  </h2>
</div>

<style>

.splash-wrapper {
  position: fixed;
  z-index: 9999;
  background-color: #f5f5f3;
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  animation-name: fadeOut;
  animation-fill-mode: forwards;
  animation-duration: 2s;
  animation-delay: 3s;
}

@keyframes fadeOut {
   50% {opacity: 1;}
   100% {opacity: 0;} 
}
</style>

Edit:  This did not work!

Should I perhaps change the animation-fill-mode value from forwards to initial or none?

Thank you!

What is site url?

20 minutes ago, tuanphan said:

What is site url?

@tuanphan

https://orca-aardvark-3hxa.squarespace.com/ 

the password is slippers

🙂

bump!

On 5/1/2023 at 5:26 PM, oddibledaisy said:

@tuanphan

https://orca-aardvark-3hxa.squarespace.com/ 

the password is slippers

🙂

It looks fine to me

https://www.loom.com/share/f390f9595a9f45e2975b4c5ac07df04d

Hi @tuanphan, i removed the code injection timingly before you viewed it.. Can I show you what it looks like with the code? It is the code that messes up the functionality of my elements..

On 5/17/2023 at 11:15 AM, oddibledaisy said:

Hi @tuanphan, i removed the code injection timingly before you viewed it.. Can I show you what it looks like with the code? It is the code that messes up the functionality of my elements..

You can add the code, we can check easier.

If the site is live & you can't add it, you can duplicate the site and add there then share link to duplicated site

On 5/20/2023 at 11:32 AM, tuanphan said:

You can add the code, we can check easier.

If the site is live & you can't add it, you can duplicate the site and add there then share link to duplicated site

Hi again @tuanphan! I added the code injection again so you can see. again here is the code i used:

<div class="splash-wrapper">
    <lottie-player src="https://lottie.host/0124cef3-989a-4925-8b3f-40be3ed4f0c0/8oz4X96cUm.json" background="transparent" speed="1.3" style="width: 300px; height: 300px;" loop autoplay></lottie-player>
  <h2 style="color: #000000;">
    San Studio
  </h2>
</div>

<style>

.splash-wrapper {
  position: fixed;
  z-index: 9999;
  background-color: #f5f5f3;
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  animation-name: fadeOut;
  animation-fill-mode: forwards;
  animation-duration: 2s;
  animation-delay: 3s;
}

@keyframes fadeOut {
   50% {opacity: 1;}
   100% {opacity: 0;} 
}
</style>

Add this to Design > Custom CSS
 

#page section, #siteWrapper {
    z-index: 123456789 !important;
    position: relative;
}

On 5/25/2023 at 5:07 PM, tuanphan said:

Add this to Design > Custom CSS
 

#page section, #siteWrapper {
    z-index: 123456789 !important;
    position: relative;
}

 

Hi @tuanphan, first of all thank you for your time! really appreciate it!

I did as instructed and the intro animation no longer works but the elements are now clickable. 

I made sure to correctly add the code to Design > Custom CSS so not sure what the issue is now.

On 5/23/2023 at 6:23 PM, oddibledaisy said:

 

Hi again @tuanphan! I added the code injection again so you can see. again here is the code i used:

<div class="splash-wrapper">
    <lottie-player src="https://lottie.host/0124cef3-989a-4925-8b3f-40be3ed4f0c0/8oz4X96cUm.json" background="transparent" speed="1.3" style="width: 300px; height: 300px;" loop autoplay></lottie-player>
  <h2 style="color: #000000;">
    San Studio
  </h2>
</div>

<style>

.splash-wrapper {
  position: fixed;
  z-index: 9999;
  background-color: #f5f5f3;
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  animation-name: fadeOut;
  animation-fill-mode: forwards;
  animation-duration: 2s;
  animation-delay: 3s;
}

@keyframes fadeOut {
   50% {opacity: 1;}
   100% {opacity: 0;} 
}
</style>

 

Where did you get this code? I think the code should have a <script> code, not sure.

On 6/3/2023 at 7:28 AM, tuanphan said:

Where did you get this code? I think the code should have a <script> code, not sure.

I used this as reference (code injection) and added smooth scroll (design > custom css)

Accidentally cut off the <script> part of the code when I quoted it earlier but here it is in full!

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

<div class="splash-wrapper">
    <lottie-player src="https://lottie.host/0124cef3-989a-4925-8b3f-40be3ed4f0c0/8oz4X96cUm.json" background="transparent" speed="1.3" style="width: 300px; height: 300px;" loop autoplay></lottie-player>
  <h2 style="color: #000000;">
    San Studio
  </h2>
</div>

<style>

.splash-wrapper {
  position: fixed;
  z-index: 9999;
  background-color: #f5f5f3;
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  animation-name: fadeOut;
  animation-fill-mode: forwards;
  animation-duration: 2s;
  animation-delay: 3s;
}

@keyframes fadeOut {
   50% {opacity: 1;}
   100% {opacity: 0;} 
}
</style>

I'm unfamiliar with integrating loading page animations - this is my first time trying it out. Maybe there's a better way to integrate my animation? All I find online are Lottie player/file tutorials!

I think the issue is the animation doesn't actually "leave" the screen, that's why when I have it activated I can't click any of the elements. So perhaps I need to make adjustments to the animation fill-mode/duration/delay/ @keyframes fadeOut parts?

Good day!
Just bumping this in case anybody knows what's up 🙂 

Thank you for the time! 

On 5/1/2023 at 11:10 AM, oddibledaisy said:

After I successfully added an animation to welcome people to my website's homepage, none of the elements/blocks are now clickable. This makes all my buttons/links/forms unusable. It's as if the animation (that takes up the entire display) "covers" the page because it doesn't leave or the animation really end.

You're right, this is exactly what is happening. The animation is covering the other page elements. This is because you've only used part of the solution from the YouTube video.

To explain in more detail, you've added the section of the code that adds the animation and then covers the entire viewport with that animation. Changing the opacity only makes it invisible - it doesn't remove the layer that is covering all the other elements. As you haven't added the last section of code, that removes the animation a few seconds later (the 'slideOut'), the animation remains there (albeit hidden) covering all your page elements and making them unclickable.

I don't recommend this as a permanent solution, but if you add pointer-events: none; to the .splash-wrapper this should demonstrate the issue by preventing clicks (and other pointer events) going to the animation layer.

.splash-wrapper {
  pointer-events: none;
}  

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

On 6/8/2023 at 4:44 PM, paul2009 said:

You're right, this is exactly what is happening. The animation is covering the other page elements. This is because you've only used part of the solution from the YouTube video.

To explain in more detail, you've added the section of the code that adds the animation and then covers the entire viewport with that animation. Changing the opacity only makes it invisible - it doesn't remove the layer that is covering all the other elements. As you haven't added the last section of code, that removes the animation a few seconds later (the 'slideOut'), the animation remains there (albeit hidden) covering all your page elements and making them unclickable.

I don't recommend this as a permanent solution, but if you add pointer-events: none; to the .splash-wrapper this should demonstrate the issue by preventing clicks (and other pointer events) going to the animation layer.

.splash-wrapper {
  pointer-events: none;
}  

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

Thank you for your assistance 🙂 I was guided to find the correct code with your guidance and @tuanphans.

I redid it:

/***************************************
Loading page animation
***************************************/

.loading-screen {
  animation: logofadeout 1s
  forwards 4.2s;
  background-color: #f7f7f2;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  z-index: 10000;
}

.loading-screen-image {
  background-image: url(https://static1.squarespace.com/static/641987523e92910d744d2eeb/t/64b3c546e8eac420690b78ff/1689503047222/loading+animation.gif);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100%;
  position: absolute;
  height: 275px;
  left: 50%;
  right: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 187px;
}

@keyframes logofadeout
{
  0% {opacity: 1;}
  100% {opacity: 0; z-index:-20000
}
}

- no longer using 'lottie player' (changed to a new div, uploaded logo [to custom css] to be animated as a gif instead of a .json.) 

- elements are clickable, just had to adjust the z-index

- adjusted animation so it actually leaves the screen; i played around with some of the animation codes

Leaving this here for future reference, maybe it will help someone! You can view the website i finished here: https://www.sanstudioarchitecture.com/ 😁

A video that was extremely useful: