Creating an animated loading screen for Squarespace (7.0 & 7.1)

[@oddedible]

Thank you so incredibly much! This video was a gigantic help. I tried a multitude of other tutorials but they all left me with tangles of code. This one was the only one that worked, and I appreciate how you explained everything so effectively. I did a fade out animation using the support you gave someone else in the comments. Thanks again!

[@beatrizecaraballo]

I'm so happy to hear you found the explanation helpful! So cool that you were able to swap the effect as well. Thanks so much for your lovely comment! 🙌

[@oddedible]

​@@beatrizecaraballo Hey Beatriz! No problem at all. Just wanted to share my appreciation! I wanted to ask, would you happen to know what I can inject into my code so that my animation only appears on the homepage and not any of the other pages? It's meant to act as an introduction to the website, not a loading screen across the whole site! If its not something I inject into the code, maybe it's where I place it? Header/footer code? Thanks so much for your time and kindess 🥰

[@beatrizecaraballo]

My pleasure! And absolutely! You can add the HTML part of the code inside the Code Injection section of your chosen page (Pages panel > Cog icon next to your page > Advanced > Page Header Code Injection) instead of inside the whole site's Code Injection section (Settings > Developer Tools > Code Injection). That will make it appear only on the pages you directly add it to vs. the entire site. Hope that helps!

[@azalana555]

Wow! Thank you, Beatriz, you are such a great teacher! Everything is super clear and the way that you deliver the message makes all the complicated things look easy! I followed your instructions and it all worked! Thank you for all your hard work, it is so valuable for us beginners!! Anna

[@beatrizecaraballo]

You're most welcome, Anna! I'm thrilled to hear you found the tutorial helpful 🙌 Thank you for such a sweet comment, I really appreciate that!

[@sethhoffman241]

This was super helpful. You are a great instructor! Looking forward to learning more from you in the future :)

[@beatrizecaraballo]

Thank you so much! That's really kind of you 🙌

[@lewisbray4427]

thanks you so much for this tutorial. I have manged to get everything to work but when I put my PNG in it doesnt show up. - it's exported back and white as a png so should be showing up on my screen but nothing. Any advice would be really helpful. thanks :)

[@isabelcarluen1350]

So cool!!! I've been wanting to do this! Thank you for this tutorial!!! 🙏🏼

[@beatrizecaraballo]

Thanks so much, Isabel! I'm happy to hear you found the tutorial helpful. You're most welcome 😊

[@camillapapale1523]

You are a genius! This is perfect.

[@beatrizecaraballo]

That's really kind of you, I'm glad the tutorial was helpful! 🙌

[@camillapapale1523]

Beatriz, I used this method to great success (except, I added the video files directly to the CSS) and it works beautifully across all browsers but Chrome and Firefox on desktop. I am wondering if you have ever encountered the same issue.

[@beatrizecaraballo]

Hey Camilla! Interesting situation. I just saw your email so I'll answer through there!

[@xiarenarnold281]

Hello! This is amazing. Trying to keep up -- is there a way for it to spin horizontal? (like a coin) right to left, etc. once then stop? Instead of rotating around 360?

[@beatrizecaraballo]

Heya! Thanks so much and I LOVE that animation idea. You can totally do that. I just added the corresponding animation to the code section of the post, so you can grab it from there! It's option #3: www.beatrizcaraballo.com/blog/creating-animated-loading-screen-squarespace Make sure to include the base CSS as well, and option 1 or 2 for the "leaving" animation of the screen. Hope that helps!

[@incubus0857]

Hey Beatriz, thanks for the help! The animation works, but it happens to all of my pages, not just on load. If I click a child page, the animation happens there. If I refresh the page, it happens again. Is there a way to do it where it only loads when they go to the homepage, not on sub pages?

[@beatrizecaraballo]

Heya! You're most welcome 🙌 You can make the loading screen appear only on the pages you choose by adding the HTML portion to the corresponding Page Header Code Injection section (Cog Icon > Advanced Tab), instead of the global Code Injection section of the site!

[@nahlah_mata]

This has been so helpful! I was wondering if it's possible to alter the code to make the logo pulse?

[@beatrizecaraballo]

I'm happy to hear that! And yes, you can alter the "scrollingLogo" keyframes animation to make the image scale instead of rotate, to create your pulse effect. You can start off with this: @keyframes scrollingLogo { 0% { transform: translate(-50%, -50%) scale(1); } 50% { transform: translate(-50%, -50%) scale(1.1); } 100% { transform: translate(-50%, -50%) scale(1); } } And then adjust the scale values as needed to make the animation more or less obvious.

[@lzeches5]

Hi Beatriz, I'm trying to implement this code and Squarespace is telling me I have a syntax error on line 1. In fact, adding a simple line of code like hello gives me the same result. I got to about the 5:16 mark in your video and my page didn't go grey. In fact, nothing changed at all. From what I've googled, there are a lot of issues embedding html onto javascript sites. Am I just running into a fluke error? Should I just keep coding and wait for the page to populate? It should also be noted that when I right click on my page and search through the "Inspect" option, I can't find my initial code injection at all (mine matches yours exactly).

[@beatrizecaraballo]

Hey Lynette! I'm afraid I can't be 100% sure of what's going on without looking at the site, but from what you're describing it seems like the HTML is being added inside the Custom CSS window. Is that correct? If so, keep in mind only CSS can be added in there so no HTML tags should be present. If something else is going on and/or you need more help, feel free to reach out through beatrizcaraballo.com/contact so I can take a look at your page!

[@mossaramadan2581]

Hello and thank you so much for this amazing course. But I have some concerns because I tried everything but I insert a gif instead of adding a regular picture and I didn’t add the first keyframs I just added the second but the screen loads so fast that I won’t be able to get to see the loading screen, so I just want to ask if there’s a way to delay it like for a second or two before it goes away thank you

[@beatrizecaraballo]

Heya! You're most welcome! 🙌 And that's a great question. You can adjust the delay of the whole loading by modifying the inside the goodbyeScreen animation declaration, this one: animation: goodbyeScreen .5s forwards cubic-bezier(.5,-.75,.7,2); Hope that helps!

[@hayleesupple3405]

Hi Beatriz ! Thank you for this code tutorial !! However, is it possible to set this animation just for the homepage while visitors arrive on our website (like a splash animation) ? Instead of every single page of our website as a loading page ? I saw your reply for this and I tried taking that code and just injecting it into the code injection header spot and I am seeing the code in the actual header of the website and its not working. What am I doing wrong?

[@beatrizecaraballo]

Heya! It's my pleasure 🙌 That may be happening if the CSS was also moved to the header area, since that'll require tags around it. In any case, you'll need to move ONLY the HTML part into the Cog icon of your page > Advanced > Page Header Code Injection area. The CSS can stay inside the Custom CSS window, even if you just want the loading screen on one page! Double-check that everything's in the right place and if the code is still being stubborn, feel free to send over your site through beatrizcaraballo.com/contact so I can take a closer look.

[@hayleesupple3405]

@@beatrizecaraballo This worked!! Thank you for explaining! :) I never knew there was that advanced code option within the page setting

[@beatrizecaraballo]

​ @hayleesupple3405 My pleasure! I'm happy to hear that helped. I know, right? It's super hidden yet really useful for that kind of thing

[@simoncharbonneau]

Great stuff! Really adds a whole layer of presentation to a site! Do you think it would be possible to hide the html in the page for a personal site that doesn’t have the code injection feature? I’m guessing that would mean animating the z index or the opacity? Sounds like a bad idea 😅

[@beatrizecaraballo]

It definitely does! And that's a really good question. If I'm not mistaken, in the Personal plan HTML can still be added to Code Blocks, so you can add the structure of the loading screen in one of those blocks instead of the Code Injection section! To make the loading screen apply globally, then you can add the Code Block inside the very bottom of the Footer area of the site. The only caveat is that, for 7.1, the footer area needs to have a large-ish z-index value that can be applied with this: #footer-sections { z-index: 100; } However, that may affect the new border feature if it's in use for the footer or pre-footer section. In any case, if you try that out, I'd love to know how it turns out!

[@sydneyprusso7761]

Hi Beatriz, this is such a great tutorial! Would this still work with an MP4 or GIF that I already animated via after effects? I'd love to put a more intricate animation on my homepage. Thanks in advance!

[@beatrizecaraballo]

Heya Sydney! I appreciate that, thank you! And yes, this would work with a GIF, 100%!! You can also check out Toris' comment below if you need some tips on using video.

[@ismrgrey]

Hello I had two questions. I had another short code for gallery before this one so I double enter and started this code Just like you .loading etc. However the background to see what was being done appeared and disappeared i couldn’t see anything that was being done but since I liked the way you did it I just did all my code mostly all according to yours with the exception of background color and my slide up instead of side. Now my issue is this loading screen doesn’t show at all. And question 2 your last special sliding effect is only for size to side right? Since mine is up it wouldn’t apply or does it convert.

[@beatrizecaraballo]

