Logo Resize Smoothly on Scroll, Bedford Template?

Hello!Using the Bedford template, I've been able to adapt this code to get it to immediately resize after scrolling 75 pixels down. Ideally the client would like the logo shrink with a smooth transition.

Site is here: https://carl-huber-j3cs.squarespace.com/

<script>
$(document).on('scroll', function() {
 if ($(document).scrollTop() >= 75) {
   $('#logoImage img').css('width', '200px');
 } else {
   $('#logoImage img').css('width', '');
 }
});
</script>

I tried putting the following in the CSS for logoImage but it doesn't seem to be working:

  transition: all .3s ease;

Firstly, thanks for your code sample.

Here's what works to animate it:

Within your image tag, include a class name ie.

<img src="logoimg.png" width="100" class="animate"/>

Within your css code include your

.animate{
transition: all 0.5s ease;
}

That looks great @jonnieay but I'm not sure how I would add a class declaration to the logo image? If it's simple I'm just not thinking of it...any ideas? Thanks for taking the time to write!

so if you have

<img src="yourlogo.png"/>

in your HTML code,

you could change it to

<img src="yourlogo.png" class="animate"/>

Oh I know that, like, technically how to do it. But since Squarespace handles the HTML code for the logo I'm not sure physically where to go to be able to put that declaration in. I know how to tweak CSS that's already declared, but not how to add "class='animate'" when it's not already there, you know? I'm not sure if I'm explaining that right but thank you for your continued thoughts, @jonnieay ! :)

Well it's quite simple, at least when I'm looking on your site right now.

Every browser has trouble when it's comparing

width: auto

and width with percents, pxs, ems, rems, vhs, what ever.

You wrote, that you can tweak css. So in css file for selector

#logoImage img

you have to change

width: auto

to

width: 100%

and add

transition: width 300ms ease;

(you don't have to force animate all, when you only want to animate width, let the poor visitor's gpu be).

For quick preview go to your site, then put into omnibox (browser's field for url):

javascript: $("head").append('<style>#logoImage a img {width: 100%; transition: width 300ms ease;}</style>')

And please fix it fast, it looks really bad without the animation ;)