Анимация перемещения элемента с помощью добавления

Я хочу, чтобы элемент на странице перемещался из Jumbotron в панель навигации с «движущейся» анимацией при прокрутке до определенной высоты.

мне удалось добиться этого, настроив div class="logo-top" на панели навигации и div class="logo-hero" внутри jumbotron, и я использую append для изменения родительского класса изображения (#logo), чтобы переместить его из джамботрона в панель навигации и соответственно изменить его размер.

Я безуспешно пытался добавить .animate.

var moved = false;
var logo = $("#logo");
var logo1 = logo.clone();


$(window).scroll(function () {
    var vertical_position = 0;
    if (pageYOffset)//usual
        vertical_position = pageYOffset;
    else if (document.documentElement.clientHeight)//ie
        vertical_position = document.documentElement.scrollTop;
    else if (document.body)//ie quirks
        vertical_position = document.body.scrollTop;


    if (vertical_position > 120) {
        moveLogoUp(moved);
        moved = true;
    }
    else if (vertical_position < 120 && moved === true) {
        moveLogoDown(moved);
        moved = false;
    }
});


function moveLogoUp(moved) {
    if (!moved) {
        logo.animate({
            "width": 125
        }, "slow");
        logo1.css("visibility", "hidden");
        $(".logo-top").append(logo);
        $(".logo-hero").append(logo1);
    }
}

function moveLogoDown(moved) {
    if (moved) {
        $(".logo-hero").append(logo);
        logo.animate({
            "width": "20rem"
        }, "slow");
        logo1.remove();
        $(".logo-hero").append(logo);
        console.info("moveLogoDown done");
    }
}

Проблема в том, что анимация не «движется», а просто изменяет размер. как я могу выполнить эффект анимации «перемещение»?