Organzing my gsap code

[Dovisally]

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

 

[PointC]

Hi @Dovisally 

 

I think you could benefit from using defaults on the timeline since your x/y/z positions are the same on almost all tweens. You can read about defaults here:

https://greensock.com/docs/v3/GSAP/Timeline

 

Rather than using all those negative delays, I'd recommend using the position parameter. More info:

 

Hopefully that helps. Happy tweening.

 

 

[ZachSaucier]

Additionally your ease is invalid. It should be: ease: 'expo.inOut'.

 

I might also use the reversed property inside of the timeline vars instead of using the reverse method later, but that's more personal preference.