There is a page with animation, by clicking on the burger, the menu items appear one after another, by clicking on the "cross", the elements should "disappear" in reverse order, that is, the animation should be played in reverse order. I want to use the reverse() method, but the problem is that the burger button and the "cross" button are different DOM elements, the scope does not allow
const burger = document.querySelector('.burger');
const menu = document.querySelector('.menu');
const menuClose = document.querySelector('.close');
var tb = gsap.timeline({defaults: {duration: .3}});
burger.addEventListener('click', () => {
menu.classList.add('_active');
tb.fromTo(".menu", { opacity: 0}, { opacity: 1});
tb.fromTo(".menu__nav", { opacity: 0}, { opacity: 1});
tb.fromTo(".social", { opacity: 0}, { opacity: 1});
tb.fromTo(".menu__right", { opacity: 0}, { opacity: 1});
});
menuClose.addEventListener('click', () => {
tb.reverse();
menu.classList.remove('_active');
});