No video :(

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

Beatriz Caraballo • Squarespace coding tutorials

Подписаться 946

Просмотров 6 тыс.

50% 1

Whether you call it pre load screen, splash screen, loading screen, loading animation or anything else, if you're looking to build a temporary "cover" for the content of your client's site before making a big reveal, this tutorial is for you!
There's more than one way to create and implement this type of element on a website, but today I want to share with you the one that I've found most flexible, based on the kind of animation we'll be giving it.
Enjoy!
You can grab the code over here:
beatrizcaraballo.com/blog/cre...
-----------------------------
//Links mentioned
Cubic-bezier curve tool: cubic-bezier.com/#.17,.67,.83...
Bennet Feely's Cubic Bezier examples: codepen.io/bennettfeely/pen/D...
---------------------------------------------------------------
Sidenote: we actually used another tool from Bennet Feely in this other tutorial: • How to create custom s... . He created the clippy tool too! bennettfeely.com/clippy/
---------------------------------------------------------------
-----------------------
//Timestamps
00:00 - Intro
01:16 - Building the loading screen with HTML
02:40 - Adding the necessary CSS to set up our loading screen
05:16 - Adding the logo to our preload screen
09:47 - Animating the logo to make it rotate
15:57 - Animating the whole loading screen to slide out and reveal the page content
22:35 - Modifying the transition of the loading screen when leaving the window
-----------------------
//Helpful links
⇝ Find the code you need amongst hundreds of Squarespace tutorials and snippets: beatrizcaraballo.com/codebase
⇝ Receive new Squarespace CSS tricks and exclusive offers on an often-ish basis: beatrizcaraballo.com/vip
⇝ Get in touch: beatrizcaraballo.com/contact
-------------------------------------------------------------------
Music from #Uppbeat (free for Creators!):
uppbeat.io/t/jonny-boyle/tres...
License code: DT8VYCZ0NE1FUHWY

Опубликовано:

7 авг 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 54

@azalana555 6 месяцев назад

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 6 месяцев назад

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 10 месяцев назад

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

@beatrizecaraballo 10 месяцев назад

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

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

@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 4 месяца назад

You are a genius! This is perfect.

@beatrizecaraballo 4 месяца назад

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

@camillapapale1523 4 месяца назад

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 4 месяца назад

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

@nahlah_mata 2 месяца назад

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

@beatrizecaraballo 2 месяца назад

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.

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

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

@mossaramadan2581 3 месяца назад

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 3 месяца назад

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!

@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 hey@beatrizcaraballo.com so I can take a closer look.

@nicolaslondon 9 месяцев назад

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 9 месяцев назад

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 hey@beatrizcaraballo.com. I'd be happy to point you in the right direction.

@selwynsbydesign 4 месяца назад

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 4 месяца назад

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 hey@beatrizcaraballo.com if that's something you're interested in!

@fleau699 6 месяцев назад

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 6 месяцев назад

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!

@sheisontheway 5 месяцев назад

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 5 месяцев назад

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 5 месяцев назад

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

@beatrizecaraballo 5 месяцев назад

It's my pleasure! 🙌

@user-zp5sh8zr6b Год назад

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!

@user-zp5sh8zr6b Год назад

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

@ismrgrey 10 месяцев назад

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 10 месяцев назад

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 hey@beatrizcaraballo.com with a link to your site so I can see how I can help you further!

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

@AlessiaApril 3 месяца назад

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

@beatrizecaraballo 3 месяца назад

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 3 месяца назад

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

@AlessiaApril 3 месяца назад

@@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 3 месяца назад

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 hey@beatrizcaraballo.com so I can take a closer look.

@masumrajpoot2455 11 месяцев назад

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 11 месяцев назад

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!

@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

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