Gsap - on.resize issue

Question

I've been trying to resolve my problem by reading other topics linked to gsap / on.resize issues but i didnt found any proper answer.

When I open the menu, the logo is working correctly and set it's position to center of the screen { y:0 } . However, once the menu is closed i cant manage to force the logo back to it's original position { y:-logoPosition +20 }. The values are not updating on "menuclosing state".

I must be messing with var updates but i'm clueless to make this work.

Hope someone can help me !

Thanks in advance :)

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()
    }
});