How to Make an Animated Logo on Hover Squarespace

[@Carl_Johnson]

That text hover effect at 4:29 👉 kzbin.info/www/bejne/oaW2doePis5rmrs

[@rachelberrystudio]

You are the best!!! I couldn't figure out how to do this and your video was PERFECT!!!! It's so cool! Thank you!

[@jessiecarvalho4302]

I really enjoyed how your tutorial shows you teaching like a real life teacher and also how you go through each line of code. Great job!

[@Carl_Johnson]

Thank you Jessie!

[@jessiecarvalho4302]

@@Carl_Johnson I've added this to my site successfully but the hover animation only 'animates' once. Is there a way to make it animate every time the cursor hovers?

[@jessiecarvalho4302]

Nvd, I realized I did not save the gif as animating 'forever' like you said. Thanks!

[@ryanoxner]

Great tutorial. Download link for files seemed to be down on your page but I created my own in Photoshop and it was smooth sailing. Thanks so much!

[@ThisisJo]

As always, I devour the knowledge you impart! Still learning! 😋

[@Carl_Johnson]

Thanks. Glad to help!

[@collabrewate2013]

Very cool effect! As always, very clear and easy to understand instructions. Thank you!

[@Carl_Johnson]

Thanks 😊

[@grantekilgard3929]

you are a king, thank you.

[@MikeDeath]

very nice tutorial. absorbing it like a sponge. thank you sir!

[@Carl_Johnson]

Glad it was helpful Mike!

[@SimnovoriiLurve]

Exactly what I was looking for! Phenomenal, thanks so much 🫶

[@zenphoenix5911]

Awesome!!!

[@davidmartinez5459]

Well done mate!

[@garzagarzamariana]

Hi Carl! thank you for this video! Do you know how we can add a GIF logo that's moving all the time? not on hover? Thank you!!!

[@stephen3511]

Really cool. Thanks.

[@Carl_Johnson]

Thanks Stephen!

[@masonwong576]

Thank you for the tutorial Carl! I realised the colour of the text changed colours as you hover past them at 4:30. Is that something you plan to cover? Thanks!!

[@Carl_Johnson]

Hi Mason, yes, I plan on covering that in a future video.

[@Carl_Johnson]

Hi Mason, just uploaded a video covering that kzbin.info/www/bejne/oaW2doePis5rmrs

[@Decatilinae]

Nice man... super cool...

[@Carl_Johnson]

Thanks ✌️

[@shinyhunterau2083]

Hi Carl, after I make the Photoshop animation. Is there a way to place the animation into an existing project?

[@luciededkova]

It works great, but can you help me to also set up a time of animation after pointer will be somewhere else? Basically I want an animation to be finished. Thank you

[@matthewbyron7676]

such a great tutorial. Would it be possible to make a custom button and have a gif on hover for that too?

[@eugenesoch]

Thsnk you! 🤘

[@Carl_Johnson]

No problem. Did you manage to look at W3Schools?

[@eugenesoch]

@@Carl_Johnson I've only today seen your reply - many thanks! Going on holiday, so will definitely have a look! Many thanks for recommendation! ❤️

[@eugenesoch]

Wow! Had a quick glance - it is like literally - step-by-step guide! 🤘

[@eugenesoch]

@@Carl_Johnson thank you! That resource is incredible! Just building email on MailChimp and needed some features that aren't available 'straight out the box'. 15 minutes on W3 schools and I have built a custom coded block for my email! Thank you!

[@Carl_Johnson]

@@eugenesoch Awesome! Glad it helped for you.

[@adelebiehl3962]

Hi! great tutorial. Is it possible to have the logo animate only when the page is loading?

[@jacquelyn4374]

love your accent

[@roamlikekane]

Great tuts! Can one copy n' paste each css code you have provided in each of your videos as a group into the css code section of a SS website or dashboard and have the functionality of each ready to go? Even though each will not be implemented right away or in real-time, but can sit there until I get to it or choose to do it, or perhaps not do it all as it may not be needed.

[@Belu6278]

Hi Carl, I know this is a late comment but by any chance would you know how to restart the gif each time you hovered? so when you unhover and hover its back on frame 1

[@logannelson9989]

This is super cool. Thank you for the clear tutorial Carl! Is there a way to do this for an icon in the body of your site too??

[@Carl_Johnson]

Sure, you'll need to do the same thing, but replace the ID for the logo with that of the block containing the icon. To get the ID of the block containing the icon you can use this tool for Chrome bit.ly/sqsblockid

[@lafawnduhhhh]

I gave this a try and after a few hours messing around in After Effects I had an animated logo GIF ready to go, however once I tried the technique outlined in the video it didn't work. The logo doesn't appear. I double checked the code and the files. I even nuked my custom CSS entirely and placed only the code from this tutorial in there but no luck. I'm on Flatiron 7.0. Any suggestions?

[@melissamatthews8129]

Thank you this is awesome !!! LOVE It ::: I can't however see it on mobile though...is it possible to get it working on mobile or insert a static logo ? I'm working off Brine . THANK YOU SOOOO MUCH !!!

[@big1ne]

Hi, Thank you for this. Very helpful. I have a little problem, The logo does not appear on mobile. The transparent background appears. How can I change this? Thanks

[@Carl_Johnson]

Sure, what template are you using?

[@big1ne]

@@Carl_Johnson Hi I am using Brine template. Thank you

[@bennelson14]

Thank you for the tutorial! I need help with my mobile site. The logo disappears. I have a Nueva template.

[@kondjanegongo796]

Hi Carl, could you do any tutorial to change the appearance for the Map? Black Map with Yellow Roads etc...

[@Carl_Johnson]

