I can not adjust the smoothness of the animation of the increase (but the decrease in the norms) of the svg object. How to fix?

Question

css

https://www.youtube.com/watch?v=v0luMUKM8wk
The video with the problem is at the link above.
Apparently transition does not work. Although I registered it wherever I could.

$(window).on('scroll', function () {
    headerScroll();
  });

  function headerScroll() {
    if ($(window).scrollTop() > 20) {
      $('.header').addClass('scroll');
    } else {
      $('.header').removeClass('scroll');
    }

    if ($(window).scrollTop() > 20) {
      $('.header__menu-a').addClass('scroll__menu-a');
    } else {
      $('.header__menu-a').removeClass('scroll__menu-a');
    }

    if ($(window).scrollTop() > 20) {
      $('.header__logo-img').addClass('scroll__logo-img');
    } else {
      $('.header__logo-img').removeClass('scroll__logo-img');
    }

    if ($(window).scrollTop() > 20) {
      $('.header__logo-img svg').addClass('scroll__logo-img svg');
    } else {
      $('.header__logo-img svg').removeClass('scroll__logo-img svg');
    }

    if ($(window).scrollTop() > 20) {
      $('.header__logo-text').addClass('scroll__logo-text');
    } else {
      $('.header__logo-text').removeClass('scroll__logo-text');
    }
  }

.header{
  position: fixed;
  display: flex;
  align-items: center;
  background-color: transparent;
  @extend %maison-regular;
  margin: 0 auto;
  height: 100px;
  border-bottom: 1px solid #fff;
  width: 100%;
  z-index: 1000;
  transition: all .3s;
  &__inner{
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  &__menu{
    display: flex;
    justify-content: space-between;
  }

  &__menu-li{
    display: flex;
    margin-left: 40px;
  }

  &__menu-li:first-of-type{
    margin-left: 0px;
  }

  &__menu-a{
    color: #fff;
    transition: all .3s;
  }

  &__logo{
    display: flex;
    align-items: center;
    transition: all .3s linear;
  }

  &__logo-img{
    height: 50px;
    width: 50px;
    align-items: center;
    margin-right: 15px;
    margin-bottom: 15px;
    transition: all .3s linear;
  }
  
  &__logo-text{
    font-size: 42px;
    color: #fff;
    transition: all .3s;
  }

  &__menu-li{
    display: flex;
    align-items: center;
  }

  &__btn{
    width: 120px;
    height: 40px;
    background-color: rgba(221, 26, 26, 0.612);
    transition: all .3s linear;
    border-radius: 2px;
    color: #fff;
  }

  &__btn:hover{
    background-color: rgb(221, 26, 26);
  }
}

.header__logo-img svg{
  fill: #fff;
  transition: all .3s;
}


.scroll{
  height: 60px;
  transition: all .3s;
  background-color: #fff;
  color: #000;
}

.scroll__menu-a{
  color: #000;
  transition: all .3s linear;
}

.scroll__menu-a:hover{
  color: rgb(221, 26, 26);
  transition: all .3s;
}

.scroll__logo-img{
  height: 50px;
  width: 50px;
  transition: all .3s;
  margin-right: 0px;
  margin-bottom: 0px;
}
.scroll__logo-img svg{
  margin-right: 0px;
  margin-top: 5px;
  fill: #000;
  transition: all .3s;
}

.scroll__logo-text{
  color: #000;
  font-size: 30px;
  transition: all .3s;
}