froyline

thank you very much!!

https://codepen.io/froyline/pen/rNNwrjv - here my header/menu block. Help me pls with accelerete closing my menu.

Oh, sorry! I wrote a message, but for some reason it disappeared. But that's it, here the question is that I tried the timescale to reverse, but after that the menu does not work correctly. It either opens once and does not close, or the speed changes in both directions and at the same time the animation occurs when the page is loaded.

let menu = document.querySelector('.menu'); let Links = document.querySelectorAll('.menu__list-item'); let SLinks = document.querySelectorAll('.social__list-item'); let tl = gsap.timeline({ paused: true }); tl .to(menu, { duration: 0.7, opacity: 1, x:"-100%", ease: 'Power1.easeOut', }) .from(Links, { duration: 1, opacity: 0, x: 50, stagger: 0.2, ease: 'Power1.easeOut', }, "+=0.05") .from(SLinks, { duration: 1, opacity: 0, stagger: 0.15, ease: 'Power1.easeOut', },"<") tl.reverse(); let arrow = document.querySelector('.scroll__down__block'); let burger = document.querySelector('.burger'); let hidden = document.querySelector('body') burger.addEventListener('click', function(e){ burger.classList.toggle('active'); menu.classList.toggle('active'); arrow.classList.toggle('active'); hidden.classList.toggle('hidden'); tl.reversed(!tl.reversed()); },{passive: false})