GSAP with Barba Stagger issue

[Dheeraj Narayan]

Hey all. I have a Barba with GSAP setup for my website. Everything works fine. The navigation on my site also works as intended initially but stops animating suddenly after i navigate to 2 to 3 pages. I am not sure why this is happening. Heres a demo link. http://fingerprints.co.in/protectmyphone/ (Try to navigate to 2 to 3 pages) The text in the menu will stop animating suddenly. Requesting some help in this as i am new to barba and GSAP. Thank you.

Burger menu animation code:

function pageTransition() {

 // Toggle Icone hamburger
    $(document).ready(function () {
        $('.barres').click(function () {
            $('.barres').toggleClass('active');
        })
    })


    // Greensock Animations

    var timeline = new TimelineMax();

    timeline.to(".menu", 0.8, {
        left: '0%',
        ease: Expo.easeInOut,
        delay: 0
    });
    timeline.staggerFrom(".menu ul li", 0.3, {
        x: -100,
        opacity: 0
    }, 0.1);

    timeline.reverse();

    $(document).on('click', '.barres', function () {
        timeline.play();
    });
    $(document).on('click', 'a', function () {
        timeline.reverse();
        $('.barres').toggleClass('active');
    })
    
}

    Barba setup:

barba.init({


    sync: true,

    transitions: [
        {
            async leave(data) {
                const done = this.async();
data.current.container.remove();
                pageTransition();
                await delay(1000);
                done();
            },
            
            async beforeEnter(data) {
				ScrollTrigger.getAll().forEach(t => t.kill());
			},

            async enter(data) {
                contentAnimation();
            },

            async once(data) {
                contentAnimation();
            },
		},
	],


});

barba.hooks.enter(() => {
    window.scrollTo(0, 0);
});

 

[ZachSaucier]

Hey Dheeraj. Unfortunately these sorts of questions are a bit out of scope for what we can help with for free in these forums as they aren't really related to GSAP. Most likely your content is getting replaced and you're not recreating the animation for it or something along those lines. You have a ton of warnings in the console about elements that you're attempting to animate that don't exist. I recommend fixing all of those warnings. Maybe in the process you'll figure out what's going wrong with your menu. If you'd like someone to help debug your actual project you should hire someone to do that.

 

Additionally we highly recommend using the GSAP 3 formatting: