Using Lottie Files in Squaresace

Site URL: https://www.somastudios.co/

Hi, 

I am trying to use Lottie files on my Squarespace.

Do I need to upgrade my account to add a code injection to do this or can I do it with a standard account?

If possible, how can I add a Lottie animation (.json or otherwise) to my header logo animation? 

Thanks!

3 hours ago, Oz_Soma said:

Do I need to upgrade my account to add a code injection to do this or can I do it with a standard account?

Hey @Oz_Soma Your Squarespace plan should be Business or any Commerce plans for using Code Injection.

3 hours ago, Oz_Soma said:

If possible, how can I add a Lottie animation (.json or otherwise) to my header logo animation? 

Squarespace allow add only image file for the logo with regular image formats. So You can't add any custom file through admin panel but You can use custom JS coding for changing default logo to the Lottie animation.

Thanks for the reply SquareRefresh. Do you have any information about how to do this in JS? I think I will upgrade my account and give it a try if it’s not too difficult.

Thanks

Oz

If anyone can tell me how to put a Lottie animation in the header instead of the header logo that would be great, thanks!

@tuanphan

On 2/21/2022 at 6:17 AM, Oz_Soma said:

If anyone can tell me how to put a Lottie animation in the header instead of the header logo that would be great, thanks!

@tuanphan

Add it to Footer, then share url, we will give the code to move it to header

Hi @tuanphan ok, I have added it into my footer!

https://www.somastudios.co/

Thanks

On 2/25/2022 at 6:46 AM, Oz_Soma said:

Hi @tuanphan ok, I have added it into my footer!

https://www.somastudios.co/

Thanks

It looks like your lottie code block missing some closing tag. Can you post all code in Code Block? 

-------

Note for me: don't use it now

Add this to Settings > Advanced > code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
  $(document).ready(function() { 
		$('div#block-yui_3_17_2_1_1645746278761_3758').appendTo('.header-title-logo a');
	});
</script>
<style>
  .header-title-logo img {
    display: none;
}
</style>

Oh yes, sorry, it should be right now. 

Thanks!

On 3/2/2022 at 6:58 AM, Oz_Soma said:

Oh yes, sorry, it should be right now. 

Thanks!

 

Add to Settings > Advanced > Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
  $(document).ready(function() { 
		$('div#block-yui_3_17_2_1_1645746278761_3758').appendTo('.header-title-logo a');
	});
</script>
<style>
  .header-title-logo img {
    display: none;
}
</style>

Thanks @tuanphan that worked! Doesn't work on mobile though unfortunately. Also is there a way to control the position? Now it's a bit lower than it was, maybe it just needs centralising so it moves up a bit? 

Thanks for you help!

On 3/5/2022 at 12:35 PM, Oz_Soma said:

Thanks @tuanphan that worked! Doesn't work on mobile though unfortunately. Also is there a way to control the position? Now it's a bit lower than it was, maybe it just needs centralising so it moves up a bit? 

Thanks for you help!

 

I see it shows on mobile now? Did you solve it?

Control position on desktop or?

I think maybe it's working now. Something weird ws hapenning but I got a few people to try it and it seems to work. Thanks so much!

Yes can I position it on desktop? It's not in line with the other text and icons, it needs to move up a bit. 

Has there been any updates since February 2022 on Lottie files?  I can embed a Lottie file using the code block?