Heya! The loading screen not showing could be caused by different factors including an issue with the HTML code (or its location), an issue with something else covering the screen, etc. so you can start by double-checking that the original code works, and then make the modifications to it again! As for the sliding effect, you can totally change it to make the screen leave by sliding up. You'll need to use transform: translateY(-100%) instead of transform: translateX(-100%); in the goodbyeScreen animation. If the code still gives you problems after this, feel free to reach out to [e-mail] with a link to your site so I can see how I can help you further!

[@RodGotfried]

Hi Beatriz, love the tutorial! One question, I can get the animation working perfectly, but for some reason, all of my links, buttons etc are now non-clickable? Wondering what I've done wrong! Any help would be great, thanks!

[@beatrizecaraballo]

Hey Rod! I'm thrilled to hear that! 🙌 Did you swap the animation from slide-out to fade-out? If so, you'll need to include the pointer-events: none declaration in the code as well, to make sure the screen doesn't interfere with the content once it disappears from view! I.e, your "goodbyeScreen" animation should look like this: @keyframes goodbyeScreen { to { opacity: 0; pointer-events: none; } } Hope this helps! If the issue is still there after that change, you can reach out to me via email at [e-mail] so I can take a closer look.

[@selwynsbydesign]

I tried this a long time ago for my branding & website design site; didn't work. Tried it again on a new site I just created - worked! Thank you:). (guess I can copy the code over) I've just noticed though it happens when someone lands on my site....and when they click About, AND Portfolio....and every other page. Which part of the code needs to change so it just occurs when they Land on the site?🤔 Thank you in advance!

[@beatrizecaraballo]

I'm glad to know this worked the second time! 🙌 And yes, the loading screen as is will load everytime someone lands on the site. You can narrow it down to specific pages by moving the HTML portion of the code to the Page Header Code Injection section of certain pages, instead of keeping it inside the GLOBAL Code Injection area of the site. However, if you want to have the screen load only ONCE when someone visits the site (regardless of the page they land on) that requires additional customization. Feel free to reach out via email to [e-mail] if that's something you're interested in!

[@Paj-w7i]

Hi Beatriz , hopefully you wil be fine.It's amazing class but I want contact / login details in loading screen .Is it possible in squarespace. If yes . How?

[@beatrizecaraballo]

Heya! That's a really good question. It completely depends on the way you want it to work. If you can share a link to a site that already has what you're after that would be super helpful!

[@VanessaCOPIN]

Hi Beatriz ! Thank you for this code tutorial !! However, is it possible to set this animation just for the homepage while visitors arrive on our website (like a splash animation) ? Instead of every single page of our website as a loading page ? Additionally, I really would like to have a fading animation for the whole splash animation page. Do you have a tutorial for this ? Thank you

[@beatrizecaraballo]

Glad to hear you found it helpful! 🙌 And yup, you totally can. You'll need to add the HTML part of the code inside the Header Code Injection of the page itself, instead of the site's global Code Injection section. As to creating a fade animation, you can replace this part of the code: @keyframes goodbyeScreen { to { transform: translateX(-100%); } } With this: @keyframes goodbyeScreen { to { opacity: 0; pointer-events: none; } } Hope this helps!

[@VanessaCOPIN]

@@beatrizecaraballo it was exactly what I was talking about !! It is perfect, thank you 🙏🏼

[@AlessiaApril]

Hey, super useful, How can I change the background of the logo? Isn't of having it entirely a white background?

[@beatrizecaraballo]

Glad to hear it! To change the background for the whole screen, you can modify the color value where it original says: background-color: #fafafa; But if you want to ADD a background right behind the logo you're uploading, you can do that by including the background-color property (with whichever value you want to use) under the .loading-screen-image selector instead, like so: //To style the logo or image .loading-screen-image { animation: scrollingLogo 1 3s linear; background-image: red; . . . } Hope that helps!

[@AlessiaApril]

@@beatrizecaraballo Thank you, I figured something out, but will try this to ! xxx

[@AlessiaApril]

@@beatrizecaraballo doesn't work, I tried this - //To style the logo or image .loading-screen-image { animation: scrollingLogo 1 3s linear; background-color: black; background-image: url(logo.png);

[@beatrizecaraballo]

Hmmm, there could be many reasons why it's not working, but you can try to reduce the background-size value inside that same snippet to 50% instead of "contain" to see if it's a matter of the image covering the color! If that doesn't work, feel free to send over a link to your site + the trial password (if the site isn't live) to [e-mail] so I can take a closer look.

[@sheisontheway]

Thank you so much for this! I have been able to implement it so easily! I cannot seem to be able to change the goodbye screen to a dissolve - fade out - change of opacity type of transition. Do you know what I should change on this part to make it work? //Animation for the sliding screen @keyframes goodbyeScreen { to { transform: translateY(-100%) } }

[@beatrizecaraballo]

You're most welcome! 🙌 And to swap the animation for a fade-out, you can replace the current keyframe declaration: @keyframes goodbyeScreen { to { transform: translateX(-100%); } } For these ones: @keyframes goodbyeScreen { to { opacity: 0; pointer-events: none; } } Hope that helps!

[@sheisontheway]

@@beatrizecaraballo this is so nice! Thanks a million, you are incredible!

[@beatrizecaraballo]

It's my pleasure! 🙌

[@fleau699]

Hey Beatriz! Thank you for the useful tutorial. It worked for me. Can you help me make the logo smaller for mobile? when I change the max width, it only changes on the desktop view. Thank you in advance!

[@beatrizecaraballo]

Hey Fleau! It's my pleasure! I'm glad to hear that 🙌 Absolutely, you can use a media query with the breakpoint of your choice to decide the screen size starting point where the resizing should happen, and then modify both the height and the width of the image element, like so: @media screen and (max-width: 767px) { .loading-screen-image { height: 40px; width: 40px; } } Hope that helps!

[@torisstephens4438]

This was wonderful I learned a lot. At this time I am stuck with the following: so I would love to do the fade animation that you mention but you didn't show in the video. I don't see it as a translate command, do you have an example? Also, When the screen size changes how can we call a different image or GIF for that? I have an animated GIF for full screen but doesn't work when the screen size changes to mobile. T

[@beatrizecaraballo]

I'm glad to hear that! 🙌 And to swap the animation for a fade-out, you can replace this part of the animation: @keyframes goodbyeScreen { to { transform: translateX(-100%); } } For this: @keyframes goodbyeScreen { to { opacity: 0; pointer-events: none; } } As for swapping the image on smaller devices, you can change the background-image url within a media query of your choice, like so: @media screen and (max-width: 767px) { .loading-screen-image { background-image: url(MOBILE-ICON.png); } } You can adjust the 767px breakpoint to the screen size where you want to trigger that mobile icon. Hope this helps!

[@torisstephens4438]

@@beatrizecaraballo hey thanks for the reply. Yeah I was having a problem getting the image to go full screen, in short it's a gif or mp4. What I did was remove the internal div you provide and placing my video in the in the out div. I was able to allow that go full screen since I didn't need the animation you were demoing. after placing the video in -100% was not working correctly on the computer but better on the phone. But I knew that's not what I was exactly going for. But to fix that Issue, I switched from my sizes to vh and vw (I'm a novice so had no real idea what those meant.). still that helped a lot to get my video's/images centered no matter the screen size. .loading-screen{ animation: logofadeout .0s forwards 8.8s; background-image: url(); background-repeat: no-repeat; background-position: center; background-size: cover; height:100vh; position:fixed; left:0; top:0; width: 100vw; z-index: 10000; } @keyframes logofadeout { 0% {opacity: 1;} 100% {opacity: 0; z-index:-10000 } } But while I got the animation, the full screen div blocked my navigation. so I had to change the z-index.

[@beatrizecaraballo]

@@torisstephens4438 Oh gotcha! That's a great fix, so thanks so much for for sharing it along with your modified code! And just in case, vw = viewport width and vh = viewport height. If you set those units as 100 (the way you did), that just means the element will take on 100% of the width/height, respectively, of the browser window. Therefore, if the browser resizes, the element does too. So you nailed it with that sizing!

[@Heisvic]

Is it possible if I can communicate with you in regards of a website I'm trying to build for myself? I need a bit of help and I feel that you would be extremely helpful on my case about adding a loading screen to my website. Thank You!!

[@beatrizecaraballo]

Sure thing! You can get in touch through this link: beatrizcaraballo.com/contact

[@nicolaslondon]

Hi, really incredible vide. You help me a lot and my websites looks incredible. I have a little question. How can i apply this only one time. Cause if someone click a link in my page it shows again and can be annoying having this loading screen for all pages

[@beatrizecaraballo]

Oh yay! I'm glad to hear you found the tutorial helpful 🙌 Regarding your question, you would need to set up cookies in order to stop the loading screen from showing more than once per user visit. However, if what you want is to simply have the screen load on, let's say, the Homepage, what you can do is move the HTML portion of the code into the Page Header Code Injection area of that specific page, instead of keeping it inside the global Code Injection section. I hope that helps! If you need more guidance with this customization, don't hesitate to reach out via email to [e-mail]. I'd be happy to point you in the right direction.