Hello there,
i do apologize for such a basic simple question
i want to know how to organize my gsap code i have 1 example and i want to see how you guy organize that so i will follow the same approach with rest of my code, i do not have any issue with the code i just want to see how do you professionally organize it on for production
const tl = gsap.timeline({paused: true});
tl.to('#overlay', {
opacity: 1
})
tl.to('#menu', {
x: 0,
y: 0,
z: 0,
ease: 'Expo.easeInOut',
delay: -1.2,
duration: 2
})
tl.to('.menu__line', {
x: 0,
y: 0,
z: 0,
delay: -1,
duration: 1.5,
stagger: 0.1,
})
tl.to('.menu__item__content', {
x: 0,
y: 0,
z: 0,
stagger: 0.1,
delay: -1.5,
})
tl.to('.menu__footer__item', {
opacity: 1,
stagger: 0.1,
delay: -1
})
tl.reverse()
document.querySelectorAll('.nav__burger').forEach(btn => {
btn.addEventListener('click', e => {
btn.classList.toggle('active');
tl.reversed(!tl.reversed())
});
});