Oz_Soma Posted February 21, 2022 Posted February 21, 2022 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
tuanphan Posted February 27, 2022 Posted February 27, 2022 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 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!)
Tom_Motiio Posted January 31, 2023 Posted January 31, 2023 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
tuanphan Posted February 3, 2023 Posted February 3, 2023 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? 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!)
cade Posted February 8, 2023 Posted February 8, 2023 Hey there I have the same issue for my website. do you have the solution? Regards Claudio
tuanphan Posted February 11, 2023 Posted February 11, 2023 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!)
Oz_Soma Posted February 13, 2023 Author Posted February 13, 2023 Hi Claudio, Tuanphan resolved this for me in this thread FYI
cade Posted February 13, 2023 Posted February 13, 2023 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
tuanphan Posted February 15, 2023 Posted February 15, 2023 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> 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!)
cade Posted February 16, 2023 Posted February 16, 2023 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?
cade Posted February 20, 2023 Posted February 20, 2023 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?
tuanphan Posted February 25, 2023 Posted February 25, 2023 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. 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!)
cade Posted March 3, 2023 Posted March 3, 2023 Hey Tuanphan This is not my site. My site is: https://the-rop.squarespace.com/config/ PW:1234 THX a lot
tuanphan Posted March 6, 2023 Posted March 6, 2023 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 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!)
tomo9 Posted August 9, 2023 Posted August 9, 2023 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.
Chlobot Posted December 13, 2023 Posted December 13, 2023 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
tuanphan Posted December 15, 2023 Posted December 15, 2023 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!)
Chlobot Posted December 15, 2023 Posted December 15, 2023 Hi @tuanphan - Ideally I would like the lottie logo to appear on all screen sizes. Thanks!
tuanphan Posted December 16, 2023 Posted December 16, 2023 I can't find the cause. Can you send code in Code Block? I will test it on my site easier 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!)
joshlee Posted February 8 Posted February 8 (edited) 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 February 8 by joshlee
jpeter Posted February 8 Posted February 8 (edited) @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 February 8 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!
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment