On scroll swap logo with smooth transition

So I have done this before, but cannot remember how I did it. Having the Logo swap out on scroll, but it transitions smoothly. (I am shrinking the whole nav bar, as I change from a logo that has an icon and text to just text).

The code below works, but it’s not pleasant, and it could be entirely wrong for making a nice smooth transition? Any help would be appreciated.

window.onscroll = function() {myFunction()};
var trigger = document.getElementById("myID");
var swap = trigger.offsetTop -250;
function myFunction() {
  if (window.pageYOffset >= swap) {
  	  	$('.navbar-brand img').attr('src','img/logo_text.png').fadeIn(1000);
  } else {
    	$('.navbar-brand img').attr('src','img/logo.png').fadeIn(1000);

Love the idea, but since I don’t know code, I’ll wait for the answer. :smile:

Thanks for your contribution :crazy_face: :rofl: