Company logo
  • Empleos
  • Bootcamp
  • Acerca de nosotros
  • Para profesionales
    • Inicio
    • Empleos
    • Cursos y retos
    • Preguntas
    • Profesores
    • Bootcamp
  • Para empresas
    • Inicio
    • Nuestro proceso
    • Planes
    • Pruebas
    • Nómina
    • Blog
    • Comercial
    • Calculadora

0

69
Vistas
reverse playback of gsap animation

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');
});

7 months ago · Juan Pablo Isaza
Responde la pregunta
Encuentra empleos remotos