[Do i need to reset timeline? reverse() is triggered.]

Hi,

 

So I have this code:

 

    var toggleInfo = function(){

     var info = new TimelineLite();

     $('.info-open').click(function(e){

     e.preventDefault();

     info.to('.info', 0, { css: { className: "-=display-none"}, immediateRender:false});

     info.to('.info', 0, { css: { className: "+=flex"}, immediateRender:false});

     info.from('.info', 0.4, { css: { transform: "scale(0.2) translateZ(0)", opacity: 0 }, ease: Power3.easeOut, force3D: "auto"});

     info.staggerFrom('.about span', 0.4, { css: { transform: "translateY(60px) translateZ(0)", opacity: 0}, ease: Power3.easeOut, force3D: "auto"}, 0.1);

     info.staggerFrom('.contact li', 0.4, { css: { transform: "translateY(-30px) translateZ(0)", opacity: 0}, ease: Power3.easeOut, force3D: "auto"}, 0.1);

     info.from('.info-close', 0.2, { css: { transform: "translateY(-60px) translateZ(0)", opacity: 0}, ease: Power3.easeOut, force3d: "auto"});

     });

     $('.info-close').click(function(e){

     e.preventDefault();

     info.reverse().timeScale(2);

     });

    }

And it works fine the first time i click the triggers. However, when I click "info-open" again after I have clicked "info-close", it fires info.reverse(). This is an overlay im toggling and the first open and close works, but when i want to open it again it only fires the reverse animation thus closing the overlay.

See the Pen MwxwJa by ReGGae (@ReGGae) on CodePen