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

Dear @tuanphan

Im attempting to combine the above with scroll interaction in the header logo (lottiefile) - but the lottie autoplays instead of interacting with scroll. Is that possible to achieve?

Using code from the interactivity guide from Lottie: https://lottiefiles.com/interactivity

Code injection-> header:

<script src="https://unpkg.com/@lottiefiles/lottie-player@0.4.0/dist/lottie-player.js"></script>
<script src="https://unpkg.com/@lottiefiles/lottie-interactivity@latest/dist/lottie-interactivity.min.js"></script>

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_1691606013872_34153').appendTo('.header-title-logo a');
    });

 
  LottieInteractivity.create({
    mode: "scroll",
    player: "#lottie",
    container: "#block-yui_3_17_2_1_1691606013872_34153",
    actions: [
    {
      visibility: [0,1.0],
      type: "seek",
      frames: [0, 60]
    }
  ]
});
</script>

<style>
  .header-title-logo img {
    display: none!important;
}
</style>

Code block in footer:

<lottie-player id="lottie" src="https://lottie.host/f2eb21aa-bc5a-4d20-8523-b714743a26e0/dbpUTGh1Xo.json" background="transparent" speed="1" style="width: 200px; height: auto;" loop autoplay></lottie-player>

It works well when placing the lottie file in a section, but not as the header logo.

Hi @tuanphan 🙂
I used this code to add a lottie animation as the logo in the header. It's mostly working but there are two issues:

1) Neither the animated logo nor the .png logo show up on tablet or mobile devices. I tried adding: 

if (screen.width <= 767) {

to the code but I couldn't get this tow work.

If using the lottie for this is tricky I'd be happy to just use the regular logo on mobile and tablet view

2) On desktop, the logo doesn't show up on any of the the Contact pages (in the different languages).

Pease help 😅

Website:  https://www.iamglobal.aero/en/home

On 12/13/2023 at 9:41 PM, Chlobot said:

Hi @tuanphan 🙂
I used this code to add a lottie animation as the logo in the header. It's mostly working but there are two issues:

1) Neither the animated logo nor the .png logo show up on tablet or mobile devices. I tried adding: 

if (screen.width <= 767) {

to the code but I couldn't get this tow work.

If using the lottie for this is tricky I'd be happy to just use the regular logo on mobile and tablet view

2) On desktop, the logo doesn't show up on any of the the Contact pages (in the different languages).

Pease help 😅

Website:  https://www.iamglobal.aero/en/home

#1. You want to make lottie file appears on mobile + table only?

#2. Let me check it

Hi @tuanphan - Ideally I would like the lottie logo to appear on all screen sizes.  Thanks!

I can't find the cause. Can you send code in Code Block? I will test it on my site easier

Hello Tuanphan,

I've been trying to add a json animation to header as well. Site is joshlee.design.

I've added the json block into the footer code:

</script><lottie-player src="https://lottie.host/f2ed91d5-006c-4cfd-9728-59f6afff813b/TlBB5409jp.json" background="transparent" speed="1" style="width: 300px; height: 300px" direction="1" mode="normal" loop autoplay></lottie-player>

I've put this into footer injection:

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

It's not working. Help!

@joshlee The issue is your code below is relying on jQuery. Instead of relying on jQuery as a dependency, you can replace the following code:

$(document).ready(function() { 
  $('div#block-yui_3_17_2_1_1707375123858_6165').appendTo('.header-title-logo a');
});

With this code:

(function(){

  const headerLogo = document.querySelector('.header-title-logo a');
  const lottiePlayer = document.querySelector('div#block-yui_3_17_2_1_1707375123858_6165 lottie-player');

  if(headerLogo && lottiePlayer) {

    // Hide existing image 
    const img = headerLogo.querySelector('img');
    if(img) {
      img.style.display = 'none';
    }
    
    // Append lottie image 
    headerLogo.appendChild(lottiePlayer);
  }

})()

Remember to place the JS code between <script></script> tags.