Jump to content

Lottie .json animation as header logo

Recommended Posts

  • Replies 20
  • Views 3.9k
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

  • 11 months later...
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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>

image.thumb.png.1b63e683bc1e33befaa2b8d205ec6731.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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?

 

Link to comment

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?

 

Link to comment
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. 

image.thumb.png.f5ccdd7ae10f782155847f80710f1791.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 5 months later...

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.

Link to comment
  • 4 months later...

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

Link to comment
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 1 month later...

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!

Edited by joshlee
Link to comment

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

Edited by jpeter

Full stack developer who loves helping people out with anything web related. If you'd like to support me, buy me a coffee!

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.