oddibledaisy

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:

Good day! Just bumping this in case anybody knows what's up 🙂 Thank you for the time!

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?

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.

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>

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

bump!

@tuanphan https://orca-aardvark-3hxa.squarespace.com/ the password is slippers 🙂

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!