I've found a code online which shrinks the header, I've added code to idd to make the logo shrink on scroll.

Now I want to add a transition so the logo resizes with the same effect the header does. I can't seem to get it working.

Javascript

add_action( 'wp_head', function () { ?>
    <script>
       
    // logo laten krimpen 
    window.onscroll = function() {
      growShrinkLogo()
    };
    function growShrinkLogo() {
      var Logo = document.getElementById("Logo")
      if (document.body.scrollTop > 5 || document.documentElement.scrollTop > 5) {
        Logo.style.width = '80px';
      } else {
        Logo.style.width = '150px';
      }
    }
    // resize header 
    jQuery(function($){
      $(window).scroll(function() {
          if ($(document).scrollTop() > 30) {
            $('#section-padding').addClass('reduce-section-padding');
            $('#row-width').addClass('increase-row-width');
        } else {
           $('#section-padding').removeClass('reduce-section-padding');
           $('#section-padding').addClass('slow-transition');
           $('#row-width').removeClass('increase-row-width');
           $('#row-width').addClass('slow-transition');
         
        }
      });
    });
    </script>
    <?php } );

And here is the css:

.reduce-section-padding {
transition: all 0.9s ease-out 0s;
padding-top: 0px !important;
padding-bottom: 0px !important;
margin-top: 0px !important;
}
 
.increase-row-width {
transition: all 0.9s ease-out 0s;
width: 100% !important;
}
 
.slow-transition {
transition: all 0.9s ease-out 0s;
}
 
#main-content {
margin-top: 0vw;
}

I've added the javascript made css class slow-transition to the logo but didn't seem to work.

Hope someone notices something about the code that I didn't.