How to make logo appear on scroll?

Site URL: https://offbeat-creemee.squarespace.com/

https://offbeat-creemee.squarespace.com/ pw: offbeat

I'd love to make the logo transition nicely from display:none to display:block on scroll.  I am able to have it appear on scroll, but I can't seem to get it to ease in or out smoothly.  Am I missing something?

Here is the CSS I am using.  The #collection tag is for the homepage, as I want to target only that page with this behavior.

//Replace Your Logo
#collection-60146b8caf27ec7eccad626f{
#header .header-title-logo img {  display: none;
  transition: max-height 140ms ease-in-out
}

#header.shrink {
 .header-title-logo a {
    display: block;
      content: url('https://static1.squarespace.com/static/60146b80af27ec7eccad6125/t/60ba350dc23e1c66c502d1ce/1611951182558/?format=1500w');
  }
  }}