Lottie .json animation as header logo

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

Hi,

I want to replace the animated gif logo I have in my header for a .json Lottie animation. I have got the .json animation to work in a code block using this tutorial but want to put the animation as a replacement for my logo in the header. 

Can anyone help me with the code for this please? 

Thanks

Oz

You can add Lottie to Code Block in Site Footer, then we will give the code to move it into header & hide current gif header logo

Hi Tuan,

Would you be able to provide me with the code to move the header and hide the current gif header logo as well?  

Thanks,

Tom

On 1/31/2023 at 10:39 PM, Tom_Motiio said:

Hi Tuan,

Would you be able to provide me with the code to move the header and hide the current gif header logo as well?  

Thanks,

Tom

What is your site url?

Hey there 

I have the same issue for my website. do you have the solution?

Regards Claudio

On 2/8/2023 at 2:51 PM, cade said:

Hey there 

I have the same issue for my website. do you have the solution?

Regards Claudio

You can add a Code Block on Footer > Add Lottie Json code > Then share site url, we can give code to replace Header Logo with Code Block

Hi Claudio, 

Tuanphan resolved this for me in this thread FYI

Hey Tuanphan

Perfect. I added the code to the footer. It already works on this page:

https://the-rop.squarespace.com/datenschutz

Now I want to put it instead of the logo in the header as well...

Note: There will be changes in the animation - is it easy to replace it?

THX a lot and best regards

Claudio

On 2/13/2023 at 3:49 PM, cade said:

Hey Tuanphan

Perfect. I added the code to the footer. It already works on this page:

https://the-rop.squarespace.com/datenschutz

Now I want to put it instead of the logo in the header as well...

Note: There will be changes in the animation - is it easy to replace it?

THX a lot and best regards

Claudio

Add to Last Line in Code Injection > Footer

<script>
  $(document).ready(function() { 
		$('div#block-yui_3_17_2_1_1675841487032_3184').appendTo('.header-title-logo a');
	});
</script>

Hey Tuanphan

Just added de Code in the Footer section . Now I have this in the section:

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

<script>
  $(document).ready(function() { 
        $('div#block-yui_3_17_2_1_1675841487032_3184').appendTo('.header-title-logo a');
    });
</script>

Is it right like this?

Hey Tuanphan

Unfortunately it does not work yet.

I added de Code in the Footer section . Now I have this in the section:

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

<script>
  $(document).ready(function() { 
        $('div#block-yui_3_17_2_1_1675841487032_3184').appendTo('.header-title-logo a');
    });
</script>

Is it right like this?

On 2/20/2023 at 2:21 PM, cade said:

Hey Tuanphan

Unfortunately it does not work yet.

I added de Code in the Footer section . Now I have this in the section:

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

<script>
  $(document).ready(function() { 
        $('div#block-yui_3_17_2_1_1675841487032_3184').appendTo('.header-title-logo a');
    });
</script>

Is it right like this?

 

It looks fine to me. 

Hey Tuanphan

This is not my site. My site is: https://the-rop.squarespace.com/config/ PW:1234

THX a lot

On 3/3/2023 at 9:12 PM, cade said:

Hey Tuanphan

This is not my site. My site is: https://the-rop.squarespace.com/config/ PW:1234

THX a lot

Which page are you referring to? I don't see header logo on homepage