How to Make an Animated Splash Screen in Squarespace | Squarespace Tutorial

In this video, I'll show you how to make an animated splash screen for your Squarespace website.
We're going to be using Lottie animations on the splash page. See my more in-depth Lottie video here • Getting Started With L...
Join my Substack: carljohnson.space
Watch more: bit.ly/sqsptuts
Subscribe for more Squarespace tutorials: bit.ly/MrJohnoC...
Share this video: • How to Make an Animate...
LottieFiles: lottiefiles.com
Music: www.davidcutte... / @dcuttermusic
________________________
New to Squarespace? Start here bit.ly/2FRTVEo
▸ Buy me a coffee www.buymeacoff...
▸ My favourite resources bit.ly/3StaKqy
________________________
If you've got any questions or requests for future videos drop them in the comments below 👇
________________________
#Squarespace

[@Carl_Johnson]

Lottie Player CDN: Lottie Player …and shout out to Big Ted! My daughter has wanted me to have him in a video for ages.

[@ryansjohn3447]

your player code is missing px on the second 400. that had me confused for ages

[@king_nemuel]

You always deliver ! Thank you Carl.

[@Carl_Johnson]

Thanks Sereti!

[@darwinee]

Carl mate can't thank you enough for your hugely informative and succinct tutorials - rarely do I search for something and find 'the magic bullet' - very much look forward to watching the rest of your vids - keep up the great work!

[@Carl_Johnson]

Thanks for the kind words darwinee! Glad you found what you were looking for.

[@needleninja]

This is exactly the type of information I needed about square space. Although I will be creating an animation of my own, it will be a helpful starting point

[@DougAlexanderInTexas]

Carl, thank you so much for this helpful tutorial. Using the example you give here the animation appears on *every* page in the site. How do I restrict the animation to JUST the splash page?

[@fullnerd7975]

Mate, I really have no clue how you have so little likes. Your content is fantastic, I'm pretty intermediate with code, but you make it sooooo much easier than me having to use my brain. Nice one!

[@Carl_Johnson]

Cheers Fullnerd79 👍

[@paulbayl9199]

Brilliant. So helpful mate. Cheers and thanks again!

[@Dousan02]

Hi Carl, everything seem to work perfectly. the only thing is, the splash screen is still would still be on the page after the slideout animation, blocking the view of the whole site...

[@anonanon8974]

Hey. What do I have to do in order to make it fade out instead of slide to the left? I swear I have tried so many videos and articles.

[@Jordan-bz5cx]

SUPER COOL!

[@juliesmith7993]

Hey Carl- i think I might can actually do this! Great video! Subscribing!

[@charlottesanchez2248]

Hi Carl, thank you for your amazing tutorials! They're helping me a lot. Do you know if it's possible to add an interactive lottie file as the background of a particular Squarespace section in 7.1?

[@madamepresident]

Hey, Carl great video. Another question here. How can I make the loading text closer to the center? With the new iOs update, the search bar located at the bottom covers the text. Thanks!!

[@mehakmahendru5683]

Hi Carl, Thanks so much for the great in depth tutorial! I was just wondering is there any way of doing the same thing using a custom logo animation / gif made in after effects or would have to be uploaded via lottie animations?

[@Carl_Johnson]

Hi Mehak! I haven't tried it, but if you replace the Lottie player with an img tag that should work. www.w3schools.com/tags/tag_img.asp

[@seraa.914]

@@Carl_Johnson thank you for such an insightful video! I am attempting to do the same thing as Mehak, however having trouble in making the gif appear in the same way as the lottie animation. Would you mind expanding on what part of the code should be removed once including a self stored gif into the splash screen? Thanks a lot.

[@gabriellebohna9474]

@@Carl_Johnson Hi there. Thank you for the tutorial! I am also hoping to create a cover page for a client's website that features an animated logo I made with AE. Do you suggest that I upload my animated logo to a site like GIPHY in order to use an img tag?

[@gabriellebohna9474]

@@Carl_Johnson To clarify: I essentially want the animated logo to be small and centred above a 'welcome' button on a landing/cover page that, upon clicking, allows the web visitor to view the rest of the client's website.

[@sinnister48]

Hi Carl! Thank you for this helpful video. The loading screen was working well till suddenly my animation is now on the top of the page instead of the middle. Is there a solution I can look at?

[@barbarakirchheimer7754]

Hi, thank you for this video! unfortunately it didn't work for me. The image is at the top and the background didn't apply so I can still see the website behind. I did all the steps. Is there a way to sort this out? thanks a lot!!

[@marenkorner]

Hi Carl, thanks so much for this video! For some reason after the animation disappears it comes right back and it's not possible to see that actual page. Any ideas why this might be happening?

[@georgegogarten3593]

Hi Carl, thank you for the video, clear and easy to follow! I would like to know if the same is possible using and embedded video instead of animation, I tried with an iFrame but that didn't work, never leaves the page. Also is there any code to display the animation only on the first visit to the page?

[@NehoyNehoy]

Hi Carl! This is amazing! I was just wondering if there is a way to have this only appear when you first enter the site? My animation plays every time I go from page to page. Thanks a bunch!

[@sinnister48]

I need help on this too!

[@sinnister48]

Hi Nicholas, you can add the code under your Homepage --> advance settings and inject the code there.

[@DomFillari]

@@sinnister48 thank you

[@rachelsprout5320]

I'm still having a problem on my site when the animation fades, I can't click anything on my page. It's just a landing page but I need to be able to click a contact button. Any way to fix? Thanks!

[@samchizanga5507]

Hey Rachel have you had any luck with this? I'm running into the same!

[@rachelsprout5320]

@@samchizanga5507 I haven't! Desperately trying to figure it out but so far, no luck.

[@rachelsprout5320]

@@samchizanga5507 Seems to be an issue with the z-index but nothing I do fixes it

[@rachelsprout5320]

@@samchizanga5507 I actually just figured it out. let me know if you need help!

[@samchizanga5507]

@@rachelsprout5320 yes I would love the help, I’ve been trying everything!

[@MosKou2KH1]

Hi Carl, this is a value bomb, thanks very much! I have a question with regards to the animation. So if I get it right the animation is linked to the Home page, right? So my question is when someone is on another page and then clicks on the logo of the website or on Home in the navigation, will this animation appear again?

[@ShariHawley]

Thank you so much for showing how to use lottie animations on sqsp.

[@Carl_Johnson]

No problem Shari!

[@ΓιαννηςΣυμεωνιδης-ν7γ]

Its not working from me from the code injection.Is there any way to find both codes as the news ones?i am just guessing out here.Love you mate

[@jonnyornelia929]

Can this be done using an animation file that I already created? Not a link? Thanks!

[@HasaniWalkerArt]

Hello Carl, This tutorial is extremely helpful! I do have a question. Lets say I wanted to add my own custom made animation as a splash screen. is there a format I should render it in and is there a suggestion on the best place to post it for a url, like vimeo private?

[@HasaniWalkerArt]

Ah, I found the answer in one of your videos. "Getting Started With Lottie Animations in Squarespace" Thank you!

[@wifitrapper]

i want to animate my own logo and do something similar. what is the best way to do that?

[@homegardendiaries]

Hi, Is there anyway of optimising the writing for mobile? I'm not sure where I should be adding the @media part in the css? The writing is too small for my mobile version.

[@homegardendiaries]

And the animation is also too big in the mobile version, ideally would like to make it smaller! Thank you in advance!

[@hopegoudy7315]

THANK YOU! I've managed to do this successfully but for some reason on mobile the animation jumps around. Is there anything I can add to the code to fix this? Thank you so much for all of this. I subscribed. :)

[@AllanYPhotography]

Hey has anyone found a fix for this?

[@spotteddesigns8968]

Hi Carl! Thank you so much for the tutorial, it is amazingg!! I just have a question. Its possible to apply this animated screen just to one page? i want to use it as a cover page but i dont know how i can just apply for the home page and not the other linked pages. Thank you so much!!

[@paulbayl9199]

@Simon Blanco Hi Simon, you can add the code under your Homepage --> advance settings and inject the code there.

[@Glasgow808]

Hi Carl, nice one for this video. Question for you how can I substitute a logo (PNG file) instead of the animation?

[@Carl_Johnson]

Sure, you'll need to upload your PNG to the Custom CSS and get the image URL like in this video kzbin.info/www/bejne/eoO1YXxpmrSYp8k Once you've got the URL add this to your splash wrapper instead of the Lottie player : So it should look something like this: Loading Then replace YOURURLHERE with the one you got when you uploaded your PNG to the CSS. You can change width="500" up or down to make your PNG bigger or smaller.

[@Glasgow808]

@@Carl_Johnson Cheers Lad - buying you a coffee right now.

[@Carl_Johnson]

@@Glasgow808 No problem, and thanks for the coffee 👍

[@rhysdando]

Mega lazy, but is this code hosted anywhere to copy paste? Thanks

[@oweeyulo8470]

Thanks for this! Does this work on older versions of SS?

[@Carl_Johnson]

Hey Owee! Yes, it will work on all versions.

[@BuyLoalHawaii]

AWESOME VID! Im wondering though.. can you limit it to only display when you click on the home page? I dont want this to pop up when im navigating through the various pages on my site. Only when you get back to the home page.

[@Carl_Johnson]

Thanks Rykley! Sure! Instead of putting the code into the site-wide code injection, put it into your page header code injection instead.

[@BuyLoalHawaii]

@@Carl_Johnson THANK YOU! life saver haha

[@anjanapisupati1189]

Hi! Also really enjoyed the video and found it so helpful :) However, I am having the same problem even though my code injection is currently under 'header'. The description belows it says that it will be injected into the 'head' tag on every page and I'm not sure how to limit this. Would appreciate any advice on how you handled this!!

[@MrNinjaRope]

Hey Carl, thank you for this tutorial. I've been surfing through your channel now for several weeks now and I love it! Quick question about this though. The "Loading" text underneath the animation is so small. How would I increase the size of this text? Might seem like a dumb question but I've never done anything like this before. Thanks again!

[@Carl_Johnson]

Hey, no problem Danny! To increase the size you can add font-size to the h2 style like so: Loading Then you can change 20vw to whatever size you want. The reason you'd use vw for the font size instead of px is so that it resizes responsively for different screen sizes.

[@MrNinjaRope]

Ohhhh, That makes sense. Thanks! Can’t wait for your next video.

[@proph7099]

Hey Carl!! Amazing Video. Tad issue I'm having is after the SlideOut effect Half of the background color I used for the splash screen is still on the homepage. Any help?

[@proph7099]

Actually, that was just Squarespace haha, but is there any way to have it so it so it doesn't appear on every page?

[@Carl_Johnson]

Sure! Instead of putting the code into the site-wide code injection, put it into your page header code injection instead.

[@proph7099]

@@Carl_Johnson Thank you Carl! Being that the splash screen reappears every time the page is loaded. Does Squrespace allow it to only appear at the beginning of a new session? I think it'd get a tad annoying if it appeared every time the page loaded.

[@DuncanMOH]

Hey Carl, the video was great! After I create my page loader, I can't click any links on my site anymore. Can you assist with this? Thanks!

[@interviewswithcelebs]

I'm having the same issue, did you manage to find a solution?

[@nanayaa-ansah]

do you have an example not using lottie animation?

[@Carl_Johnson]

Hi Nana, I don't have any examples, but you can replace the Lottie Player with a GIF or a video and it will work the same.

[@konaing2827]

ohh yess! pls let me thnks. this video really useful and save my day. 🙏🙏

[@Carl_Johnson]

You're welcome 😊

[@interviewswithcelebs]

everything worked but now I can't edit the page and the links on the page are not working, do you know what I can do to fix this?

[@theentrepreneur967]

Make sure you add to your Keyframe to { margin-left: -100vw;}. If you are using Opacity you must move the invisible div off the page. You can also use idex setting but just adding this to your code should work. This is mine for reference, I use opacity in my keyframes so I had to still hide or move the element from the screen. @keyframes hideOut { from {opacity: 1;} to {opacity: 0; margin-left: -100vw;}

[@SteveMaviano]

@@theentrepreneur967 This is very helpful. My only issue is that the fade out and the slide happen at the same time. Do you know how to make the slide off the page happen AFTER the fade out so we don't see it happening at the same time?

[@rossmacleod4245]

@@SteveMaviano this is the same issue as i am having

[@remianfosso2155]

Thank you Carl, this is super useful! Quick question: I have tried it but can't seem to make it work. I have used the code below. Would you have any idea this doesn't work? I'm using Squarespace 7.1. Thank you!! .lottie-player { position: fixed; z-index: 9999; background-color: #E8E5DD 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 { from {opacity: 100%;} to {opacity: 0%;} }

[@rachelsprout5320]

Is there any way to make the animation fade out instead of sliding?

[@Carl_Johnson]

Hey Rachel! Yes, replace the keyframes part with this: @keyframes slideOut { from {opacity: 1;} to {opacity: 0;} }

[@rachelsprout5320]

@@Carl_Johnson Perfect! Thank you so much!!

[@rachelsprout5320]

@@Carl_Johnson I'm also having an issue where after the animation fades, I cannot click anything on my site. Is there a way to fix this?

[@qMeoww]

Rachel Sprout Hi Rachel! I have the same problem with my site, any suggestions? have u fixed smh?

[@lorenzomohammed208]

@@qMeoww figure it out?

[@odysseus9400]

everything worked perfectly except for the sliding mechanic #keyframes slideOut { from {margin-left: 0vw;} to {margin-left: 100vw;} just wasn't sliding out of frame for me

[@odysseus9400]

Nevermind, I went through the video again and again and realized that I put a hashtag instead of an @. Whoops.

[@soppydoggy8350]

HELLO