Hi Kondja, unfortunately to customise maps you need an api from Google (which you have to pay for). You can see more info and pricing here cloud.google.com/maps-platform/maps

[@kondjanegongo796]

@@Carl_Johnson Noted. Is it possible to create a search bar for a specific page or folder? I want the search results to only have items from one page/sector. Thanks again for the tutorials, this has helped massively

[@samuelwells7035]

Hi Carl! Thanks for this video - super helpful and worked for my desktop site! I can't however seem to see the logo on mobile - is there a solve for adding the logo on hover for the mobile version of the site as well?

[@samuelwells7035]

Nevermind it updated and started working with my template - thanks!!

[@Carl_Johnson]

Glad you got it working @@samuelwells7035

[@mikhailmore2179]

Thanks! Carl could you please show a simple multilanguage swither?

[@Carl_Johnson]

Hey Mikhail! Brad Good has a good multilingual tutorial over on his website www.bradgood.net/articles/multi-language-content-on-any-squarespace-template

[@Broziah]

How would you do just the animated logo? (so no hover needed)

[@Carl_Johnson]

Should be able to do that. Could you send me over an email, or get in touch through my website and I'll see what I can do.

[@VideoStar-nw3mh]

How come after I do the css the logo is still static?

[@MrAbbo11]

I stumbled across your content by chance. Thanks for these videos! I have no idea what goes into a codealong video for making a multilingual site on squarespace, if its a viable thing for you to put a video togethter like this I (and a ton of other people, I think) would be eternally grateful!

[@Carl_Johnson]

Hey Ashley, I'd love to make a video on multilingual content, but as a video it would take a while to cover all of the bases. Have you checked out this by Brad Good? www.bradgood.net/articles/multi-language-content-on-any-squarespace-template

[@MrAbbo11]

@@Carl_Johnson You could make part 1, 2 , 3 etc. I'm kind've irked by how not striaght forward this is on squarespace. I've bookmarked the article he wrote about the process last night. I have set it aside as a project to do at some point just to see what happens. I really think there is a need for this knowledge to be made available on youtube and if it's possible (and if you have the patience/will to make that video) I'd sit through however long it takes and follow step by step! EDIT: I'll take the plunge and just give it a try and see where it takes me. I'm just not sure how much its gonna irritate me, so i kinda put it off till later.

[@SkuNi94]

Hi Carl, I was wondering if you know any trick for fixing the Homepage-header-KZbin-autoplay-Looped-video. After a moment it starts lagging the whole page and crushes the video, I have no idea how to fix it and can't find any guides online.

[@Carl_Johnson]

Hi Miki, can you share the link to your site please?

[@John-yr8ep]

Can this work for any gif?

[@Carl_Johnson]

It should do, John.

[@margru8207]

Cheers Carl, worked a charm this. Only problem is it only activates once. My site is not published yet as I'm still adding content. Is this the reason why it only works the once? Top man.

[@Carl_Johnson]

Hey Martin. Did you set the gif to loop forever in Photoshop?

[@margru8207]

@@Carl_Johnson Thought I did. I never. :D Cheers mate. Where you from in Liverpool Carl? I grew up in Kirkby 👍

[@Carl_Johnson]

@@margru8207 Cool! Small world ...I from Aigburth

[@naviagruber]

This works amazing on my Squarespace 7 (foster) template! But when using a mobile my logo disappears.. is there a way I can just have a static logo for mobile device views (any device smaller than 640px) and keep the cool animation for desktops?

[@Carl_Johnson]

Hey Navia, good question, definitely something I should have covered. I’ll update the blog post for the video in the next few days and let you know.

[@naviagruber]

Amazing! Thank you :)

[@allisonbanfield1018]

What are the dimensions of your photoshop document?

[@tierneysadowski7767]

I'm having trouble getting the swaps to occur. It still only shows the mask.

[@Carl_Johnson]

Can you share the code exactly as you've put it into Squarespace please? Or send the link to your site?

[@tierneysadowski7767]

@@Carl_Johnson Thanks for getting back to me and for making this video in the first place! I've noticed that static logo shows for a second upon loading, but for some reason it disappears. Here is my code: .header-title-logo { background-image: url('static1.squarespace.com/static/5f60eca1b672466e0002cb73/t/5f63cc7d02499970834d55ec/1600375933721/tslogostill.png'); background-size: cover; background-repeat: no-repeat; transition: .5s; } .header-title-logo:hover { background-image: url('static1.squarespace.com/static/5f60eca1b672466e0002cb73/t/5f63cefa4f4e2d5b61f6baf6/1600376573709/regif.gif'); transition: .5s; } my site is www.tierneysadowski.me. Again thank you so much! *For the time being I've changed my logo to just the gif, so my site doesn't go without the logo.

[@jorgemadeiradesign]

Thank you Carl for an amazing video. But I got a problem. When hover my logo, the png doesn't disapears and the gif appears above the png. Can you help me please? :)

[@Carl_Johnson]

Sure, can you send me the link to your site, please?

[@jorgemadeiradesign]

@@Carl_Johnson Yes, thank you so much. octopus-sponge-w9e3.squarespace.com/

[@Ahmed-cn6hj]

All we had to do was follow the damn train CJ!

[@Carl_Johnson]

First San Andreas reference! Surprised I haven’t more 😂

[@VideoStar-nw3mh]

Not working for me : (

[@ryanoxner]

I forgot the mask.png and I accidentally put " quotations instead of '. Fixed those two elements then it worked out well! Using Squarespace 7.1.

[@melaniehiblen9263]

Thanks for sharing, but it doesn't work :( Gutted...

[@ryanoxner]

I forgot the mask.png and I accidentally put " quotations instead of '. Fixed those two elements then it worked out well! Using Squarespace 7.1.