Gsap - проблема on.resize

Question

Я пытался решить свою проблему, читая другие темы, связанные с проблемами gsap / on.resize, но я не нашел правильного ответа.

Когда я открываю меню, логотип работает правильно и устанавливает его положение по центру экрана { y:0 } . Однако после закрытия меню я не могу заставить логотип вернуться в исходное положение { y:-logoPosition +20 }. Значения не обновляются в "состоянии закрытия меню".

Я, должно быть, возиться с обновлениями VAR, но я не знаю, как это сделать.

Надеюсь, кто-нибудь может мне помочь!

Заранее спасибо:)

Jsfiddle

// Scope

var menuFrame = $('#menu-frame');
var menuH = window.innerHeight;
var navH = $("nav").height();
var logoH = $("#logo").height();
var logoPosition = (menuH -navH)/2;
var toggleMenu = $('.menu-toggle');
var logo = $('#logo');
var logoDiv = $('#logo-divider');
var navList = $('ul#menu-nav li');


// New Gsap timeline
var menuAnim = new TimelineMax({ paused: true, reversed: true });

// Animation when toggle clicked

menuAnim.fromTo([menuFrame], 0.6, {backgroundColor : 'rgba(0, 0, 0, 0.01)'}, {backgroundColor : 'rgba(250, 250, 250, 1)', ease: Power2.easeInOut},0.1);
menuAnim.from([logo], 0.6, { y:-logoPosition +20, ease: Power2.easeInOut });
menuAnim.fromTo([logoDiv], 0.6, { width: 0}, { width: '20%', ease: Power2.easeInOut });
menuAnim.staggerFromTo(navList, 1.2, {scale:0.5, opacity:0, delay:0.5}, { scale:1, opacity:1, ease:Elastic.easeOut, force3D:true}, 0.2);


// Reverse anmiation on click

toggleMenu.on('click', function() {

    $(this).toggleClass('active');
    menuAnim.reversed() ? menuAnim.play() : menuAnim.reverse();

});

// If toggle is active logo position is middle off the frame

$(window).resize(function(){

    if ($(toggleMenu).hasClass('active')) {
        menuH = window.innerHeight;
        navH = $("nav").height();
        logoH = $("#logo").height();
        logoPosition = (menuH -navH)/2;
      var menuAnim = new TimelineMax({ paused: true, reversed: true });
        menuAnim.from([logo], 0.6, { y:0 }, {  ease: Power2.easeInOut });
        menuAnim.pause()

    }
    // If toggle is not active logo position = top of the frame 

    else {

        menuH = window.innerHeight;
        navH = $("nav").height();
        logoH = $("#logo").height();
        logoPosition = (menuH -navH)/2;
        var menuAnim = new TimelineMax({ paused: true, reversed: true });

        menuAnim.from([logo], 0.6, { y:-logoPosition +20 }, {  ease: Power2.easeInOut });
        menuAnim.pause()
    }
});