0

Есть страница с анимацией, по клику на бургер элементы меню появляются одним за другим, по клику на "крестик" элементы должны "пропадать" в обратном порядке, то есть анимация должна быть воспроизведена в обратном порядке. Хочу использовать метод 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>

1 ответ 1

2

Все нормально с областью видимости. Если вы создаете переменную tl (с буквой L) то не используйте потом единицу вместо буквы)))) Вы создаете константу tl, а анимацию задаете для какой то переменной t1

Не создавайте каждый раз анимацию при клике, задайте ее в функции или выше, задайте paused: true и управляйте анимацией при кликах.

Создавая timeline в gsap используйте структуру типа:

tl
  .fromTo(анимация для одного элемента)
  .fromTo(анимация второго элемента)

а не

tl.fromTo();
tl.fromTo();

В вашем случае анимировать opacity бесполезно, так как вы задали для меню display: none, в примере я показал как использовать .set() - мы задаем для меню autoAlpha: 0 что означает пару opacity: 0, visibility: hidden

После исправления ошибок: (обратите внимание вам не нужно использовать .fromTo(), достаточно .to()

const burger = document.querySelector('.burger');
const menu = document.querySelector('.menu');
const menuClose = document.querySelector('.close');
const tl = gsap.timeline({
  paused: true,
  defaults: {
    duration: .3
  }
});

// При каждом клике вы заново задавали анимацию

gsap.set('.menu', {
  autoAlpha: 0
});
tl.to(".menu", {
  autoAlpha: 1
})
.to(".menu__nav", {
  autoAlpha: 1
})
.to(".social", {
  autoAlpha: 1
})
.to(".menu__right", {
  autoAlpha: 1
});

burger.addEventListener('click', () => {
  menu.classList.add('_active');
  tl.play();
});

menuClose.addEventListener('click', () => {
  menu.classList.remove('_active');
  tl.reverse();
});
body {
  position: relative;
}

.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 {
  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;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/gsap.min.js"></script>

<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>

А можно и попроще сделать:

const burger = document.querySelector('.burger');
const menu = document.querySelector('.menu');
const menuClose = document.querySelector('.close');
const tl = gsap.timeline({
  paused: true,
  defaults: {
    duration: .3
  }
});

// Задаем меню opacity: 0, visibility: hidden
gsap.set('.menu', {autoAlpha: 0});

// создаем функцию, так как мы используем одинаковый паттерн для всех элементов
function createTl(element){
  const tl = gsap.timeline()
  // Обратите внимание что не нужно для вашей анимации использовать конструкцию .fromTo, достаточно .to
  tl.to(element, {autoAlpha: 1})
  return tl
}

// Собираем timeline
tl.add(createTl('.menu'))
  .add(createTl('.menu__nav'))
  .add(createTl('.social'))
  .add(createTl('.menu__right'))

// Пользуемся
burger.addEventListener('click', () => {
  menu.classList.add('_active');
  tl.play();
});

menuClose.addEventListener('click', () => {
  menu.classList.remove('_active');
  tl.reverse();
});
body {
  position: relative;
}

.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 {
  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;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/gsap.min.js"></script>

<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>

3
  • Да, благодарю, недавно я нашел ответ, перенес там создание тамлайна за обработчик клика, и все более-менее заработало, но Вы все равно открыли для меня новые практики, теперь стало еще более понятно, как грамотно пользоваться gsap
    – Summersby
    22 окт 2021 в 13:00
  • 1
    @Summersby посмотрите на форуме gsap, там почти на все есть ответы, второй пример, который я привел оптимизирован по количеству кода, убрал весь мусор. На практике чаще всего используется как раз вариант объявления анимации, создание анимации, а потом на события вешаются управление анимацией.
    – Greg--
    22 окт 2021 в 13:16
  • 1
    @Greg--да, довольно изящно получился второй вариант, оч понравился!
    – Summersby
    22 окт 2021 в 13:37

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.