Есть страница с анимацией, по клику на бургер элементы меню появляются одним за другим, по клику на "крестик" элементы должны "пропадать" в обратном порядке, то есть анимация должна быть воспроизведена в обратном порядке. Хочу использовать метод reverse()
, но проблема в том, что кнопка бургера и кнопка "крестика"-разные DOM-элементы, область видимости не позволяет
const burger = document.querySelector('.burger');
const menu = document.querySelector('.menu');
const menuClose = document.querySelector('.close');
const tl = gsap.timeline({
defaults: {
duration: .3
}
});
burger.addEventListener('click', () => {
menu.classList.add('_active');
t1.fromTo(".menu", {
opacity: 0
}, {
opacity: 1
});
t1.fromTo(".menu__nav", {
opacity: 0
}, {
opacity: 1
});
t1.fromTo(".social", {
opacity: 0
}, {
opacity: 1
});
t1.fromTo(".menu__right", {
opacity: 0
}, {
opacity: 1
});
});
menuClose.addEventListener('click', () => {
menu.classList.remove('_active');
t1.reverse();
});
.burger {
position: relative;
width: 49px;
height: 36px;
}
.burger__line {
position: absolute;
left: 0;
top: 0;
display: inline-block;
width: 100%;
height: 4px;
background-color: #000;
}
.burger__line:nth-child(2) {
top: 50%;
transform: translateY(-50%);
width: 78%;
}
.burger__line:nth-child(3) {
width: 66%;
top: auto;
bottom: 0;
}
.menu {
display: none;
position: absolute;
left: 0;
top: 0;
z-index: 100;
height: 100vh;
width: 100%;
background-color: #373737;
}
.menu.menu--open {
display: block;
}
.menu__top {
padding: 49px 0;
background-color: #111;
}
.close {
width: 36px;
height: 36px;
background-image: url("../img/close.svg");
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
.menu__container {
display: flex;
justify-content: space-between;
padding-top: 73px;
padding-bottom: 50px;
}
.menu__nav {
padding-top: 10px;
margin-bottom: 135px;
}
.menu__nav .nav__link {
font-size: 40px;
}
.menu__nav .nav__item:not(:last-child) {
margin-bottom: 51px;
}
.social__link {
display: inline-block;
width: 58px;
height: 58px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
<button class="btn-reset burger" aria-label="Открыть меню">
<span class="burger__line"></span>
<span class="burger__line"></span>
<span class="burger__line"></span>
</button>
<div class="menu">
<div class="menu__top">
<div class="container">
<button class="close btn-reset" aria-label="Закрыть меню"></button>
</div>
</div>
<div class="container menu__container">
<div class="menu__left">
<nav class="nav menu__nav" title="Главное меню">
<ul class="nav__list list-reset">
<li class="nav__item"><a href="#" class="nav__link">О нас</a></li>
<li class="nav__item"><a href="#" class="nav__link">Портфолио</a></li>
<li class="nav__item"><a href="#" class="nav__link">Создание стратегии</a></li>
<li class="nav__item"><a href="#" class="nav__link">Фотосъёмка</a></li>
<li class="nav__item"><a href="#" class="nav__link">Ретушь</a></li>
<li class="nav__item"><a href="#" class="nav__link">Аренда студии</a></li>
<li class="nav__item"><a href="#" class="nav__link">Контакты</a></li>
</ul>
</nav>
<ul class="social list-reset">
<li class="social__item">
<a href="#" class="social__link social__link--vk" aria-label="Перейти во Вконтакте"></a>
</li>
<li class="social__item">
<a href="#" class="social__link social__link--insta" aria-label="Перейти в Инстаграм"></a>
</li>
<li class="social__item">
<a href="#" class="social__link social__link--fb" aria-label="Перейти в Фейсбук"></a>
</li>
</ul>
</div>
<div class="menu__right">
<div class="sub-menu">
<h3 class="sub-menu__title">Кейсы</h3>
<ul class="sub-menu__list list-reset">
<li class="sub-menu__item"><a href="#" class="sub-menu__link">Уста к устам</a></li>
<li class="sub-menu__item"><a href="#" class="sub-menu__link">Zara</a></li>
<li class="sub-menu__item"><a href="#" class="sub-menu__link">New Balance</a></li>
<li class="sub-menu__item"><a href="#" class="sub-menu__link">Levi`s</a></li>
<li class="sub-menu__item"><a href="#" class="sub-menu__link">Rains</a></li>
<li class="sub-menu__item"><a href="#" class="sub-menu__link">Abercrombie & Fitch</a></li>
<li class="sub-menu__item"><a href="#" class="sub-menu__link">Massimo Dutti</a></li>
</ul>
</div>
<div class="sub-menu">
<h3 class="sub-menu__title">Партнёрам</h3>
<ul class="sub-menu__list list-reset">
<li class="sub-menu__item"><a href="#" class="sub-menu__link">Условия партнёрства</a></li>
<li class="sub-menu__item"><a href="#" class="sub-menu__link">Статистика</a></li>
<li class="sub-menu__item"><a href="#" class="sub-menu__link">О нас</a></li>
</ul>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/gsap.min.js"></script>